Multi-Select c помощью MooTools

В этом уроке речь пойдет о переносе выбранных опций из одного multi-select в другой. Думаю, что подобный виджет вы уже видели. Обычно он применяется на сайтах объявлений и регистрации в каталогах, где Ваше объявление (ваш сайт) подходит для размещения в нескольких рубриках. В этом уроке мы реализуем подобный виджет с помощью Mootools. Предлагаю для начала ознакомится с тем, что у нас должно получиться:

demosourse

Вначале подключаем фреймоворк Mootools.
Теперь создадим HTML-код. В нем у нас должно быть 2 элемента <select multiple>, один (id=select1) у нас будет хранить все опции, в другой (id=select2) выбранные опции у нас будут переноситься (изначально у нас он будет пустой):


  <div class="holder">
<select multiple="multiple" id="select1">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
<option value="6">Option 6</option>
</select>
<a href="#" id="add">добавить >></a>
</div>
<div class="holder">
<select multiple="multiple" id="select2" > </select>
<a href="#" id="remove"><< удалить </a>
</div>

div.holder в связке с css дает стилевое оформление.
Теперь м/у тегами head напишем следующий простой js-код:


<script type="text/javascript">
window.addEvent('domready', function() {
// когда все элементы DOM (структура документа) загрузились

$('add').addEvent('click', function() {
// на элемент #add вешаем обработчик событий addEvent и указываем
//тип события - клик, после которого нужно выполнить ф-цию

$('select1').getSelected().each(function(el) {
// у элемента #select1 получаем выбранные опции (getSelected)
// и к каждой из них (each)применяем следующую ф-цию

el.inject($('select2'));
// вставляем выбранный элемент в правую колонку
});
});
$('remove').addEvent('click', function() {
$('select2').getSelected().each(function(el) {
el.inject($('select1'));
});
});
});
</script>

К первой половине коду я оставил коментари, чтобы вам было проще разобраться. Вторая часть кода зеркальная и выполняет перенос элементов в обратном порядке.

Неплохо было б ограничить пользователю максимально возможное количество переносимых элементов. Давайте сделаем. Пусть максимальное количество у нас будет 4. Вместо простой вставки выбранных элементов мы напишем условия, при соблюдении которого элемент будет перенесен:

								
if ($('select2').length < 4) {
// ограничиваем пользователю кол-во разрешенных элементов до 4х

el.inject($('select2')); }
// вставляет выбранный элемент в правую колонку

else alert("Больше 4етырех нельзя").end();

Тут тоже все очень просто. С помощью ф-ции length определяем сколько элементов уже есть в правом мультиселекте, если их меньше 4, вставляем, если уже 4 и более выводим сообщение alert("больше 4етырех нельзя"). Т.к. ф-ция each запускает цикл, то при одновременном переносе нескольких элементов из левого мультиселекта в правый, условие $('select2').length < 4) проверяет каждый переносимый элемент, поэтому может получиться так, что alert будет выведен ровно столько раз, сколько лишних элементов "попытаються прорваться" в правый мультиселект.

Это нехорошо, вполне достаточно одного алерта. Поэтому, если условие $('select2').length < 4) не соблюдается, выводим alert и останавливаем цикл end().

Таким образом мы получаем короткий и красивый код. Урок достаточно простой, думаю каждый сможет его повторить. Окончательно полученный код Вы можете посмотреть в исходниках.

Спасибо за внимание. Коментарии приветствуются.

 

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: www.davidwalsh.name
Перевел: Евгений Стыценков
Урок создан: 21 Июня 2009
Просмотров: 34817
Правила перепечатки


5 последних уроков рубрики "Mootools"

^ Наверх ^