JqueryUI - по выбору

jQueryUI предоставляет метод selectable () для выбора элемента DOM индивидуально или в группе. С помощью этого метода элементы можно выбирать, перетаскивая прямоугольник (иногда называемый лассо) с помощью мыши над элементами. Кроме того, элементы можно выбирать, щелкая или перетаскивая, удерживая клавишу Ctrl / Meta, что позволяет выбирать несколько (не смежных) элементов.

Синтаксис

В selectable() метод может использоваться в двух формах -

$ (selector, context) .selectable (options) Метод
$ (selector, context) .selectable ("action", params) Метод

$ (selector, context) .selectable (options) Метод

Метод 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" });

Sr.No.	Вариант и описание
1	добавить к Эта опция сообщает, к какому элементу следует добавить помощник выбора (лассо). По умолчанию его значениеbody. Option - appendTo Эта опция сообщает, к какому элементу следует добавить помощник выбора (лассо). По умолчанию его значениеbody. Syntax `$( ".selector" ).selectable({ appendTo: "#identifier" });`
2	autoRefresh Если для этого параметра установлено значение true , позиция и размер каждого выбираемого элемента вычисляются в начале операции выбора. По умолчанию его значениеtrue. Option - autoRefresh Если для этого параметра установлено значение true , позиция и размер каждого выбираемого элемента вычисляются в начале операции выбора. По умолчанию его значениеtrue. Если у вас много элементов, вы можете установить для него значение false и вызвать метод refresh () вручную. Syntax `$( ".selector" ).selectable({ autoRefresh: false });`
3	отменить Эта опция запрещает выбор, если вы начинаете выделение элементов. По умолчанию его значениеinput,textarea,button,select,option. Option - cancel Эта опция запрещает выбор, если вы начинаете выделение элементов. По умолчанию его значениеinput,textarea,button,select,option. Syntax `$( ".selector" ).selectable({ cancel: "a,.cancel" });`
4	задержка Эта опция используется для установки времени в миллисекундах и определяет, когда должно начаться выделение. Это можно использовать для предотвращения нежелательного выбора. По умолчанию его значение0. Option - delay Эта опция используется для установки времени в миллисекундах и определяет, когда должно начаться выделение. Это можно использовать для предотвращения нежелательного выбора. По умолчанию его значение0. Syntax `$( ".selector" ).selectable({ delay: 150 });`
5	отключен Если для этого параметра установлено значение true, механизм выбора отключается. Пользователи не могут выбирать элементы, пока механизм не будет восстановлен с помощью команды выбора («включить»). По умолчанию его значениеfalse. Option - disabled Если для этого параметра установлено значение true, механизм выбора отключается. Пользователи не могут выбирать элементы, пока механизм не будет восстановлен с помощью команды выбора («включить»). По умолчанию его значениеfalse. Syntax `$( ".selector" ).selectable({ disabled: true });`
6	расстояние Этот параметр представляет собой расстояние (в пикселях), на которое мышь должна переместиться, чтобы рассмотреть выполняемый выбор. Это полезно, например, для предотвращения интерпретации простых щелчков как группового выбора. По умолчанию его значение0. Option - distance Этот параметр представляет собой расстояние (в пикселях), на которое мышь должна переместиться, чтобы рассмотреть выполняемый выбор. Это полезно, например, для предотвращения интерпретации простых щелчков как группового выбора. По умолчанию его значение0. Syntax `$( ".selector" ).selectable({ distance: 30 });`
7	фильтр Эта опция является селектором, указывающим, какие элементы могут быть частью выбора. По умолчанию его значение. Option - filter* Эта опция является селектором, указывающим, какие элементы могут быть частью выбора. По умолчанию его значение. Syntax* `$( ".selector" ).selectable({ filter: "li" });`
8	толерантность Этот параметр указывает, какой режим использовать для проверки того, должен ли помощник выбора (лассо) выбирать элемент. По умолчанию его значениеtouch. Option - tolerance Этот параметр указывает, какой режим использовать для проверки того, должен ли помощник выбора (лассо) выбирать элемент. По умолчанию его значениеtouch. Это может быть типа - fit - Этот тип означает, что выделение перетаскиванием должно полностью охватывать элемент, чтобы он был выбран. touch - Этот тип означает, что прямоугольник перетаскивания должен только пересекать любую часть выбираемого элемента. Syntax `$( ".selector" ).selectable({ tolerance: "fit" });`

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

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

В следующем примере демонстрируется простой пример выбираемой функциональности без передачи параметров в 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, чтобы выбрать несколько продуктов.

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

В следующем примере демонстрируется использование двух вариантов. delay и distance в выбираемой функции 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>

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

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

В следующем примере демонстрируется использование двух вариантов. delay и distance в выбираемой функции 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>

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

$ (selector, context) .selectable ("action", 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" );

Sr.No.	Действие и описание
1	уничтожить Это действие полностью удаляет выбираемые функции элемента. Элементы возвращаются в свое состояние до инициализации. Action - destroy Это действие полностью удаляет выбираемые функции элемента. Элементы возвращаются в свое состояние до инициализации. Syntax `$( ".selector" ).selectable("destroy");`
2	отключить Это действие деактивирует выбираемые функции элемента. Этот метод не принимает никаких аргументов. Action - disable Это действие полностью удаляет выбираемые функции элемента. Элементы возвращаются в свое состояние до инициализации. Syntax `$( ".selector" ).selectable("disable");`
3	включить Это действие включает выбираемые функции элемента. Этот метод не принимает никаких аргументов. Action - enable Это действие включает выбираемые функции элемента. Этот метод не принимает никаких аргументов. Syntax `$( ".selector" ).selectable("enable");`
4	option (optionName) Это действие получает значение, связанное в настоящее время с указанным optionName . Action - option( optionName ) Это действие получает значение, связанное в настоящее время с указанным optionName . Syntax `var isDisabled = $( ".selector" ).selectable( "option", "disabled" );`
5	option () Это действие получает объект, содержащий пары ключ / значение, представляющие текущий хэш выбираемых опций. Action - option() Это действие получает объект, содержащий пары ключ / значение, представляющие текущий хэш выбираемых опций. Syntax `var options = $( ".selector" ).selectable( "option" );`
6	option (optionName, значение) Это действие устанавливает значение выбираемой опции, связанной с указанным optionName . Аргумент optionName - это имя устанавливаемой опции, а value - значение, которое должно быть установлено для опции. Action - option( optionName, value ) Это действие устанавливает значение выбираемой опции, связанной с указанным optionName . Аргумент optionName - это имя устанавливаемой опции, а value - значение, которое должно быть установлено для опции. Syntax `$( ".selector" ).selectable( "option", "disabled", true );`
7	вариант (варианты) Это действие устанавливает одну или несколько опций для выбора. Аргумент опции является отображением пар параметр-значение , чтобы установить. Action - option( options ) Это действие устанавливает одну или несколько опций для выбора. Аргумент опции является отображением пар параметр-значение , чтобы установить. Syntax `$( ".selector" ).selectable( "option", { disabled: true } );`
8	обновить Это действие вызывает обновление размера и положения выбираемых элементов. Используется в основном, когда опция autoRefresh отключена (установлено значение false ). Этот метод не принимает никаких аргументов. Action - refresh Это действие вызывает обновление размера и положения выбираемых элементов. Используется в основном, когда опция автообновления отключена. Этот метод не принимает никаких аргументов. Syntax `$( ".selector" ).selectable("refresh");`
9	виджет Это действие возвращает объект jQuery, содержащий выбираемый элемент. Этот метод не принимает никаких аргументов. Action - widget Это действие возвращает объект jQuery, содержащий выбираемый элемент. Этот метод не принимает никаких аргументов. Syntax `var widget = $( ".selector" ).selectable( "widget" );`

пример

Теперь давайте посмотрим на пример, использующий действия из приведенной выше таблицы. В следующем примере демонстрируется использование методов 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 ) {}
});

Sr.No.	Метод и описание события
1	создать (событие, пользовательский интерфейс) Это событие запускается при создании выбираемого элемента. Где событие имеет тип Event , а ui имеет тип Object . Event - create(event, ui) Это событие запускается при создании выбираемого элемента. Где событие имеет тип Event , а ui имеет тип Object . Syntax `$( ".selector" ).selectable({ create: function( event, ui ) {} });`
2	выбрано (событие, пользовательский интерфейс) Это событие запускается для каждого элемента, который становится выбранным. Где событие имеет тип Event , а ui имеет тип Object . Event - selected(event, ui) Это событие запускается для каждого элемента, который становится выбранным. Где событие имеет тип Event , а ui имеет тип Object . Возможные значения ui : selected - Определяет выбираемый элемент, который был выбран. Syntax `$( ".selector" ).selectable({ selected: function( event, ui ) {} });`
3	выбор (событие, пользовательский интерфейс) Это событие запускается для каждого выбираемого элемента, который собирается быть выбранным. Где событие имеет тип Event , а ui имеет тип Object . Event - selecting(event, ui) Это событие запускается для каждого выбираемого элемента, который собирается быть выбранным. Где событие имеет тип Event , а ui имеет тип Object . Возможные значения ui : selecting - Указывает ссылку на элемент, который будет выбран. Syntax `$( ".selector" ).selectable({ selecting: function( event, ui ) {} });`
4	начало (событие, пользовательский интерфейс) Это событие запускается в начале операции выбора. Где событие имеет тип Event , а ui имеет тип Object . Event - start(event, ui) Это событие запускается в начале операции выбора. Где событие имеет тип Event , а ui имеет тип Object . Syntax `$( ".selector" ).selectable({ start: function( event, ui ) {} });`
5	стоп (событие, пользовательский интерфейс) Это событие запускается в конце операции выбора. Где событие имеет тип Event , а ui имеет тип Object . Event - stop(event, ui) Это событие запускается в конце операции выбора. Где событие имеет тип Event , а ui имеет тип Object . Syntax `$( ".selector" ).selectable({ stop: function( event, ui ) {} });`
6	невыделено (событие, пользовательский интерфейс) Это событие запускается в конце операции выбора для каждого элемента, который становится невыделенным. Где событие имеет тип Event , а ui имеет тип Object . Event - unselected(event, ui) Это событие запускается в конце операции выбора для каждого элемента, который становится невыделенным. Где событие имеет тип Event , а ui имеет тип Object . Возможные значения ui : unselected - Элемент, содержащий ссылку на элемент, выбор которого был отменен. Syntax `$( ".selector" ).selectable({ unselected: function( event, ui ) {} });`
7	снятие выделения (событие, пользовательский интерфейс) Это событие запускается во время операции выбора для каждого выбранного элемента, который собирается стать невыделенным. Где событие имеет тип Event , а ui имеет тип Object . Event - unselecting(event, ui) Это событие запускается во время операции выбора для каждого выбранного элемента, который собирается стать невыделенным. Где событие имеет тип Event , а ui имеет тип Object . Возможные значения ui : unselecting - Элемент, содержащий ссылку на элемент, выбор которого будет отменен. Syntax `$( ".selector" ).selectable({ unselecting: function( event, ui ) {} });`

пример

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

<!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>

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