Модуль UI Selectable — выделение элементов

Модуль UI Selectable позволяет выделять элементы с помощью мыши. Если при выделении удерживать нажатой клавишу <Ctrl>, то можно добавить новые элементы к уже выделенным. Для загрузки модуля переходим на страницу http://jqueryui.com/download. Оставляем установленными флажки UI Core, Selectable, 1.7.2, а затем щелкаем на кнопке Download. Распаковываем архив в отдельную папку. Из этого архива для работы модуля необходимы следующие файлы:

Все указанные файлы необходимо подключить к скрипту в том порядке, в котором они перечислены. В качестве примера рассмотрим функциональные возможности модуля с параметрами, принятыми по умолчанию (листинг 12.10).

Листинг 12.10. Модуль UI Selectable, выделение элементов

<!doctype html>
<html>
<head>
<title>Модуль UI Selectable. Выделение элементов</title>
<meta charset="utf-8">
<script src="js/jquery.js"></script>
<script src="js/jquery-ui-1.7.2.custom.min.js"></script>
<style>
body { font-size:10pt; font-family:Verdana, sans-serif; }
ul { margin:0; padding:15px; list-style-type:none; }
li { margin: 0 3px 3px 20px; padding: 5px 5px 5px 20px; width:300px;
     font-size:16px; font-family:Verdana, sans-serif; height:18px;
     border: 1px solid #000000; color:#000000; font-weight:bold; }
.ui-selecting { background-color: #ffe9b3; }
.ui-selected { background-color: #ff9600; color: #ffffff; }
</style>
<script>
$(document).ready(function() {
   $("#selectable").selectable();
});
</script>
</head>
<body>
Нажмите левую кнопку мыши над элементом и, не отпуская ее, выделяйте
элементы.<br>Удерживайте нажатой клавишу Ctrl, чтобы добавить новые
элементы.<br>
<ul id="selectable">
<li>Пункт 1</li>
<li>Пункт 2</li>
<li>Пункт 3</li>
<li>Пункт 4</li>
<li>Пункт 5</li>
<li>Пункт 6</li>
<li>Пункт 7</li>
<li>Пункт 8</li>
</ul>
</body>
</html>

Для того чтобы элементы можно было выделять с помощью мыши, необходимо применить метод selectable(). Формат метода:

selectable([<Объект с опциями>])

Параметр <Объект с опциями> представляет собой объект, состоящий из пар "опция/значение". Могут быть указаны следующие опции.

Первый формат метода selectable() позволяет задать значения при инициализации. Чтобы изменить или получить значения опций уже после инициализации, необходимо использовать второй формат метода selectable(). Для этого в первом параметре указывается значение "option", во втором — название опции, а в третьем — новое значение.

$("#selectable").selectable("option", "tolerance", "fit");

Если необходимо получить значение опции, то третий параметр указывать не нужно. В качестве примера получим значение опции tolerance:

alert($("#selectable").selectable("option", "tolerance"));

Второй формат метода selectable() позволяет также управлять выделением. Для этого в первом параметре указываются следующие значения.

Обработать события, происходящие с перемещаемым элементом, можно двумя способами.

selectable({
   <Событие>: <Функция обратного вызова>
});

или

bind(<Событие>, <Функция обратного вызова>)

В параметре <Событие> могут быть указаны следующие события (в скобках указано значение для метода bind()).

В параметре <Функция обратного вызова> указывается ссылка на функцию следующего формата.

function <Название функции>([<Объект event>[, <Объект UI>]]) {
   // ...
}

Через параметр <Объект UI> доступны следующие свойства.

При выделении элементов к ним добавляется стилевой класс ui-selected. Благодаря этому классу можно получить все выделенные элементы. В качестве примера получим индексы всех выделенных пунктов внутри списка.

$("#selectable li.ui-selected").each(function() {
   alert($("#selectable li").index(this));
});

Пример обработки различных событий приведен в листинге 12.11.

Листинг 12.11. Модуль UI Selectable, обработка событий

<!doctype html>
<html>
<head>
<title>Модуль UI Selectable. Обработка событий</title>
<meta charset="utf-8">
<script src="js/jquery.js"></script>
<script src="js/jquery-ui-1.7.2.custom.min.js"></script>
<style>
body { font-size:10pt; font-family:Verdana, sans-serif; }
ul { margin:0; padding:15px; list-style-type:none; }
.ui-selectee {
   /* Класс, добавляемый при инициализации */
   margin: 0 3px 3px 20px; padding: 5px 5px 5px 20px; width:300px;
   font-size:16px; font-family:Verdana, sans-serif; height:18px;
   border: 1px solid #000000; color:#000000; font-weight:bold;
}
.ui-selecting {
   /* Класс, добавляемый, если элемент попал в область выделения */
   background-color: #ffe9b3;
}
.ui-selected {
   /* Класс, добавляемый, если элемент был выделен */
   background-color: #ff9600; color: #ffffff;
}
</style>
<script>
$(document).ready(function() {
   $("#selectable").selectable({
      filter: "li", // Выделяемые элементы
      // Над элементом с id=id3 нельзя начать выделение
      cancel: "#id3",
      // Выделяем, если любая пункта точка попала
      // в область выделения
      tolerance: "touch",
      start: function() {
         $("#div1").append("Событие start<br>");
      },
     selected: function() {
         $("#div1").append("Событие selected<br>");
      },
      selecting: function() {
         $("#div1").append("Событие selecting<br>");
      },
      unselected: function() {
         $("#div1").append("Событие unselected<br>");
      },
      unselecting: function() {
         $("#div1").append("Событие unselecting<br>");
      },
      stop: function() {
         $("#div1").append("Событие stop<br>");
         // Выводим идентификаторы всех выделенных пунктов
         var elem = $("#selectedItems").empty();
         var sel = $("#selectable li.ui-selected");
         if (sel.size() > 0)
            sel.each(function() { elem.append(" " + this.id); });
         else elem.append("Нет");
      }
   }).bind("selectablestart", function() {
      $("#div1").html("Событие selectablestart<br>");
   });
   $("#btn1").click(function() {
      $("#selectable").selectable("disable");
   });
   $("#btn2").click(function() {
      $("#selectable").selectable("enable");
   });
});
</script>
</head>
<body>
<input type="button" value="Запретить" id="btn1">
<input type="button" value="Разрешить" id="btn2"><br><br>
<b>ID выделенных элементов:</b>
<span id="selectedItems">Нет</span><br>
<ul id="selectable">
<li id="id1">Пункт 1</li>
<li id="id2">Пункт 2</li>
<li id="id3">Пункт 3</li>
<li id="id4">Пункт 4</li>
<li id="id5">Пункт 5</li>
<li id="id6">Пункт 6</li>
</ul>
<div id="div1"></div>
</body>
</html>
Предыдущая статья Все статьи Следующая статья