На этом шаге мы рассмотрим один из таких компонентов.
В число компонентов взаимодействий библиотеки jQuery UI входит компонент Sortable, который способен преобразовать практически любую группу элементов в список, дающий возможность перетаскивать его элементы. На рисунке 1 изображен неупорядоченный список элементов, к которым были применены некоторые стили CSS.
Рис.1. Первоначальный вид списка
Разметка HTML этого списка выглядит очень просто:
<ul id="sort-container">
<li>Джон</li>
<li>Пол</li>
<li>Джордж</li>
<li>Ринго</li>
<li>Пит</li>
<li>Стью</li>
</ul>
Теперь, чтобы сделать данный список сортируемым, достаточно написать следующий программный код:
$(document).ready(function() {
$('#sort-container').sortable();
});
Эта единственная строка в вызове $(document).ready() позволяет буксировать мышью любой элемент списка и перемещать его в любую позицию в пределах списка, как показано на рисунке 2.
Рис.2. Любой элемент может быть перемещен в любую позицию в пределах списка
Полный текст этого примера можно взять здесь.Мы можем расширить возможности пользователя при взаимодействии с интерфейсом путем передачи методу .sortable() дополнительных параметров. У этого метода имеется более тридцати возможных параметров, однако в нашем примере мы воспользуемся лишь некоторыми из них:
$(document).ready(function() {
$('#sort-container').sortable({
opacity: .5,
axis: 'y',
cursor: 'move'
});
});
Имена первых двух параметров, opacity и cursor, говорят сами за себя. Третий параметр, axis, ограничивает возможность перемещения элементов в процессе сортировки определенной осью координат (в данном случае осью у), как показано на рисунке 3.
Рис.3. Параметр axis ограничивает возможность перемещения элемента списка определенной осью координат
Полный текст этого примера можно взять здесь.Как видно по более светлому цвету фона перемещаемого элемента на рисунке 3, мы воспользовались также возможностью определить класс ui-sortable-helper в таблице стилей CSS, который автоматически применяется к перемещаемым элементам.
За дополнительной информацией обо всех компонентах взаимодействий, входящих в состав библиотеки jQuery UI, обращайтесь по адресу: http://docs.jquery.com/UI#Interaction.
На следующем шаге мы рассмотрим виджеты.
