Multi-Select c помощью MooTools
В этом уроке речь пойдет о переносе выбранных опций из одного multi-select в другой. Думаю, что подобный виджет вы уже видели. Обычно он применяется на сайтах объявлений и регистрации в каталогах, где Ваше объявление (ваш сайт) подходит для размещения в нескольких рубриках. В этом уроке мы реализуем подобный виджет с помощью Mootools. Предлагаю для начала ознакомится с тем, что у нас должно получиться:
Вначале подключаем фреймоворк 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"
-
Создание меню при помощи MenuMatic 0.68.3
Создание горизонтального и вертикального меню при помощи MenuMatic 0.68.3
-
Анимированные закладки с использованием MooTools
Один из возможных способов поместить много контента на одно небольшое место - это использование системы закладок. Данный урок покажет как создать систему анимированных закладок с использованием CSS, куки и анимированного переключения панелей.
-
Выезжающая панель для сайта на Mootools
Изучив этот урок, Вы научитесь делать компактную выплывающую панель для сайта. Разрабатывать ее мы будем с помощью Mootools, ну и конечно же не обойдемся и без CSS-стилей, которые будут играть здесь роль дизайнинга панели
-
Увеличение / Уменьшение текстовых полей с помощью MooTools
Короткий урок про то, как добавить к любому текстовому полю возможность увеличения или уменьшения.
-
Автоматическая подпись изображений с помощью MooTools
Этот урок расскажет Вам про то, как сделать автоматическую подпись под рисунком с помощью MooTools.