jQuery UI API - Виджет Selectable

Категория

Взаимодействия

Использование

Описание:Выбирает отдельные элементы или группу элементов с помощью мыши.

Добавлено в версии:1.0

Зависимости:

Примечания:Плагин Selectable jQuery UI позволяет выбирать элементы перетаскиванием мыши (иногда это называют лассо). Можно щёлкать или перетаскивать, удерживая клавишу ctrl/meta, чтобы выбрать несколько (несмежных) элементов.

Дополнительные примечания:Этот виджет требует определённого функционального CSS, иначе он не будет работать. Если вы создаёте собственную тему, используйте CSS-файл, специфичный для виджета, в качестве отправной точки.

Быстрая навигация

Параметры Методы Events

Параметры Type Описание Default
appendTo Селектор Определяет, к какому элементу следует добавить вспомогательный элемент выделения (лассо).

Примеры кода:

Инициализировать с указаннымиappendToопции для draggable:

$( ".selector" ).selectable({ appendTo: "#someElem" });
    

После инициализации получите или задайтеappendTooption:

// getter
var appendTo = $( ".selector" ).selectable( "option", "appendTo" );
 
// setter
$( ".selector" ).selectable( "option", "appendTo", "#someElem" );
    
 "body"
autoRefresh Boolean Эта опция определяет, следует ли обновлять (пересчитывать) положение и размер каждого выделяемого элемента в начале каждой операции выделения. Если у вас много элементов, возможно, вы захотите установить эту опцию в false и вручную вызватьrefresh()метод.

Примеры кода:

Инициализировать с указаннымиautoRefreshопции для draggable:

$( ".selector" ).selectable({ autoRefresh: false });
    

После инициализации получите или задайтеautoRefreshoption:

// getter
var autoRefresh = $( ".selector" ).selectable( "option", "autoRefresh" );
 
// setter
$( ".selector" ).selectable( "option", "autoRefresh", false );
    
 истина
отмена Селектор Предотвращает начало выделения на элементах, соответствующих селектору.

Примеры кода:

Инициализировать с указаннымиcancelопции для selectable:

$( ".selector" ).selectable({ cancel: "a,.cancel" });
    

После инициализации получите или задайтеcanceloption:

// getter
var cancel = $( ".selector" ).selectable( "option", "cancel" );
 
// setter
$( ".selector" ).selectable( "option", "cancel", "a,.cancel" );
    
 "input, textarea, button, select, option"
delay Number Время в миллисекундах после нажатия кнопки мыши до начала выделения. Эта опция может предотвратить ненужные выделения при щелчке по элементу.

Примеры кода:

Инициализировать с указаннымиdelayопции для selectable:

$( ".selector" ).selectable({ delay: 150 });
    

После инициализации получите или задайтеdelayoption:

// getter
var delay = $( ".selector" ).selectable( "option", "delay" );
 
// setter
$( ".selector" ).selectable( "option", "delay", 150 );
    
 0
disabled Boolean Если установлено значениеtrue, виджет selectable отключен.

Примеры кода:

Инициализировать с указаннымиdisabledопции для selectable:

$( ".selector" ).selectable({ disabled: true });
    

После инициализации получите или задайтеdisabledoption:

// getter
var disabled = $( ".selector" ).selectable( "option", "disabled" );
 
// setter
$( ".selector" ).selectable( "option", "disabled", true );
    
 false
distance Number Расстояние в пикселях, на которое мышь должна переместиться после нажатия кнопки мыши до начала выделения. Если эта опция указана, выделение начинается только тогда, когда мышь перетаскивается на расстояние, превышающее указанное. Эта опция может предотвратить ненужные выделения при щелчке по элементу.

Примеры кода:

Инициализировать с указаннымиdistanceопции для selectable:

$( ".selector" ).selectable({ distance: 30 });
    

После инициализации получите или задайтеdistanceoption:

// getter
var distance = $( ".selector" ).selectable( "option", "distance" );
 
// setter
$( ".selector" ).selectable( "option", "distance", 30 );
    
 0
filter Селектор Соответствующие дочерние элементы, которые становятся выбираемыми (могут быть выбраны).

Примеры кода:

Инициализировать с указаннымиfilterопции для selectable:

$( ".selector" ).selectable({ filter: "li" });
    

После инициализации получите или задайтеfilteroption:

// getter
var filter = $( ".selector" ).selectable( "option", "filter" );
 
// setter
$( ".selector" ).selectable( "option", "filter", "li" );
    
 "*"
tolerance String Задаёт режим, используемый для проверки, выбирает ли лассо элемент. Возможные значения:
  • "fit": Лассо полностью перекрывает элемент.
  • "touch": Лассо перекрывает элемент в любой пропорции.

Примеры кода:

Инициализировать с указаннымиtoleranceопции для selectable:

$( ".selector" ).selectable({ tolerance: "fit" });
    

После инициализации получите или задайтеtoleranceoption:

// getter
var tolerance = $( ".selector" ).selectable( "option", "tolerance" );
 
// setter
$( ".selector" ).selectable( "option", "tolerance", "fit" );
    
 "touch"

Методы Возвращает Описание
destroy() jQuery (только плагин) Полностью удаляет функциональность selectable. Это возвращает элемент в состояние до инициализации.
  • Этот метод не принимает аргументов.

Примеры кода:

Вызовите метод destroy:

$( ".selector" ).selectable( "destroy" );
    
disable() jQuery (только плагин) Отключает selectable.
  • Этот метод не принимает аргументов.

Примеры кода:

Вызовите метод disable:

$( ".selector" ).selectable( "disable" );
    
enable() jQuery (только плагин) Включает selectable.
  • Этот метод не принимает аргументов.

Примеры кода:

Вызовите метод enable:

$( ".selector" ).selectable( "enable" );
    
option( optionName ) Object Возвращает для текущего указанногоoptionNameсвязанное значение.
  • optionName
    Тип: String
    Описание: Имя опции, которую нужно получить.

Примеры кода:

Вызовите этот метод:

var isDisabled = $( ".selector" ).selectable( "option", "disabled" );
    
option() PlainObject Возвращает объект, содержащий пары ключ/значение, представляющие текущий хеш опций selectable.
  • Этот метод не принимает аргументов.

Примеры кода:

Вызовите этот метод:

var options = $( ".selector" ).selectable( "option" );
    
option( optionName, value ) jQuery (только плагин) Устанавливает для указанногоoptionNameзначение связанной опции selectable.
  • optionName
    Тип: String
    Описание: Имя опции, которую нужно установить.
  • value
    Тип: Object
    Описание: Значение, задаваемое для параметра.

Примеры кода:

Вызовите этот метод:

$( ".selector" ).selectable( "option", "disabled", true );
    
option( options ) jQuery (только плагин) Устанавливает одну или несколько опций для selectable.
  • options
    Тип: Object
    Описание: Пары «параметр — значение» для установки.

Примеры кода:

Вызовите этот метод:

$( ".selector" ).selectable( "option", { disabled: true } );
    
refresh() jQuery (только плагин) Обновляет позицию и размер каждого элемента selectable. КогдаautoRefreshопция установлена в false, этот метод можно использовать для ручного пересчёта позиции и размера каждого элемента selectable.
  • Этот метод не принимает аргументов.

Примеры кода:

Вызовите метод refresh:

$( ".selector" ).selectable( "refresh" );
    
widget() jQuery ВозвращаетjQueryобъект, содержащий элемент selectable.
  • Этот метод не принимает аргументов.

Примеры кода:

Вызовите метод widget:

var widget = $( ".selector" ).selectable( "widget" );
    

Events Type Описание
create( event, ui ) selectablecreate Срабатывает, когда selectable создан.
  • event
    Тип: Event
  • ui
    Тип: Object

Примечание:uiОбъект пуст и включён для согласованности с другими событиями.

Примеры кода:

Инициализировать selectable с указанной функцией обратного вызова create:

$( ".selector" ).selectable({
  create: function( event, ui ) {}
});
    

Привяжите обработчик события к событию selectablecreate:

$( ".selector" ).on( "selectablecreate", function( event, ui ) {} );
    
selected( event, ui ) selectableselected Срабатывает в конце операции выделения, когда каждый элемент был добавлен к выделению.
  • event
    Тип: Event
  • ui
    Тип: Object
    • selected
      Тип: Element
      Описание: Выбираемый элемент, который был выбран.

Примеры кода:

Инициализируйте selectable с указанной функцией обратного вызова selected:

$( ".selector" ).selectable({
  selected: function( event, ui ) {}
});
    

Привяжите обработчик события к событию selectableselected:

$( ".selector" ).on( "selectableselected", function( event, ui ) {} );
    
selecting( event, ui ) selectableselecting Срабатывает во время операции выделения, когда каждый элемент добавляется к выделению.
  • event
    Тип: Event
  • ui
    Тип: Object
    • selecting
      Тип: Element
      Описание: Текущий выбираемый элемент, который выделяется.

Примеры кода:

Инициализируйте selectable с указанной функцией обратного вызова selecting:

$( ".selector" ).selectable({
  selecting: function( event, ui ) {}
});
    

Привяжите обработчик события к событию selectableselecting:

$( ".selector" ).on( "selectableselecting", function( event, ui ) {} );
    
start( event, ui ) selectablestart Срабатывает в начале операции выделения.
  • event
    Тип: Event
  • ui
    Тип: Object

Примечание:uiОбъект пуст и включён для согласованности с другими событиями.

Примеры кода:

Инициализируйте selectable с указанной функцией обратного вызова start:

$( ".selector" ).selectable({
  start: function( event, ui ) {}
});
    

Привяжите обработчик события к событию selectablestart:

$( ".selector" ).on( "selectablestart", function( event, ui ) {} );
    
stop( event, ui ) selectablestop Срабатывает в конце операции выделения.
  • event
    Тип: Event
  • ui
    Тип: Object

Примечание:uiОбъект пуст; он включён здесь для согласованности с другими событиями.

Примеры кода:

Инициализируйте selectable с указанной функцией обратного вызова stop:

$( ".selector" ).selectable({
  stop: function( event, ui ) {}
});
    

Привяжите обработчик события к событию selectablestop:

$( ".selector" ).on( "selectablestop", function( event, ui ) {} );
    
unselected( event, ui ) selectableunselected Срабатывает в конце операции выделения, когда каждый элемент удаляется из выделения.
  • event
    Тип: Event
  • ui
    Тип: Object
    • unselected
      Тип: Element
      Описание: Выделяемый элемент, который больше не выделен.

Примеры кода:

Инициализировать виджет selectable с указанной функцией обратного вызова unselected:

$( ".selector" ).selectable({
  unselected: function( event, ui ) {}
});
    

Привязать обработчик события к событию selectableunselected:

$( ".selector" ).on( "selectableunselected", function( event, ui ) {} );
    
unselecting( event, ui ) selectableunselecting Срабатывает во время операции выделения, когда каждый элемент удаляется из выделения.
  • event
    Тип: Event
  • ui
    Тип: Object
    • unselecting
      Тип: Element
      Описание: Текущий выделяемый элемент, с которого снимается выделение.

Примеры кода:

Инициализировать виджет selectable с указанной функцией обратного вызова unselecting:

$( ".selector" ).selectable({
  unselecting: function( event, ui ) {}
});
    

Привязать обработчик события к событию selectableunselecting:

$( ".selector" ).on( "selectableunselecting", function( event, ui ) {} );
    

Примеры

Простой виджет Selectable из jQuery UI.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>可选择小部件（Selectable Widget）演示</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <style>
  #selectable .ui-selecting {
    background: #ccc;
  }
  #selectable .ui-selected {
    background: #999;
  }
  </style>
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
</head>
<body>
 
<ul id="selectable">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
  <li>Item 5</li>
</ul>
 
<script>
$( "#selectable" ).selectable();
</script>
 
</body>
</html>

Другие расширения