jQuery на русском - selectable(options)

Slyweb

Поиск функций jQuery

Характеристика функции

[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="jquery-ui-1.7.2.custom.css" 
rel="stylesheet" type="text/css"/>
<script src="jquery-1.3.2.min.js"></script>
<script src="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>

Параметры

Опции

Опция: autoRefresh

Опция определяет, какой из двух - позиция или размер, обновляются (пересчитываются) при каждой выборке. Если вы имеете множество элементов вы можете установить false и вызывать обновление в ручную.

"По умолчанию установлено"true

Выбрать элементы с использованием опции autoRefresh.

$('.selector').selectable({ autoRefresh: false });

Установить или получить опцию autoRefresh после запуска.

//получить опцию
var autoRefresh = $('.selector').selectable('option', 'autoRefresh');
//установить опцию
$('.selector').selectable('option', 'autoRefresh', false);

Опция: cancel

Опция не допускает выбирать элементы, которые начинаются определенным селектором.

"По умолчанию установлено":input,option

Выбрать элементы с использованием опции cancel.

$('.selector').selectable({ cancel: ':input,option' });

Установить или получить опцию cancel после запуска.

//получить опцию
var cancel = $('.selector').selectable('option', 'cancel');
//установить опцию
$('.selector').selectable('option', 'cancel', ':input,option');

Опция: delay

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

"По умолчанию установлено"0

Выбрать элементы с использованием опции delay.

$('.selector').selectable({ delay: 20 });

Установить или получить опцию delay после запуска.

//получить опцию
var delay = $('.selector').selectable('option', 'delay');
//установить опцию
$('.selector').selectable('option', 'delay', 20);

Опция: distance

Расстояние в пикселях, определяющее, когда выбор должен произойти. Если указано, выбор элемента не произойдёт до тех пор, пока курсор мыши, при нажатии, не пройдёт определенную дистанцию.

"По умолчанию установлено"0

Выбрать элементы с использованием опции distance.

$('.selector').selectable({ distance: 20 });

Установить или получить опцию distance после запуска.

//получить опцию
var distance = $('.selector').selectable('option', 'distance');
//установить опцию
$('.selector').selectable('option', 'distance', 20);

Опция: filter

Будет выбран, соответствующий фильтру, элемент "потомок" (становится способным быть выбранным).

"По умолчанию установлено"*

Выбрать элементы с использованием опции filter.

$('.selector').selectable({ filter: 'li' });

Установить или получить опцию filter после запуска.

//получить опцию
var filter = $('.selector').selectable('option', 'filter');
//установить опцию
$('.selector').selectable('option', 'filter', 'li');

Опция: tolerance

Допустимые значения: 'touch', 'fit'. fit: выбор нескольких элементов путём перетаскивания мыши недопускается. touch: допускается выбор нексольких элементов путём перетаскивания мыши.

"По умолчанию установлено"touch

Выбрать элементы с использованием опции tolerance.

$('.selector').selectable({ tolerance: 'fit' });

Установить или получить опцию tolerance после запуска.

//getter
var tolerance = $('.selector').selectable('option', 'tolerance');
//setter
$('.selector').selectable('option', 'tolerance', 'fit');

События

Событие: selected

Данное событие возникает в конце операции производящей выбор, для каждого элемента добавляемого в набор.

Установить функцию callback, обрабатывающую событие selected, как инициализирующую опцию.

$('.selector').selectable({
   selected: function(event, ui) { ... }
});

Связать событие selected с типом: selected.

$('.selector').bind('selected', function(event, ui) {
  ...
});

Событие: selecting

Данное событие возникает в течение операции выбора, для каждого элемента добавляемого к набору.

Установить функцию callback, обрабатывающую событие selecting, как инициализирующую опцию.

$('.selector').selectable({
   selecting: function(event, ui) { ... }
});

Связать событие selected с типом: selected.

$('.selector').bind('selecting', function(event, ui) {
  ...
});

Событие: start

Данное событие запускается, когда начинается операция выбора.

Установить функцию callback, обрабатывающую событие start, как инициализирующую опцию.

$('.selector').selectable({
   start: function(event, ui) { ... }
});

Связать событие start с типом: start.

$('.selector').bind('selectablestart', function(event, ui) {
  ...
});

Событие: stop

Данное событие запускается в конце операции выбора.

Установить функцию callback, обрабатывающую событие stop, как инициализирующую опцию.

$('.selector').selectable({
   stop: function(event, ui) { ... }
});

Связать событие stop с типом: stop.

$('.selector').bind('selectablestop', function(event, ui) {
  ...
});

Событие: unselected

Данное событие возникает в конце операции выбора элемента, для каждого элемента, удалённого из набора выбранных элементов.

Установить функцию unselected, обрабатывающую событие stop, как инициализирующую опцию.

$('.selector').selectable({
   unselected: function(event, ui) { ... }
});

Связать событие unselected с типом: unselected.

$('.selector').bind('unselected', function(event, ui) {
  ...
});

Событие: unselecting

Данное событие возникает в течение операции выбора элемента, для каждого удаляемого элемента из набора выбранных элементов.

Установить функцию unselecting, обрабатывающую событие unselecting, как инициирующую опцию.

$('.selector').selectable({
   unselecting: function(event, ui) { ... }
});

Связать событие unselecting с типом: unselecting.

$('.selector').bind('unselecting', function(event, ui) {
  ...
});

Методы

Метод: destroy

.selectable( 'destroy' )

Метод полностью удаляет функциональность selectable. Это вернёт элемент к его первоначальному состоянию.

Метод: disable

.selectable( 'disable' )

Отключить selectable.

Метод: enable

.selectable( 'enable' )

Включить selectable.

Метод: option

.selectable( 'option' , optionName , [value] )

Устанавить или получить любую опцию данного плагина. Если нет заданных значений, функция получает значение опции.(getter).

Метод: refresh

.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>

Примеры

Добавлено1.2

Версия jQuery 1.3.2 Документ создан 2009-02-21T00:32:39Z

Ошибки и опечатки
Предложения и жалобы
Поддержка сайта

Александр Ермаков. Хостинг - www.pwstudio.org

Руководство jQuery 1.4.2

Плагины jQuery UI

Эффекты