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

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

  • jquery-1.3.2.min.js (папка js);
  • jquery-ui-1.7.2.custom.min.js (папка js).

Все указанные файлы необходимо подключить к скрипту в том порядке, в котором они перечислены. В качестве примера рассмотрим функциональные возможности модуля с параметрами, принятыми по умолчанию (листинг 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([<Объект с опциями>])

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

  • filter — позволяет указать элементы, которые могут быть выделены. В качестве значения указывается селектор jQuery. Значение по умолчанию — "*".
  • cancel — позволяет указать элементы, над которыми нельзя начать выделение. В качестве значения указывается селектор jQuery. Значение по умолчанию — ":input,option".
  • tolerance — определяет, в каком случае выделение будет успешным. Могут быть указаны следующие значения:
  • touch — если любая точка выделяемого элемента попадает в область выделения (значение по умолчанию);
  • fit — если выделяемый элемент полностью попадает в область выделения.
  • delay — позволяет задать задержку в миллисекундах перед началом выделения. Используется для предотвращения нежелательного выделения при случайном щелчке на элементе. Значение по умолчанию — 0.
  • distance — расстояние в пикселях, после прохождения которого начинается выделение. Используется для предотвращения нежелательного выделения при случайном щелчке на элементе. Значение по умолчанию — 0.
  • autoRefresh — если указано значение false, то положение и размер каждого выделяемого элемента автоматически пересчитываться не будет. Значение по умолчанию — true.

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

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

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

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

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

  • refresh — позволяет обновить положение и размер каждого выделяемого элемента; применяется если опция autoRefresh имеет значение false.
  • disable — временно запрещает выделение.
  • enable — разрешает выделение, если ранее оно было запрещено с помощью метода disable.
  • destroy — удаляет всю функциональность и возвращает все элементы в первоначальное состояние.

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

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

или

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

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

  • start (selectablestart) — наступает в начале выделения.
  • selecting (selectableselecting) — возникает, когда элемент попадает в область выделения.
  • unselecting (selectableunselecting) — наступает, когда элемент покидает область выделения.
  • selected (selectableselected) — возникает в конце операции выделения для каждого элемента, попавшего в область выделения.
  • unselected (selectableunselected) — наступает при удалении элемента из набора выделенных элементов.
  • stop (selectablestop) — возникает в конце выделения.

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

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

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

  • selecting — ссылка на DOM-элемент, который попал в область выделения. Свойство доступно только при событии selecting.
  • selected — ссылка на DOM-элемент, который был выделен. Свойство доступно только при событии selected.
  • unselecting — ссылка на DOM-элемент, который покинул область выделения. Свойство доступно только при событии unselecting.
  • unselected — ссылка на DOM-элемент, который был удален из набора выделенных элементов. Свойство доступно только при событии unselected.

При выделении элементов к ним добавляется стилевой класс 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>

Самоучитель по jQuery
Самоучитель по jQuery Учебник по jQuery 3.5.1 и AJAX в формате PDF

Помощь сайту

Yandex-деньги: 410011140483022

ПАО Сбербанк:
Счет: 40817810855006152256
Реквизиты банка:
Наименование: СЕВЕРО-ЗАПАДНЫЙ БАНК ПАО СБЕРБАНК
Корреспондентский счет: 30101810500000000653
БИК: 044030653
КПП: 784243001
ОКПО: 09171401
ОКОНХ: 96130
Скриншот реквизитов

Поиск по сайту в Яндексе