Как создать свой сайт → Уроки jQuery → Урок 14. Плагин Selectable - выбираем элементы

jQuery - Урок 14. Плагин Selectable - выбираем элементы

Плагин Selectable позволяет выбирать (выделять) элементы, щелкая по ним мышкой (для множественного выбора - с нажатием и удержанием клавиши Ctrl или передвижением указателя мыши с удержанием в нажатом состоянии ее левой клавиши). Предположим, мы хотим реализовать вот такой пример:
Проверьте свои знания, выделите в списке фрукты.
  • абрикос
  • помидор
  • яблоко
  • груша
  • репа
  • виноград
  • редис
Сделать это крайне просто. Html-код нашей страницы:
<html> <head> <title>jQuery плагин selectable</title> <link rel="stylesheet" type="text/css" href="style.css"> <script type="text/javascript" src="js/jquery-1.3.2.min.js"></script> <script type="text/javascript" src="js/jquery-ui-1.7.2.custom.min.js"></script> <script type="text/javascript" src="script.js"></script> </head> <body> <div id="les14_ex1"> Проверьте свои знания, выделите в списке фрукты. <ul id="les14_selectable"> <li class="fruit">абрикос</li> <li class="vegetables">помидор</li> <li class="fruit">яблоко</li> <li class="fruit">груша</li> <li class="vegetables">репа</li> <li class="fruit">виноград</li> <li class="vegetables">редис</li> </ul> </div> <div id="les14_ex2"></div> </body> </html>
На странице script.js укажем, что элементы списка можно выбирать:
$(document).ready(init); function init(){ $(function(){ $("#les14_selectable").selectable() }); };
Украсим на странице style.css:
#les14_ex1, #les14_ex2{ float:left; } #les14_ex2{ margin:20px; padding:10px; color: #6600ff; } #les14_selectable { list-style-type: none; width: 200px; } #les14_selectable li { margin: 3px; padding: 3px; font-size: 12px; height: 18px; background:#cc99ff; border:1px solid #6600ff; } #les14_selectable .ui-selecting { background: #9933ff; } #les14_selectable .ui-selected { background: #9933ff; color: white; }
Обратите внимание, классы ui-selecting и ui-selected задают стили для выбранных элементов.

Наш список готов, пункты выбираются, но текст справа не появляется. Это потому, что мы не определили функцию для события selected, которое наступает по окончании выбора для каждого выбранного элемента. Давайте это исправим на странице script.js:
$(document).ready(init); function init(){ $(function(){ $("#les14_selectable").selectable({ selected: function(event, ui) { var a=ui.selected; if ($(a).hasClass("fruit")){ $("#les14_ex2").text("Да, " + ui.selected.innerHTML + " это фрукт! "); } else { $("#les14_ex2").text("Нет, " + ui.selected.innerHTML + " это не фрукт! "); } } }) }); };
Готово! Плагин Selectable реагирует и на другие события:
  • start - событие наступает с началом процесса выбора элемента.


  • selecting - событие наступает во время выбора элемента.


  • stop - событие наступает по окончании процесса выбора элемента.


  • unselected - событие наступает по окончании выбора элемента, для элементов не попавших в выбор.


  • unselecting - событие наступает во время процесса выбора, когда элемент, присутствующий в выборе, удаляется из него.


При использовании этих параметров мы можем определить функцию, которая принимает два аргумента – event (объект события) и ui (специальный объект, содержащий информацию о выделенном элементе).

Как и у остальных плагинов UI, у плагина Selectable есть ряд параметров. Давайте их рассмотрим:
  • autoRefresh - определяет пересчет положения и размеров области выделения при попадании туда очередного элемента (по умолчанию установлено значение true). Значение false отключает пересчет.

    Пример:
    $(function(){ $("#les14_ex3").selectable({ autoRefresh: false }); });


  • cancel - здесь можно указать селекторы jquery. Элементы, начинающиеся с этих селекторов выбираться не будут.

    Пример:
    $(function(){ $("#les14_ex3").selectable({ cancel: '.vegetables' }); });
    • абрикос
    • помидор
    • яблоко
    • груша
    • репа
    • виноград
    • редис
    Теперь можно выделить только фрукты.


  • delay - определяет время в миллисекундах, после которого элемент будет выделен.

    Пример:
    $(function(){ $("#les14_ex3").selectable({ delay: 30 }); });


  • distance - определяет расстояние в пикселах, которое должен пройти курсор мыши, прежде, чем элемент будет выбран.

    Пример:
    $(function(){ $("#les14_ex3").selectable({ distance: 30 }); });


  • filter - дает возможность указать селекторы элементов-потомков, которые будут сделаны выбранными.

    Пример:
    <ul id="les14_ex4"> <li>Первый элемент<p>Пункт 1.1</p><p>Пункт 1.2</p></li> <li>Второй элемент<p>Пункт 2.1</p><p>Пункт 2.2</p></li> <li>Третий элемент<p>Пункт 3.1</p><p>Пункт 3.2</p></li> <li>Четвертый элемент<p>Пункт 4.1</p><p>Пункт 4.2</p></li> </ul> ... $(function(){ $("#les14_ex4").selectable({ filter: 'p' }) });
    • Первый элемент

      Пункт 1.1

      Пункт 1.2

    • Второй элемент

      Пункт 2.1

      Пункт 2.2

    • Третий элемент

      Пункт 3.1

      Пункт 3.2

    • Четвертый элемент

      Пункт 4.1

      Пункт 4.2

    Теперь выделяются не элементы списка, а абзацы, являющиеся потомками элемента.


  • tolerance - определяет способ выделения нескольких элементов. Возможны два значения:
    touch: допускает выбор нескольких элементов путём перетаскивания мыши (по умолчанию),
    fit: выбор нескольких элементов путём перетаскивания мыши запрещен (только с нажатой клавишей Ctrl).

    Пример:
    $(function(){ $("#les14_ex4").selectable({ tolerance: 'fit' }) });


Как и у остальных плагинов UI, у плагина Selectable есть несколько методов, с помощью которых можно управлять им после инициализации: destroy, disable, enable, option и refresh. Первые четыре нам уже известны по предыдущим урокам.

Метод refresh используется, если для параметра autoRefresh установлено значение false. С помощью этого метода можно пересчитать положение и размеры области выделения.

На этом подошли к концу наши уроки по jQuery. Целью этих уроков было ввести вас в мир jQuery и показать основные возможности. Мы научились обращаться и манипулировать различными элементами объектной модели документа, научились осуществлять визуальные эффекты и узнали, как работать с плагинами. Возможности библиотеки на этом не исчерпываются, даже различных плагинов и виджетов, предназначенных для создания элементов пользовательских интерфейсов, еще очень много, но освоить их вы можете уже самостоятельно, по мере необходимости. Удачи!



Предыдущий урок Вернуться в раздел 
Теперь нажмите кнопку, что бы не забыть адрес и вернуться к нам снова.