[Function] selectable(options)
Создать эффект «selectable» обрабатываемый jquery.
selectable(options) → jQuery
Плагин jQuery UI Selectable позволяет выбрать как единичные элементы, так и множество (иногда этот метод называется lasso) при использовании мыши. Так же, элементы могут выбираться при помощи нажатия мыши или ёё перемещения и удержания клавиш Ctrl/Meta key, что позволяет выбрать несколько элементов (не смежных).
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link href="http://test-drupal.ru/themes/slyweb/css/jquery-ui-1.7.2.custom.css"
rel="stylesheet" type="text/css"/>
<script src="http://test-drupal.ru/themes/slyweb/js/jquery-1.3.2.min.js"></script>
<script src="http://test-drupal.ru/themes/slyweb/js/jquery-ui-1.7.2.custom.min.js"></script>
<script>
$(document).ready(function(){
$(function() {
$("#selectable").selectable();
});
});
</script>
</head>
<body class="iframe">
<div class="demo">
<ol id="selectable">
<li class="ui-widget-content">Item 1</li>
<li class="ui-widget-content">Item 2</li>
<li class="ui-widget-content">Item 3</li>
<li class="ui-widget-content">Item 4</li>
<li class="ui-widget-content">Item 5</li>
<li class="ui-widget-content">Item 6</li>
<li class="ui-widget-content">Item 7</li>
</ol>
</div><!-- End demo -->
<div style="display: none;" class="demo-description">
<p>Enable a DOM element (or group of elements) to be selectable.
Draw a box with your cursor to select items.
Hold down the Ctrl key to make multiple non-adjacent selections. </p>
</div><!-- End demo-description -->
</body>
</html>
<style>
#feedback { font-size: 1.4em; }
#selectable .ui-selecting { background: #FECA40; }
#selectable .ui-selected { background: #F39814; color: white; }
#selectable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
#selectable li { margin: 3px; padding: 0.4em; font-size: 1.4em; height: 18px; }
</style>
Опция определяет, какой из двух - позиция или размер, обновляются (пересчитываются) при каждой выборке. Если вы имеете множество элементов вы можете установить false и вызывать обновление в ручную.
"По умолчанию установлено"true
Выбрать элементы с использованием опции autoRefresh.
$('.selector').selectable({ autoRefresh: false });
Установить или получить опцию autoRefresh после запуска.
//получить опцию
var autoRefresh = $('.selector').selectable('option', 'autoRefresh');
//установить опцию
$('.selector').selectable('option', 'autoRefresh', false);
Опция не допускает выбирать элементы, которые начинаются определенным селектором.
"По умолчанию установлено":input,option
Выбрать элементы с использованием опции cancel.
$('.selector').selectable({ cancel: ':input,option' });
Установить или получить опцию cancel после запуска.
//получить опцию
var cancel = $('.selector').selectable('option', 'cancel');
//установить опцию
$('.selector').selectable('option', 'cancel', ':input,option');
Время в миллисекундах определяющее, когда элемент становится выбранным. Это помагает предупредить нежелательный выбор при щелчке по элементу.
"По умолчанию установлено"0
Выбрать элементы с использованием опции delay.
$('.selector').selectable({ delay: 20 });Установить или получить опцию delay после запуска.
//получить опцию
var delay = $('.selector').selectable('option', 'delay');
//установить опцию
$('.selector').selectable('option', 'delay', 20);
Расстояние в пикселях, определяющее, когда выбор должен произойти. Если указано, выбор элемента не произойдёт до тех пор, пока курсор мыши, при нажатии, не пройдёт определенную дистанцию.
"По умолчанию установлено"0
Выбрать элементы с использованием опции distance.
$('.selector').selectable({ distance: 20 });
Установить или получить опцию distance после запуска.
//получить опцию
var distance = $('.selector').selectable('option', 'distance');
//установить опцию
$('.selector').selectable('option', 'distance', 20);
Будет выбран, соответствующий фильтру, элемент "потомок" (становится способным быть выбранным).
"По умолчанию установлено"*
Выбрать элементы с использованием опции filter.
$('.selector').selectable({ filter: 'li' });Установить или получить опцию filter после запуска.
//получить опцию
var filter = $('.selector').selectable('option', 'filter');
//установить опцию
$('.selector').selectable('option', 'filter', 'li');
Допустимые значения: 'touch', 'fit'.
fit: выбор нескольких элементов путём перетаскивания мыши недопускается.
touch: допускается выбор нексольких элементов путём перетаскивания мыши.
"По умолчанию установлено"touch
Выбрать элементы с использованием опции tolerance.
$('.selector').selectable({ tolerance: 'fit' });Установить или получить опцию tolerance после запуска.
//getter
var tolerance = $('.selector').selectable('option', 'tolerance');
//setter
$('.selector').selectable('option', 'tolerance', 'fit');
Данное событие возникает в конце операции производящей выбор, для каждого элемента добавляемого в набор.
Установить функцию callback, обрабатывающую событие selected, как инициализирующую опцию.
$('.selector').selectable({
selected: function(event, ui) { ... }
});
Связать событие selected с типом: selected.
$('.selector').bind('selected', function(event, ui) {
...
});
Данное событие возникает в течение операции выбора, для каждого элемента добавляемого к набору.
Установить функцию callback, обрабатывающую событие selecting, как инициализирующую опцию.
$('.selector').selectable({
selecting: function(event, ui) { ... }
});
Связать событие selected с типом: selected.
$('.selector').bind('selecting', function(event, ui) {
...
});
Данное событие запускается, когда начинается операция выбора.
Установить функцию callback, обрабатывающую событие start, как инициализирующую опцию.
$('.selector').selectable({
start: function(event, ui) { ... }
});
Связать событие start с типом: start.
$('.selector').bind('selectablestart', function(event, ui) {
...
});
Данное событие запускается в конце операции выбора.
Установить функцию callback, обрабатывающую событие stop, как инициализирующую опцию.
$('.selector').selectable({
stop: function(event, ui) { ... }
});
Связать событие stop с типом: stop.
$('.selector').bind('selectablestop', function(event, ui) {
...
});
Данное событие возникает в конце операции выбора элемента, для каждого элемента, удалённого из набора выбранных элементов.
Установить функцию unselected, обрабатывающую событие stop, как инициализирующую опцию.
$('.selector').selectable({
unselected: function(event, ui) { ... }
});
Связать событие unselected с типом: unselected.
$('.selector').bind('unselected', function(event, ui) {
...
});
Данное событие возникает в течение операции выбора элемента, для каждого удаляемого элемента из набора выбранных элементов.
Установить функцию unselecting, обрабатывающую событие unselecting, как инициирующую опцию.
$('.selector').selectable({
unselecting: function(event, ui) { ... }
});
Связать событие unselecting с типом: unselecting.
$('.selector').bind('unselecting', function(event, ui) {
...
});
.selectable( 'destroy' )
Метод полностью удаляет функциональность selectable. Это вернёт элемент к его первоначальному состоянию.
.selectable( 'disable' )
Отключить selectable.
.selectable( 'enable' )
Включить selectable.
.selectable( 'option' , optionName , [value] )
Устанавить или получить любую опцию данного плагина. Если нет заданных значений, функция получает значение опции.(getter).
.selectable( 'refresh' )
Обновление позиции и размера каждого выбранного элемента. Данный метод может быть использован для ручного пересчета позиции и размера для каждого выбранного элемента. Метод полезен если autoRefresh установлен как false.
Используемая тема jQuery UI
Плагин jQuery UI Selectable использует jQuery UI CSS структуру для придания стиля, включающую цвета и фоновые текстуры. Мы рекомендуем использовать ThemeRoller инструмент для создания и загрузки тем, которые легко встраиваются и поддерживаются.
Если необходим более глубокий уровень настройки, существует особый виджет классов, ссылающийся на ui.draggable.css лист стилей, который может быть модифицирован. Данный класс подчеркнут жирным ниже.
Образец разметки jQuery UI CSS струтктуры классов
<ul class="ui-selectable">
<li class="ui-selectee"></li>
<li class="ui-selectee"></li>
<li class="ui-selectee"></li>
</ul>
Примечание: Данный образец разметки создан через плагин selectable, это не разметка для того чтобы выбирать элементы. Для выбора элементов достаточно следующей разметки:
<ul>
<li></li>
<li></li>
<li></li>
</ul>
Версия jQuery 1.3.2
Документ создан 2009-02-21T00:32:39Z
