Опубликовано admin -
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>

Опция: autoRefresh


Опция: cancel


Опция: delay


Опция: distance


Опция: filter


Опция: tolerance


Событие: selected

Событие: selecting

Событие: start

Событие: stop

Событие: unselected

Событие: unselecting

Метод: destroy

Метод: disable

Метод: enable

Метод: option

Метод: refresh

Используемая тема 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>

На разработку сайта! Скидки до 20%!