Выбираемые элементы

Selectable


Описание
Свойства
Методы
События
Оформление

Плагин Selectable позволяет делать элементы страницы выделяемыми, подобно ярлыкам рабочего стола. При нажатой клавише Ctrl можно выделять элементы без потери выделения с уже выбранных. Выделенные элементы автоматически получают класс ui-selected, а в процессе выделения обладают классом ui-selecting. Отметим, что применив Selectable к конкретному элементу, вы сделаете выделяемым не его самого, а его дочерние элементы:


↓ Имя свойства :типы значений (значение по умолчанию)
disabled:boolean(false)
Останавливает\возобновляет возможность выделять элементы страницы.
// ------- Работа со свойством disabled---------
// в момент установки selectable на элемент
$("selector").selectable({ disabled: true });
 
//получение значения disabled 
var disabled = $("selector").selectable( "option", "disabled" );
//изменение значения disabled
$("selector").selectable( "option", "disabled", true );
autoRefresh:boolean(true)
Этот параметр определяет необходимость пересчитывать размеры и позицию выделяемых элементов в процессе выделения. Если вы имеете дело с большим числом таких элементов, которые при этом не меняют свои размеры и положение на странице, то для экономии ресурсов компьютера можно установить значение свойства autoRefresh в false.
// ------- Работа со свойством autoRefresh ---------
// в момент установки selectable на элемент
$("selector").selectable({ autoRefresh:false });
 
//получение значения autoRefresh
var autoRefresh = $("selector").selectable( "option", "autoRefresh" );
//изменение значения autoRefresh
$("selector").selectable( "option", "autoRefresh", false );
cancel:селектор(':input,option')
Пока курсор находится над элементом, соответствующим селектору из cancel, содержащий его selectable-элемент не будет выделен.
// ------- Работа со свойством cancel ---------
// в момент установки selectable на элемент
$("selector").selectable({ cancel:':input,option,textarea' });
 
//получение значения cancel
var cancel = $("selector").selectable( "option", "cancel" );
//изменение значения cancel
$("selector").selectable( "option", "cancel", ':input,option,textarea' );
delay:integer(0)
Параметр delay определяет задержку (в миллисекундах) перед началом выделения элемента. Это может быть защитой от случайного выделения элемента.
// ------- Работа со свойством delay ---------
// в момент установки selectable на элемент
$("selector").selectable({ delay:500 });
 
//получение значения delay
var delay = $("selector").selectable( "option", "delay" );
//изменение значения delay
$("selector").selectable( "option", "delay", 500 );
distance:integer(0)
Этот параметр определяет размер (в пикселях) выделения элемента, который нужно сделать, чтобы он был выбран. Это может быть защитой от случайного выделения элемента.
// ------- Работа со свойством distance ---------
// в момент установки selectable на элемент
$("selector").selectable({ distance:15 });
 
//получение значения distance
var distance = $("selector").selectable( "option", "distance" );
//изменение значения distance
$("selector").selectable( "option", "distance", 15 );
С помощью заданного в этом параметре селектора происходит фильтрация дочерних элементов selectable-элемента. Те из них, кто проходит эту фильтрацию, сможет быть выделен, а остальные нет.
// ------- Работа со свойством filter ---------
// в момент установки selectable на элемент
$("selector").selectable({ filter:"li" });
 
//получение значения filter
var filter = $("selector").selectable( "option", "filter" );
//изменение значения filter
$("selector").selectable( "option", "filter", "li" );
tolerance:string("touch")
Определяет при каких условиях элемент будет выделен. Возможные варианты:
fit — если зона созданная курсором полностью покрывает элемент.
touch — если зона созданная курсором пересекает элемент хотя бы в одной точке.
// ------- Работа со свойством tolerance ---------
// в момент установки selectable на элемент
$("selector").selectable({ tolerance:"fit" });
 
//получение значения tolerance
var tolerance = $("selector").selectable( "option", "tolerance" );
//изменение значения tolerance
$("selector").selectable( "option", "tolerance", "fit" );

↓ Способ вызова
.selectable("destroy") 
Удаляет всю функциональность плагина selectable с выбранных элементов.
.selectable("disable") 
Приостанавливает работу плагина selectable на выбранных элементах. Для возобновления, необходимо воспользоваться методом .selectable("enable").
.selectable("enable") 
Возобновляет работу плагина selectable на выбранных элементах (например, после того, как она была остановлена с помощью .selectable("disable")).
.selectable("option", optionName, [value]) 
Этот метод позволяет изменять/получать свойства плагина selectable. Если необходимо изменить сразу несколько свойств, воспользуйтесь следующей формой этой функции — .selectable("option", options), где options это объект в формате {optionName1:value1, optionName2:value2, ...}.
.selectable("widget") 
Возвращает те из выбранных элементов, которые обладают функциональностью плагина selectable.
.selectable("refresh") 
Производит пересчет размеров и позиций selectable-элементов. Метод может быть полезен при выключенном свойстве autoRefresh.

↓ Внутреннее имя события :внешнее имя
create:selectablecreate
Событие create происходит в момент установки selectable на элемент.
// обработка события create
$("selector").selectable({
   create: function(event, ui) { ... }
});
 
// еще один способ (используя метод bind)
$("selector").bind( "selectablecreate", function(event, ui){ ... } );
selected:selectableselected
Это событие происходит на каждом выделенном элементе отдельно, в момент окончания выделения (при отпускании клавиши мыши).
// обработка события selected
$("selector").selectable({
   selected: function(event, ui) { ... }
});
 
// еще один способ (используя метод bind)
$("selector").bind( "selectableselected", function(event, ui){ ... } );
selecting:selectableselecting
Это событие происходит в процессе выделения (при нажатой клавише мыши), на элементе, только что захваченном зоной выделения.
// обработка события selecting
$("selector").selectable({
   selecting: function(event, ui) { ... }
});
 
// еще один способ (используя метод bind)
$("selector").bind( "selectableselecting", function(event, ui){ ... } );
start:selectablestart
Событие start происходит в момент начала выделения элементов.
// обработка события start
$("selector").selectable({
   start: function(event, ui) { ... }
});
 
// еще один способ (используя метод bind)
$("selector").bind( "selectablestart", function(event, ui){ ... } );
stop:selectablestop
Событие start происходит в момент окончания выделения элементов (отпускания кнопки мыши).
// обработка события stop
$("selector").selectable({
   stop: function(event, ui) { ... }
});
 
// еще один способ (используя метод bind)
$("selector").bind( "selectablestop", function(event, ui){ ... });
unselected:selectableunselected
Это событие происходит в момент окончания выделения (при отпускании клавиши мыши) на элементах которые потеряли выделение.
// обработка события unselected
$("selector").selectable({
   unselected: function(event, ui) { ... }
});
 
// еще один способ (используя метод bind)
$("selector").bind( "selectableunselected", function(event, ui){ ... });
unselecting:selectableunselecting
Это событие происходит в процессе выделения (при нажатой клавише мыши), на элементе, из которого только ушла зона выделения.
// обработка события unselecting
$("selector").selectable({
   unselecting: function(event, ui) { ... }
});
 
// еще один способ (используя метод bind)
$("selector").bind( "selectableunselecting", function(event, ui){ ... } );

Плагин Selectable использует стандартные стили jQueryUI-css для оформления. В частности, оттуда используются цвета и фоны (background). Для их редактирования рекомендуется использовать специальную ручную настройку на сайте jQuery UI. Для специфичных манипуляций с выделяемыми элементами, можно воспользоваться информацией о их структуре, которая выглядит следующим образом:

Кроме этого, в процессе выделения, выбранные элементы приобретают класс ui-selecting, а по окончанию выделения, этот класс сменяется на ui-selected.