JqueryUI — по выбору

Метод $ (селектор, контекст) .selectable (опции)

Метод selectable (options) объявляет, что HTML-элемент содержит выбираемые элементы. Параметр options — это объект, который определяет поведение элементов, участвующих при выборе.

Синтаксис

$(selector, context).selectable (options);

Вы можете предоставить один или несколько параметров одновременно, используя объект Javascript. Если необходимо указать несколько параметров, разделите их запятой следующим образом:

$(selector, context).selectable({option1: value1, option2: value2..... });

В следующей таблице перечислены различные параметры, которые можно использовать с этим методом —

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

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

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

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

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

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

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

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

Эта опция указывает, к какому элементу должен быть добавлен помощник выделения (лассо). По умолчанию его значением является body .

Вариант — appendTo

Эта опция указывает, к какому элементу должен быть добавлен помощник выделения (лассо). По умолчанию его значением является body .

Синтаксис

Если для этого параметра установлено значение true , позиция и размер каждого выбираемого элемента вычисляются в начале операции выбора. По умолчанию его значение равно true .

Опция — автообновление

Если для этого параметра установлено значение true , позиция и размер каждого выбираемого элемента вычисляются в начале операции выбора. По умолчанию его значение равно true . Если у вас много элементов, вы можете установить значение false и вызвать метод refresh () вручную.

Синтаксис

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

Опция — отменить

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

Синтаксис

Эта опция используется для установки времени в миллисекундах и определяет, когда должен начинаться выбор. Это может быть использовано для предотвращения нежелательных выборов. По умолчанию его значение равно 0 .

Опция — задержка

Эта опция используется для установки времени в миллисекундах и определяет, когда должен начинаться выбор. Это может быть использовано для предотвращения нежелательных выборов. По умолчанию его значение равно 0 .

Синтаксис

Эта опция, если задано значение true, отключает механизм выбора. Пользователи не могут выбирать элементы до тех пор, пока механизм не будет восстановлен с использованием команды select («enable»). По умолчанию его значение равно false .

Опция — отключена

Эта опция, если задано значение true, отключает механизм выбора. Пользователи не могут выбирать элементы до тех пор, пока механизм не будет восстановлен с использованием команды select («enable»). По умолчанию его значение равно false .

Синтаксис

Эта опция — расстояние (в пикселях), которое мышь должна переместить, чтобы рассмотреть текущее выделение. Это полезно, например, для предотвращения интерпретации простых кликов как выбора группы. По умолчанию его значение равно 0 .

Вариант — расстояние

Эта опция — расстояние (в пикселях), которое мышь должна переместить, чтобы рассмотреть текущее выделение. Это полезно, например, для предотвращения интерпретации простых кликов как выбора группы. По умолчанию его значение равно 0 .

Синтаксис

Эта опция является селектором, указывающим, какие элементы могут быть частью выбора. По умолчанию его значение * .

Опция — фильтр

Эта опция является селектором, указывающим, какие элементы могут быть частью выбора. По умолчанию его значение * .

Синтаксис

Этот параметр указывает, какой режим использовать для проверки того, должен ли помощник выбора (лассо) выбирать элемент. По умолчанию его значение является сенсорным .

Вариант — толерантность

Этот параметр указывает, какой режим использовать для проверки того, должен ли помощник выбора (лассо) выбирать элемент. По умолчанию его значение является сенсорным .

Это может быть типа —

fit — этот тип указывает, что выбор перетаскивания должен полностью охватывать элемент для его выбора.

touch — этот тип указывает, что прямоугольник перетаскивания должен пересекать только любую часть выбранного элемента.

Синтаксис

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

Функциональность по умолчанию

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

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI selectable-1</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <style>
         #selectable-1 .ui-selecting { background: #707070 ; }
         #selectable-1 .ui-selected { background: #EEEEEE; color: #000000; }
         #selectable-1 { list-style-type: none; margin: 0; 
            padding: 0; width: 20%; }
         #selectable-1 li { margin: 3px; padding: 0.4em; 
            font-size: 16px; height: 18px; }
         .ui-widget-content {
            background: #cedc98;
            border: 1px solid #DDDDDD;
            color: #333333;
         }
      </style>
      <script>
         $(function() {
            $( "#selectable-1" ).selectable();
         });
      </script>
   </head>
   
   <body>
      <ol id = "selectable-1">
         <li class = "ui-widget-content">Product 1</li>
         <li class = "ui-widget-content">Product 2</li>
         <li class = "ui-widget-content">Product 3</li>
         <li class = "ui-widget-content">Product 4</li>
         <li class = "ui-widget-content">Product 5</li>
         <li class = "ui-widget-content">Product 6</li>
         <li class = "ui-widget-content">Product 7</li>
      </ol> 
   </body>
</html>

Давайте сохраним приведенный выше код в HTML-файле selectableexample.htm и откроем его в стандартном браузере, который поддерживает javascript, вы должны увидеть следующий вывод. Теперь вы можете играть с результатом —

Попробуйте нажать на продукты, используйте клавишу CTRLS, чтобы выбрать несколько продуктов.

Использование задержки и расстояния

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

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Selectable</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

      <style>
         #selectable-2 .ui-selecting,#selectable-3 .ui-selecting { 
            background: #707070 ; }
         #selectable-2 .ui-selected,#selectable-3 .ui-selected { 
            background: #EEEEEE; color: #000000; }
         #selectable-2,#selectable-3 { list-style-type: none; margin: 0; 
            padding: 0; width: 20%; }
         #selectable-2 li,#selectable-3 li { margin: 3px; padding: 0.4em; 
            font-size: 16px; height: 18px; }
         .ui-widget-content {
            background: #cedc98;
            border: 1px solid #DDDDDD;
            color: #333333;
         }
      </style>
      
      <script>
         $(function() {
            $( "#selectable-2" ).selectable({
               delay : 1000
            });
            $( "#selectable-3" ).selectable({
               distance : 100
            });
         });
      </script>
   </head>
   
   <body>
      <h3>Starts after delay of 1000ms</h3>
      <ol id = "selectable-2">
         <li class = "ui-widget-content">Product 1</li>
         <li class = "ui-widget-content">Product 2</li>
         <li class = "ui-widget-content">Product 3</li>
      </ol>
      <h3>Starts after mouse moves distance of 100px</h3>
      <ol id = "selectable-3">
         <li class = "ui-widget-content">Product 4</li>
         <li class = "ui-widget-content">Product 5</li>
         <li class = "ui-widget-content">Product 6</li>
         <li class = "ui-widget-content">Product 7</li>
      </ol>
   </body>
</html>

Давайте сохраним приведенный выше код в HTML-файле selectableexample.htm и откроем его в стандартном браузере, который поддерживает javascript, вы должны увидеть следующий вывод. Теперь вы можете играть с результатом —

Попробуйте нажать на продукты, используйте клавишу CTRL, чтобы выбрать несколько продуктов. Вы заметите, что выбор Продукта 1, Продукта 2 и Продукта 3 начинается с задержкой в ​​1000 мс. Выбор Продукта 4, Продукта 5, Продукта 6 и Продукта 7 не может быть сделан индивидуально. Выбор начинается только после того, как мышь переместится на расстояние 100 пикселей.

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

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

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI selectable-4</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

      <style>
         #selectable-4 .ui-selecting { background: #707070 ; }
         #selectable-4 .ui-selected { background: #EEEEEE; color: #000000; }
         #selectable-4 { list-style-type: none; margin: 0; 
            padding: 0; width: 20%; }
         #selectable-4 li { margin: 3px; padding: 0.4em; 
            font-size: 16px; height: 18px; }
         .ui-widget-content {
            background: #cedc98;
            border: 1px solid #DDDDDD;
            color: #333333;
         }
      </style>
     
      <script>
         $(function() {
            $( "#selectable-4" ).selectable({
               filter : "li:first-child"
            });
         });
      </script>
   </head>
   
   <body>
      <ol id = "selectable-4">
         <li class = "ui-widget-content">Product 1</li>
         <li class = "ui-widget-content">Product 2</li>
         <li class = "ui-widget-content">Product 3</li>
         <li class = "ui-widget-content">Product 4</li>
         <li class = "ui-widget-content">Product 5</li>
         <li class = "ui-widget-content">Product 6</li>
         <li class = "ui-widget-content">Product 7</li>
      </ol>
   </body>
</html>

Давайте сохраним приведенный выше код в HTML-файле selectableexample.htm и откроем его в стандартном браузере, который поддерживает javascript, вы должны увидеть следующий вывод. Теперь вы можете играть с результатом —

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

Метод $ (селектор, контекст) .selectable («действие», params)

Метод selectable («action», params) может выполнять действие над выбираемыми элементами, например, предотвращать выбираемую функциональность. Действие указывается в виде строки в первом аргументе (например, «отключить», чтобы остановить выбор). Проверьте действия, которые можно передать, в следующей таблице.

Синтаксис

$(selector, context).selectable ("action", params);;

В следующей таблице перечислены различные действия, которые можно использовать с этим методом —

$( ".selector" ).selectable("destroy");

$( ".selector" ).selectable("disable");

$( ".selector" ).selectable("enable");

var isDisabled = $( ".selector" ).selectable( "option", "disabled" );

var options = $( ".selector" ).selectable( "option" );

$( ".selector" ).selectable( "option", "disabled", true );

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

$( ".selector" ).selectable("refresh");

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

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

Действие — уничтожить

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

Синтаксис

Это действие деактивирует выбираемую функциональность элемента. Этот метод не принимает никаких аргументов.

Действие — отключить

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

Синтаксис

Это действие включает выбираемую функциональность элемента. Этот метод не принимает никаких аргументов.

Действие — включить

Это действие включает выбираемую функциональность элемента. Этот метод не принимает никаких аргументов.

Синтаксис

Это действие возвращает значение, связанное с указанным параметром optionName .

Действие — опция (optionName)

Это действие возвращает значение, связанное с указанным параметром optionName .

Синтаксис

Это действие получает объект, содержащий пары ключ / значение, представляющие текущий хэш выбираемых опций.

Действие — опция ()

Это действие получает объект, содержащий пары ключ / значение, представляющие текущий хэш выбираемых опций.

Синтаксис

Это действие устанавливает значение выбираемой опции, связанной с указанным optionName . Аргумент optionName — это имя опции, которую нужно установить, а значение — это значение, которое нужно установить для опции.

Действие — опция (optionName, value)

Это действие устанавливает значение выбираемой опции, связанной с указанным optionName . Аргумент optionName — это имя опции, которую нужно установить, а значение — это значение, которое нужно установить для опции.

Синтаксис

Это действие устанавливает один или несколько параметров для выбора. Аргумент options представляет собой карту пар опция-значение, которые должны быть установлены.

Действие — опция (варианты)

Это действие устанавливает один или несколько параметров для выбора. Аргумент options представляет собой карту пар опция-значение, которые должны быть установлены.

Синтаксис

Это действие вызывает обновление размера и положения выбираемых элементов. Используется в основном, когда опция autoRefresh отключена (установлено значение false ). Этот метод не принимает никаких аргументов.

Действие — обновить

Это действие вызывает обновление размера и положения выбираемых элементов. Используется в основном, когда опция autoRefresh отключена. Этот метод не принимает никаких аргументов.

Синтаксис

Это действие возвращает объект jQuery, содержащий выбираемый элемент. Этот метод не принимает никаких аргументов.

Действие — виджет

Это действие возвращает объект jQuery, содержащий выбираемый элемент. Этот метод не принимает никаких аргументов.

Синтаксис

пример

Теперь давайте посмотрим на пример, используя действия из таблицы выше. В следующем примере демонстрируется использование методов disable () и option (optionName, value) .

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Selectable</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <style>
         #selectable-5 .ui-selecting,#selectable-6 .ui-selecting { 
            background: #707070 ; }
         #selectable-5 .ui-selected,#selectable-6 .ui-selected { 
            background: #EEEEEE; color: #000000; }
         #selectable-5,#selectable-6 { 
            list-style-type: none; margin: 0; padding: 0; width: 20%; }
         #selectable-5 li,#selectable-6 li { 
            margin: 3px; padding: 0.4em; font-size: 16px; height: 18px; }
         .ui-widget-content {
            background: #cedc98;
            border: 1px solid #DDDDDD;
            color: #333333;
         }
      </style>
      
      <script>
         $(function() {
            $( "#selectable-5" ).selectable();
            $( "#selectable-5" ).selectable('disable');
            $( "#selectable-6" ).selectable();
            $( "#selectable-6" ).selectable( "option", "distance", 1 );	
         });
      </script>
   </head>
   
   <body>
      <h3>Disabled using disable() method</h3>
      <ol id = "selectable-5">
         <li class = "ui-widget-content">Product 1</li>
         <li class = "ui-widget-content">Product 2</li>
         <li class = "ui-widget-content">Product 3</li>
      </ol>
      <h3>Select using method option( optionName, value )</h3>
      <ol id = "selectable-6">
         <li class = "ui-widget-content">Product 4</li>
         <li class = "ui-widget-content">Product 5</li>
         <li class = "ui-widget-content">Product 6</li>
         <li class = "ui-widget-content">Product 7</li>
      </ol>
   </body>
</html>

Давайте сохраним приведенный выше код в HTML-файле selectableexample.htm и откроем его в стандартном браузере, который поддерживает javascript, вы должны увидеть следующий вывод:

Попробуйте нажать на продукты, используйте клавишу CTRL, чтобы выбрать несколько продуктов. Вы заметите, что продукт 1, продукт 2 и продукт 3 отключены. Выбор Продукта 4, Продукта 5, Продукта 6 и Продукта 7 происходит после того, как мышь отошла на 1 пиксель.

Управление событиями на выбираемых элементах

В дополнение к методу selectable (options), который мы видели в предыдущих разделах, JqueryUI предоставляет методы событий, которые запускаются для определенного события. Эти методы событий перечислены ниже —

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

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

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

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

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

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

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

Это событие срабатывает при создании выбираемого элемента. Где событие имеет тип события , а пользовательский интерфейс имеет тип объекта .

Событие — создать (событие, пользовательский интерфейс)

Это событие срабатывает при создании выбираемого элемента. Где событие имеет тип события , а пользовательский интерфейс имеет тип объекта .

Синтаксис

Это событие срабатывает для каждого выбранного элемента. Где событие имеет тип события , а пользовательский интерфейс имеет тип объекта .

Событие — выбрано (событие, пользовательский интерфейс)

Это событие срабатывает для каждого выбранного элемента. Где событие имеет тип события , а пользовательский интерфейс имеет тип объекта . Возможные значения пользовательского интерфейса —

selected — указывает выбранный элемент, который был выбран

Синтаксис

Это событие вызывается для каждого выбираемого элемента, который собирается быть выбранным. Где событие имеет тип события , а пользовательский интерфейс имеет тип объекта .

Событие — выбор (событие, пользовательский интерфейс)

Это событие вызывается для каждого выбираемого элемента, который собирается быть выбранным. Где событие имеет тип события , а пользовательский интерфейс имеет тип объекта . Возможные значения пользовательского интерфейса —

selection — указывает ссылку на элемент, который собирается стать выбранным.

Синтаксис

Это событие вызывается в начале операции выбора. Где событие имеет тип события , а пользовательский интерфейс имеет тип объекта .

Событие — начало (событие, пользовательский интерфейс)

Это событие вызывается в начале операции выбора. Где событие имеет тип события , а пользовательский интерфейс имеет тип объекта .

Синтаксис

Это событие вызывается в конце операции выбора. Где событие имеет тип события , а пользовательский интерфейс имеет тип объекта .

Событие — остановка (событие, интерфейс)

Это событие вызывается в конце операции выбора. Где событие имеет тип события , а пользовательский интерфейс имеет тип объекта .

Синтаксис

Это событие вызывается в конце операции выбора для каждого элемента, который становится невыбранным. Где событие имеет тип события , а пользовательский интерфейс имеет тип объекта .

Событие — не выбрано (событие, пользовательский интерфейс)

Это событие вызывается в конце операции выбора для каждого элемента, который становится невыбранным. Где событие имеет тип события , а пользовательский интерфейс имеет тип объекта . Возможные значения пользовательского интерфейса —

unselected — элемент, который содержит ссылку на элемент, который стал невыбранным.

Синтаксис

Это событие вызывается во время операции выбора для каждого выбранного элемента, который собирается стать невыбранным. Где событие имеет тип события , а пользовательский интерфейс имеет тип объекта .

Событие — отмена выбора (событие, пользовательский интерфейс)

Это событие вызывается во время операции выбора для каждого выбранного элемента, который собирается стать невыбранным. Где событие имеет тип события , а пользовательский интерфейс имеет тип объекта . Возможные значения пользовательского интерфейса —

отмена выбора — элемент, который содержит ссылку на элемент, который должен стать невыбранным.

Синтаксис

пример

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

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI selectable-7</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <style>
         #selectable-7 .ui-selecting { background: #707070 ; }
         #selectable-7 .ui-selected { background: #EEEEEE; color: #000000; }
         #selectable-7 { list-style-type: none; margin: 0; 
            padding: 0; width: 20%; }
         #selectable-7 li { margin: 3px; padding: 0.4em; 
            font-size: 16px; height: 18px; }
         .ui-widget-content {
            background: #cedc98;
            border: 1px solid #DDDDDD;
            color: #333333;
         }
         .resultarea {
            background: #cedc98;
            border-top: 1px solid #000000;
            border-bottom: 1px solid #000000;
            color: #333333;
            font-size:14px;
         }
      </style>
      
      <script>
         $(function() {
            $( "#selectable-7" ).selectable({
               selected: function() {
                  var result = $( "#result" ).empty();
                  $( ".ui-selected", this ).each(function() {
                     var index = $( "#selectable-7 li" ).index( this );
                     result.append( " #" + ( index + 1 ) );
                  });
               }
            });
         });
      </script>
   </head>
   
   <body>
      <h3>Events</h3>
      <ol id = "selectable-7">
         <li class = "ui-widget-content">Product 1</li>
         <li class = "ui-widget-content">Product 2</li>
         <li class = "ui-widget-content">Product 3</li>
         <li class = "ui-widget-content">Product 4</li>
         <li class = "ui-widget-content">Product 5</li>
         <li class = "ui-widget-content">Product 6</li>
         <li class = "ui-widget-content">Product 7</li>
      </ol>
      <span class = "resultarea">Selected Product</span>>
      <span id = result class = "resultarea"></span>
   </body>
</html>

Давайте сохраним приведенный выше код в HTML-файле selectableexample.htm и откроем его в стандартном браузере, который поддерживает javascript, вы должны увидеть следующий вывод:

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