Пример использования

$(document).ready(function() {

  $("#tabs").tabs();
//Код первой вкладки (стандартное использование)
  $("#sel1").selectable();
//Код второй вкладки (выбор с обратной связью)
  $("#sel2").selectable({selected:function(){
     var selgoods="";
     var goodsum=0;
     $(this).find(".ui-selected").find("#goods").each(function(){
        selgoods+=$(this).html()+"_";
     })
     $(this).find(".ui-selected").find("#cost").each(function(){
        goodsum+=parseInt($(this).html());
     })
     selgoods=selgoods.toLowerCase();
     selgoods=selgoods.replace(/_/g,", ");
     selgoods=selgoods.slice(0,-2);
     $("#selgoods").html(selgoods);
     $("#goodssum").html(goodsum);
  }});

});

Определение и использование

С помощью метода selectable Вы можете превратить список элементов в список выбора.

Всем элементам списка выбора автоматически назначается класс .ui-selecting во время выделения (т.е. когда элемент выделен, но еще не выбран) и .ui-selected после того, как они были выбраны.

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

С помощью опций и событий перечисленных в таблицах далее на данной странице Вы можете настраивать поведение списков выбора под конкретные нужды.

Синтаксис

$(селектор).selectable(опции_или_события)

селектор указывает список элементов, который будет превращен в список выбора.

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

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

Опции

События

Все обработчики событий принимают два аргумента - стандартный объект event браузера и специальный объект ui.

Синтаксис

$(селектор).selectable({событие:function(event,ui){Код обработчика}})
//или
$(селектор).bind("selectableсобытие",function(event,ui){Код обработчика})

Обратите внимание: например для того, чтобы привязать к списку выбора с id='test' обработчик события create, который выводит сообщение "привет" необходимо будет написать следующий код: $("#test").selectable({create:function(event,ui){alert("Привет")}}).