JqueryUI: seleccionable

jQueryUI proporciona un método seleccionable () para seleccionar el elemento DOM individualmente o en un grupo. Con este método, los elementos se pueden seleccionar arrastrando un cuadro (a veces llamado lazo) con el mouse sobre los elementos. Además, los elementos se pueden seleccionar haciendo clic o arrastrando mientras se mantiene presionada la tecla Ctrl / Meta, lo que permite selecciones múltiples (no contiguas).

Sintaxis

los selectable() El método se puede utilizar de dos formas:

$ (selector, contexto) .selectable (opciones) Método

El método seleccionable (opciones) declara que un elemento HTML contiene elementos seleccionables. El parámetro de opciones es un objeto que especifica el comportamiento de los elementos involucrados en la selección.

Sintaxis

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

Puede proporcionar una o más opciones a la vez utilizando el objeto Javascript. Si hay más de una opción para proporcionar, las separará usando una coma de la siguiente manera:

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

La siguiente tabla enumera las diferentes opciones que se pueden utilizar con este método:

No Señor. Opción y descripción
1 appendTo

Esta opción indica a qué elemento se debe agregar el ayudante de selección (el lazo). Por defecto su valor esbody.

Option - appendTo

Esta opción indica a qué elemento se debe agregar el ayudante de selección (el lazo). Por defecto su valor esbody.

Syntax

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

Si esta opción se establece en verdadera , la posición y el tamaño de cada elemento seleccionable se calcula al comienzo de una operación de selección. Por defecto su valor estrue.

Option - autoRefresh

Si esta opción se establece en verdadera , la posición y el tamaño de cada elemento seleccionable se calcula al comienzo de una operación de selección. Por defecto su valor estrue. Si tiene muchos elementos, es posible que desee establecer esto en falso y llamar al método refresh () manualmente.

Syntax

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

Esta opción prohíbe seleccionar si comienza la selección de elementos. Por defecto su valor esinput,textarea,button,select,option.

Option - cancel

Esta opción prohíbe seleccionar si comienza la selección de elementos. Por defecto su valor esinput,textarea,button,select,option.

Syntax

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

Esta opción se usa para establecer el tiempo en milisegundos y define cuándo debe comenzar la selección. Esto se puede utilizar para evitar selecciones no deseadas. Por defecto su valor es0.

Option - delay

Esta opción se usa para establecer el tiempo en milisegundos y define cuándo debe comenzar la selección. Esto se puede utilizar para evitar selecciones no deseadas. Por defecto su valor es0.

Syntax

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

Esta opción cuando se establece en verdadero, deshabilita el mecanismo de selección. Los usuarios no pueden seleccionar los elementos hasta que se restaure el mecanismo mediante la instrucción seleccionable ("habilitar"). Por defecto su valor esfalse.

Option - disabled

Esta opción cuando se establece en verdadero, deshabilita el mecanismo de selección. Los usuarios no pueden seleccionar los elementos hasta que se restaure el mecanismo mediante la instrucción seleccionable ("habilitar"). Por defecto su valor esfalse.

Syntax

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

Esta opción es la distancia (en píxeles) que el mouse debe moverse para considerar la selección en progreso. Esto es útil, por ejemplo, para evitar que los clics simples se interpreten como una selección de grupo. Por defecto su valor es0.

Option - distance

Esta opción es la distancia (en píxeles) que el mouse debe moverse para considerar la selección en progreso. Esto es útil, por ejemplo, para evitar que los clics simples se interpreten como una selección de grupo. Por defecto su valor es0.

Syntax

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

Esta opción es un selector que indica qué elementos pueden formar parte de la selección. Por defecto su valor es*.

Option - filter

Esta opción es un selector que indica qué elementos pueden formar parte de la selección. Por defecto su valor es*.

Syntax

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

Esta opción especifica qué modo usar para probar si el asistente de selección (el lazo) debe seleccionar un elemento. Por defecto su valor estouch.

Option - tolerance

Esta opción especifica qué modo usar para probar si el asistente de selección (el lazo) debe seleccionar un elemento. Por defecto su valor estouch.

Esto puede ser de tipo:

  • fit - Este tipo indica que una selección de arrastre debe abarcar completamente un elemento para que sea seleccionado.

  • touch - Este tipo indica que el rectángulo de arrastre solo necesita intersecar cualquier parte del elemento seleccionable.

Syntax

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

La siguiente sección le mostrará algunos ejemplos prácticos de funcionalidad seleccionable.

Funcionalidad predeterminada

El siguiente ejemplo muestra un ejemplo simple de funcionalidad seleccionable, sin pasar parámetros al selectable() método.

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

Guardemos el código anterior en un archivo HTML. selectableexample.htmy ábralo en un navegador estándar que admita javascript, debería ver el siguiente resultado. Ahora puedes jugar con el resultado:

Intente hacer clic en los productos, use la tecla CTRLS para seleccionar varios productos.

Uso de retraso y distancia

El siguiente ejemplo demuestra el uso de dos opciones delay y distance en la función seleccionable de 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>

Guardemos el código anterior en un archivo HTML. selectableexample.htmy ábralo en un navegador estándar que admita javascript, debería ver el siguiente resultado. Ahora puedes jugar con el resultado:

Intente hacer clic en los productos, use la tecla CTRL para seleccionar varios productos. Notará que la selección del Producto 1, Producto 2 y Producto 3 comienza después de un retraso de 1000 ms. La selección del Producto 4, Producto 5, Producto 6 y Producto 7 no se puede realizar individualmente. La selección comienza solo después de que el mouse se mueve una distancia de 100 px.

Uso de filtro

El siguiente ejemplo demuestra el uso de dos opciones delay y distance en la función seleccionable de 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>

Guardemos el código anterior en un archivo HTML. selectableexample.htmy ábralo en un navegador estándar que admita javascript, debería ver el siguiente resultado. Ahora puedes jugar con el resultado:

Intente hacer clic en los productos. Notará que solo se puede seleccionar el primer producto.

$ (selector, contexto) .selectable ("action", params) Método

El método seleccionable ("acción", params) puede realizar una acción en elementos seleccionables, como evitar la funcionalidad seleccionable. La acción se especifica como una cadena en el primer argumento (por ejemplo, "deshabilitar" para detener la selección). Consulte las acciones que se pueden aprobar en la siguiente tabla.

Sintaxis

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

La siguiente tabla enumera las diferentes acciones que se pueden utilizar con este método:

No Señor. Acción Descripción
1 destruir

Esta acción elimina por completo la funcionalidad seleccionable de un elemento. Los elementos vuelven a su estado previo al inicio.

Action - destroy

Esta acción elimina por completo la funcionalidad seleccionable de un elemento. Los elementos vuelven a su estado previo al inicio.

Syntax

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

Esta acción desactiva la funcionalidad seleccionable de un elemento. Este método no acepta argumentos.

Action - disable

Esta acción elimina por completo la funcionalidad seleccionable de un elemento. Los elementos vuelven a su estado previo al inicio.

Syntax

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

Esta acción habilita la funcionalidad seleccionable de un elemento. Este método no acepta argumentos.

Action - enable

Esta acción habilita la funcionalidad seleccionable de un elemento. Este método no acepta argumentos.

Syntax

$( ".selector" ).selectable("enable");
4 opción (optionName)

Esta acción obtiene el valor asociado actualmente con el optionName especificado .

Action - option( optionName )

Esta acción obtiene el valor asociado actualmente con el optionName especificado .

Syntax

var isDisabled = $( ".selector" ).selectable( "option", "disabled" );
5 opción()

Esta acción obtiene un objeto que contiene pares clave / valor que representan el hash de opciones seleccionables actuales.

Action - option()

Esta acción obtiene un objeto que contiene pares clave / valor que representan el hash de opciones seleccionables actuales.

Syntax

var options = $( ".selector" ).selectable( "option" );
6 opción (optionName, valor)

Esta acción establece el valor de la opción seleccionable asociada con el optionName especificado . El argumento optionName es el nombre de la opción que se va a establecer y value es el valor que se va a establecer para la opción.

Action - option( optionName, value )

Esta acción establece el valor de la opción seleccionable asociada con el optionName especificado . El argumento optionName es el nombre de la opción que se va a establecer y value es el valor que se va a establecer para la opción.

Syntax

$( ".selector" ).selectable( "option", "disabled", true );
7 opción (opciones)

Esta acción establece una o más opciones para lo seleccionable. Las opciones del argumento son un mapa de pares de opciones y valores que se establecerán.

Action - option( options )

Esta acción establece una o más opciones para lo seleccionable. Las opciones del argumento son un mapa de pares de opciones y valores que se establecerán.

Syntax

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

Esta acción hace que se actualicen el tamaño y la posición de los elementos seleccionables. Se usa principalmente cuando la opción autoRefresh está deshabilitada (establecida en falso ). Este método no acepta argumentos.

Action - refresh

Esta acción hace que se actualicen el tamaño y la posición de los elementos seleccionables. Se usa principalmente cuando la opción autoRefresh está desactivada. Este método no acepta argumentos.

Syntax

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

Esta acción devuelve un objeto jQuery que contiene el elemento seleccionable. Este método no acepta argumentos.

Action - widget

Esta acción devuelve un objeto jQuery que contiene el elemento seleccionable. Este método no acepta argumentos.

Syntax

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

Ejemplo

Ahora veamos un ejemplo usando las acciones de la tabla anterior. El siguiente ejemplo demuestra el uso de los métodos disable () y 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>

Guardemos el código anterior en un archivo HTML. selectableexample.htm y ábralo en un navegador estándar que admita javascript, debería ver el siguiente resultado:

Intente hacer clic en los productos, use la tecla CTRL para seleccionar varios productos. Notará que el Producto 1, el Producto 2 y el Producto 3 están desactivados. La selección del Producto 4, Producto 5, Producto 6 y Producto 7 ocurre después de que el mouse se mueve una distancia de 1 px.

Gestión de eventos en elementos seleccionables

Además del método seleccionable (opciones) que vimos en las secciones anteriores, JqueryUI proporciona métodos de eventos que se activan para un evento en particular. Estos métodos de eventos se enumeran a continuación:

No Señor. Método y descripción del evento
1 crear (evento, ui)

Este evento se activa cuando se crea el elemento seleccionable. Donde evento es de tipo Evento y ui es de tipo Objeto .

Event - create(event, ui)

Este evento se activa cuando se crea el elemento seleccionable. Donde evento es de tipo Evento y ui es de tipo Objeto .

Syntax

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

Este evento se activa para cada elemento que se selecciona. Donde evento es de tipo Evento y ui es de tipo Objeto .

Event - selected(event, ui)

Este evento se activa para cada elemento que se selecciona. Donde evento es de tipo Evento y ui es de tipo Objeto . Los posibles valores de ui son:

  • selected - Esto especifica el elemento seleccionable que se ha seleccionado.

Syntax

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

Este evento se activa para cada elemento seleccionable que está a punto de ser seleccionado. Donde evento es de tipo Evento y ui es de tipo Objeto .

Event - selecting(event, ui)

Este evento se activa para cada elemento seleccionable que está a punto de ser seleccionado. Donde evento es de tipo Evento y ui es de tipo Objeto . Los posibles valores de ui son:

  • selecting - Esto especifica una referencia al elemento que está a punto de ser seleccionado.

Syntax

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

Este evento se desencadena al comienzo de la operación de selección. Donde evento es de tipo Evento y ui es de tipo Objeto .

Event - start(event, ui)

Este evento se desencadena al comienzo de la operación de selección. Donde evento es de tipo Evento y ui es de tipo Objeto .

Syntax

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

Este evento se desencadena al final de la operación de selección. Donde evento es de tipo Evento y ui es de tipo Objeto .

Event - stop(event, ui)

Este evento se desencadena al final de la operación de selección. Donde evento es de tipo Evento y ui es de tipo Objeto .

Syntax

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

Este evento se desencadena al final de la operación de selección para cada elemento que queda sin seleccionar. Donde evento es de tipo Evento y ui es de tipo Objeto .

Event - unselected(event, ui)

Este evento se desencadena al final de la operación de selección para cada elemento que queda sin seleccionar. Donde evento es de tipo Evento y ui es de tipo Objeto . Los posibles valores de ui son:

  • unselected - Un elemento que contiene una referencia al elemento que se ha dejado de seleccionar.

Syntax

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

Este evento se activa durante la operación de selección para cada elemento seleccionado que está a punto de quedar sin seleccionar. Donde evento es de tipo Evento y ui es de tipo Objeto .

Event - unselecting(event, ui)

Este evento se activa durante la operación de selección para cada elemento seleccionado que está a punto de quedar sin seleccionar. Donde evento es de tipo Evento y ui es de tipo Objeto . Los posibles valores de ui son:

  • unselecting - Un elemento que contiene una referencia al elemento que está a punto de dejar de estar seleccionado.

Syntax

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

Ejemplo

El siguiente ejemplo demuestra el uso del método de evento durante la funcionalidad seleccionable. Este ejemplo demuestra el uso del evento seleccionado .

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

Guardemos el código anterior en un archivo HTML. selectableexample.htm y ábralo en un navegador estándar que admita javascript, debería ver el siguiente resultado:

Intente hacer clic en los productos, use la tecla CTRL para seleccionar varios productos. Notará que el número de producto seleccionado está impreso en la parte inferior.