Плагин Selectable – один из нескольких плагинов, входящих в состав jQuery UI, с помощью которых можно организовать взаимодействие с элементами веб-станиц. Он дает возможность выбора элементов с помощью передвижения указателя мыши с удержанием в нажатом состоянии ее левой клавиши или комбинации щелчка мышью с нажатием и удержанием клавиши Ctrl (Meta), подобно тому, как это делается в традиционных приложениях.

Сделаем сами?

Идем на страницу настраиваемой закачки на сайте jQuery UI, чтобы получить необходимые нам файлы. Щелкаем на ссылке Deselect all component, чтобы не закачивать лишнее, а затем выбираем только то, что нам потребуется – отмечаем чекбокс Selectable и видим, что вместе с ним отметился чекбокс UI Core. Работа плагина Selectable зависит от него, поэтому он необходим.
Кроме этого, справа есть выпадающий список, где можно выбрать понравившуюся тему оформления. Если все готово, кликаем кнопку Download и получаем архив.

Сначала в разделе HEAD подключаем несколько файлов, которые есть в архиве.

Подключили файл стилей css/le-frog/jquery-ui-1.7.2.custom.css одной из многочисленных тем оформления. Конечно, свое собственное оформление лучше, но для изучения примеров воспользуемся готовым оформлением. Кроме этого мы подключили файл библиотеки – js/jquery-1.3.2.min.js и файл js/jquery-ui-1.7.2.custom.min.js, в котором объединена функциональность ядра UI и плагина Selectable.

Опыты будем ставить над списком ol, пункты которого нам предстоит сделать выделяемыми. Вот пример HTML-разметки:

и пример javascript-кода, который связывает с подопытным списком функциональность плагина:

Это был пример, где все возможные настройки устанавливались по умолчанию. Не будем с этим мириться и попробуем передать какие-нибудь настройки самостоятельно.

В примере мы передали плагину значение 30 в опции distance, и этим определили расстояние в пикселах, которое должен пройти указатель мыши (с одновременно нажатой левой клавишей), прежде, чем начнется выделение указанных элементов. Значения для остальных опций можно передать плагину подобным образом. Опций у этого плагина немного, всего шесть:

autoRefresh – по умолчанию установлено значение true, что определяет пересчет положения и размеров области выделения при попадании туда очередного элемента. Если таких элементов очень много, может понадобиться отключить пересчет. Для этого следует установить значение false. При необходимости можно будет использовать для пересчета метод .selectable(‘refresh’).
cancel – опция принимает в качестве значения селектор jQuery. Предотвращает начало выбора элементов, если при начале выбор указатель мыши находится над указанными элементами. По умолчанию установлено значение ‘:input,option’.
delay – в опции указывается число, устанавливающее время в миллисекундах, определяющее задержку начала выбора элементов. По умолчанию – 0.
distance – в опции указывается число, устанавливающее расстояние в пикселах, которое должен пройти указатель мыши до начала выбора элементов. По умолчанию – 0.
filter – в качестве значения опции указывается селектор jQuery. По умолчанию используется значение ‘*’. В этой опции можно указывать элементы-потомки, которые будут сделаны выбранными (при условии, если они могут быть таковыми).
tolerance – опция принимает в качестве значения строку. По умолчанию используется значение ‘touch’. Возможные значения ‘touch’ и ‘fit’. При использовании значения ‘touch’ выбор элемента производится, когда область выбора перекрывает элемент какой-либо частью. При использовании значения ‘fit’ выбор элемента производится, только когда область выбора перекрывает элемент полностью.

Посмотрим теперь, на какие события может реагировать плагин Selectable. Таких событий всего шесть. Для начала разберем простенький пример:

Callback-функция, которую мы определили в опции stop, может принимать два аргумента. Первый аргумент – объект события. Мы используем его внутри функции, обращаясь к свойству type, чтобы вывести в окне предупреждения название события, вызвавшего функцию.

В следующем примере используем еще пару опций, связанных с событиями и заодно опробуем объект ui:

В этом примере мы использовали опции start, selected и stop. В опциях start и stop определяются callback-функции, которые вызываются при начале и окончании выбора элементов. В опции selected можно определить callback-функцию, которая вызывается для каждого выбранного элемента по окончании выбора.

selected – событие selected наступает по окончании выбора для каждого выбранного элемента.
selecting – событие selecting наступает в процессе выбора для каждого выбранного элемента.
start – событие selectablestart наступает при начале процесса выбора.
stop – событие selectablestop наступает при окончании процесса выбора.
unselected – событие unselected наступает по окончании выбора для каждого элемента не попавшего в выбор по сравнению с предыдущим состоянием.
unselecting – событие unselecting происходит в процессе выбора, когда какой-либо элемент, присутствовавший в выборе, удаляется из него.

Еще плагин Selectable имеет несколько методов, с помощью которых можно управлять им после инициализации. Для того, чтобы испытать методы, добавим несколько кнопок в HTML-разметку:

и используем вот такой javascript-код:

Мы используем три кнопки с идентификаторами #disable, #enable и #destroy, связывая с ними события click. При нажатии на кнопки вызываем соответствующий метод плагина Sortable, временно запрещая использование функциональности плагина, вновь восстанавливая эту функциональность, и удаляя ее окончательно, возвращая элементы в состояние, предшествующее инициализации.

destroy – .selectable(‘destroy’) полностью удаляет всю функциональность плагина Selectable. Возвращает элементы в состояние, предшествующее инициализации.
disable – .selectable(‘disable’) временно запрещает использование всей функциональности плагина. Вновь разрешить ее использование можно с помощью метода enable.
enable – .selectable(‘enable’) разрешает использование всей функциональности плагина, если ранее она была запрещена с использованием метода disable.
option – .selectable(‘option’, optionName, [value]) с помощью этого метода можно получить или установить значение любой опции плагина после инициализации.
refresh – .selectable(‘refresh’) этот метод обычно используется, если для опции autoRefresh установлено значение false. С помощью него можно пересчитать положение и размеры области выделения.

Скачать библиотеку selectable