JqueryUI - selecionável

jQueryUI fornece o método selectable () para selecionar o elemento DOM individualmente ou em um grupo. Com este método, os elementos podem ser selecionados arrastando uma caixa (às vezes chamada de laço) com o mouse sobre os elementos. Além disso, os elementos podem ser selecionados clicando ou arrastando enquanto segura a tecla Ctrl / Meta, permitindo várias seleções (não contíguas).

Sintaxe

o selectable() método pode ser usado em duas formas -

Método $ (seletor, contexto) .selectable (opções)
$ (seletor, contexto) .selectable ("ação", parâmetros) Método

Método $ (seletor, contexto) .selectable (opções)

O método selecionável (opções) declara que um elemento HTML contém itens selecionáveis. O parâmetro options é um objeto que especifica o comportamento dos elementos envolvidos na seleção.

Sintaxe

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

Você pode fornecer uma ou mais opções por vez usando o objeto Javascript. Se houver mais de uma opção a ser fornecida, você irá separá-las usando uma vírgula da seguinte forma -

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

A tabela a seguir lista as diferentes opções que podem ser usadas com este método -


$( ".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. Não.	Opção e descrição
1	appendTo Esta opção informa a qual elemento o auxiliar de seleção (o laço) deve ser anexado. Por padrão, seu valor ébody. Option - appendTo Esta opção informa a qual elemento o auxiliar de seleção (o laço) deve ser anexado. Por padrão, seu valor ébody. Syntax `$( ".selector" ).selectable({ appendTo: "#identifier" });`
2	atualização automática Se esta opção for definida como verdadeira , a posição e o tamanho de cada item selecionável são calculados no início de uma operação de seleção. Por padrão, seu valor étrue. Option - autoRefresh Se esta opção for definida como verdadeira , a posição e o tamanho de cada item selecionável são calculados no início de uma operação de seleção. Por padrão, seu valor étrue. Se você tiver muitos itens, pode definir isso como false e chamar o método refresh () manualmente. Syntax `$( ".selector" ).selectable({ autoRefresh: false });`
3	cancelar Esta opção proíbe a seleção se você iniciar a seleção de elementos. Por padrão, seu valor éinput,textarea,button,select,option. Option - cancel Esta opção proíbe a seleção se você iniciar a seleção de elementos. Por padrão, seu valor éinput,textarea,button,select,option. Syntax `$( ".selector" ).selectable({ cancel: "a,.cancel" });`
4	demora Esta opção é usada para definir o tempo em milissegundos e definir quando a seleção deve começar. Isso pode ser usado para evitar seleções indesejadas. Por padrão, seu valor é0. Option - delay Esta opção é usada para definir o tempo em milissegundos e definir quando a seleção deve começar. Isso pode ser usado para evitar seleções indesejadas. Por padrão, seu valor é0. Syntax `$( ".selector" ).selectable({ delay: 150 });`
5	Desativado Esta opção, quando definida como verdadeira, desativa o mecanismo de seleção. Os usuários não podem selecionar os elementos até que o mecanismo seja restaurado usando a instrução selecionável ("habilitar"). Por padrão, seu valor éfalse. Option - disabled Esta opção, quando definida como verdadeira, desativa o mecanismo de seleção. Os usuários não podem selecionar os elementos até que o mecanismo seja restaurado usando a instrução selecionável ("habilitar"). Por padrão, seu valor éfalse. Syntax `$( ".selector" ).selectable({ disabled: true });`
6	distância Esta opção é a distância (em pixels) que o mouse deve mover para considerar a seleção em andamento. Isso é útil, por exemplo, para evitar que cliques simples sejam interpretados como uma seleção de grupo. Por padrão, seu valor é0. Option - distance Esta opção é a distância (em pixels) que o mouse deve mover para considerar a seleção em andamento. Isso é útil, por exemplo, para evitar que cliques simples sejam interpretados como uma seleção de grupo. Por padrão, seu valor é0. Syntax `$( ".selector" ).selectable({ distance: 30 });`
7	filtro Esta opção é um seletor que indica quais elementos podem fazer parte da seleção. Por padrão, seu valor é. Option - filter* Esta opção é um seletor que indica quais elementos podem fazer parte da seleção. Por padrão, seu valor é. Syntax* `$( ".selector" ).selectable({ filter: "li" });`
8	tolerância Esta opção especifica qual modo usar para testar se o auxiliar de seleção (o laço) deve selecionar um item. Por padrão, seu valor étouch. Option - tolerance Esta opção especifica qual modo usar para testar se o auxiliar de seleção (o laço) deve selecionar um item. Por padrão, seu valor étouch. Isso pode ser do tipo - fit - Este tipo indica que uma seleção de arrastar deve abranger completamente um elemento para que seja selecionada. touch - Este tipo indica que o retângulo de arrasto só precisa cruzar qualquer parte do item selecionável. Syntax `$( ".selector" ).selectable({ tolerance: "fit" });`

A seção a seguir mostrará alguns exemplos de funcionamento de funcionalidade selecionável.

Funcionalidade padrão

O exemplo a seguir demonstra um exemplo simples de funcionalidade selecionável, sem passar parâmetros para o 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>

Vamos salvar o código acima em um arquivo HTML selectableexample.htme abri-lo em um navegador padrão que suporte javascript, você verá a seguinte saída. Agora, você pode brincar com o resultado -

Tente clicar nos produtos, use a tecla CTRLS para selecionar vários produtos.

Uso de Atraso e Distância

O exemplo a seguir demonstra o uso de duas opções delay e distance na função selecionável 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>

Tente clicar nos produtos, use a tecla CTRL para selecionar vários produtos. Você notará que a seleção do Produto 1, Produto 2 e Produto 3 começa após um atraso de 1000 ms. A seleção do Produto 4, Produto 5, Produto 6 e Produto 7 não pode ser feita individualmente. A seleção começa somente depois que o mouse se move a uma distância de 100px.

Uso de Filtro

O exemplo a seguir demonstra o uso de duas opções delay e distance na função selecionável 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>

Tente clicar nos produtos. Você notará que apenas o primeiro produto pode ser selecionado.

$ (seletor, contexto) .selectable ("ação", parâmetros) Método

O método selecionável ("ação", parâmetros) pode executar uma ação em elementos selecionáveis, como impedir a funcionalidade selecionável. A ação é especificada como uma string no primeiro argumento (por exemplo, "desabilitar" para interromper a seleção). Confira as ações que podem ser aprovadas, na tabela a seguir.

Sintaxe

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

A tabela a seguir lista as diferentes ações que podem ser usadas com este método -


$( ".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. Não.	Ação e descrição
1	destruir Esta ação remove a funcionalidade selecionável de um elemento completamente. Os elementos retornam ao seu estado pré-inicial. Action - destroy Esta ação remove a funcionalidade selecionável de um elemento completamente. Os elementos retornam ao seu estado pré-inicial. Syntax `$( ".selector" ).selectable("destroy");`
2	desabilitar Esta ação desativa a funcionalidade selecionável de um elemento. Este método não aceita nenhum argumento. Action - disable Esta ação remove a funcionalidade selecionável de um elemento completamente. Os elementos retornam ao seu estado pré-inicial. Syntax `$( ".selector" ).selectable("disable");`
3	habilitar Esta ação ativa a funcionalidade selecionável de um elemento. Este método não aceita nenhum argumento. Action - enable Esta ação ativa a funcionalidade selecionável de um elemento. Este método não aceita nenhum argumento. Syntax `$( ".selector" ).selectable("enable");`
4	opção (optionName) Esta ação obtém o valor atualmente associado ao optionName especificado . Action - option( optionName ) Esta ação obtém o valor atualmente associado ao optionName especificado . Syntax `var isDisabled = $( ".selector" ).selectable( "option", "disabled" );`
5	opção() Esta ação obtém um objeto contendo pares de chave / valor que representam o hash de opções selecionáveis atuais. Action - option() Esta ação obtém um objeto contendo pares de chave / valor que representam o hash de opções selecionáveis atuais. Syntax `var options = $( ".selector" ).selectable( "option" );`
6	opção (optionName, valor) Esta ação define o valor da opção selecionável associada ao optionName especificado . O argumento optionName é o nome da opção a ser definida e value é o valor a ser definido para a opção. Action - option( optionName, value ) Esta ação define o valor da opção selecionável associada ao optionName especificado . O argumento optionName é o nome da opção a ser definida e value é o valor a ser definido para a opção. Syntax `$( ".selector" ).selectable( "option", "disabled", true );`
7	opção (opções) Esta ação define uma ou mais opções para o selecionável. O argumento options é um mapa de pares opção-valor a serem definidos. Action - option( options ) Esta ação define uma ou mais opções para o selecionável. O argumento options é um mapa de pares opção-valor a serem definidos. Syntax `$( ".selector" ).selectable( "option", { disabled: true } );`
8	refrescar Esta ação faz com que o tamanho e a posição dos elementos selecionáveis sejam atualizados. Usado principalmente quando a opção autoRefresh está desabilitada (definida como false ). Este método não aceita nenhum argumento. Action - refresh Esta ação faz com que o tamanho e a posição dos elementos selecionáveis sejam atualizados. Usado principalmente quando a opção autoRefresh está desabilitada. Este método não aceita nenhum argumento. Syntax `$( ".selector" ).selectable("refresh");`
9	ferramenta Esta ação retorna um objeto jQuery contendo o elemento selecionável. Este método não aceita nenhum argumento. Action - widget Esta ação retorna um objeto jQuery contendo o elemento selecionável. Este método não aceita nenhum argumento. Syntax `var widget = $( ".selector" ).selectable( "widget" );`

Exemplo

Agora vamos ver um exemplo usando as ações da tabela acima. O exemplo a seguir demonstra o uso dos métodos disable () e 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>

Vamos salvar o código acima em um arquivo HTML selectableexample.htm e abri-lo em um navegador padrão que suporte javascript, você verá a seguinte saída -

Tente clicar nos produtos, use a tecla CTRL para selecionar vários produtos. Você notará que o Produto 1, o Produto 2 e o Produto 3 estão desativados. A seleção do Produto 4, Produto 5, Produto 6 e Produto 7 ocorre depois que o mouse se move a uma distância de 1px.

Gerenciamento de eventos em elementos selecionáveis

Além do método selecionável (opções) que vimos nas seções anteriores, JqueryUI fornece métodos de evento que são acionados para um evento específico. Esses métodos de evento estão listados abaixo -


$( ".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. Não.	Método e descrição do evento
1	criar (evento, ui) Este evento é disparado quando o elemento selecionável é criado. Onde o evento é do tipo Evento e ui é do tipo Objeto . Event - create(event, ui) Este evento é disparado quando o elemento selecionável é criado. Onde o evento é do tipo Evento e ui é do tipo Objeto . Syntax `$( ".selector" ).selectable({ create: function( event, ui ) {} });`
2	selecionado (evento, ui) Este evento é disparado para cada elemento selecionado. Onde o evento é do tipo Evento e ui é do tipo Objeto . Event - selected(event, ui) Este evento é disparado para cada elemento selecionado. Onde o evento é do tipo Evento e ui é do tipo Objeto . Os valores possíveis de ui são - selected - Isso especifica o item selecionável que foi selecionado. Syntax `$( ".selector" ).selectable({ selected: function( event, ui ) {} });`
3	selecionando (evento, ui) Este evento é acionado para cada elemento selecionável que está prestes a ser selecionado. Onde o evento é do tipo Evento e ui é do tipo Objeto . Event - selecting(event, ui) Este evento é acionado para cada elemento selecionável que está prestes a ser selecionado. Onde o evento é do tipo Evento e ui é do tipo Objeto . Os valores possíveis de ui são - selecting - Isso especifica uma referência ao elemento que está prestes a ser selecionado. Syntax `$( ".selector" ).selectable({ selecting: function( event, ui ) {} });`
4	início (evento, ui) Este evento é disparado no início da operação de seleção. Onde o evento é do tipo Evento e ui é do tipo Objeto . Event - start(event, ui) Este evento é disparado no início da operação de seleção. Onde o evento é do tipo Evento e ui é do tipo Objeto . Syntax `$( ".selector" ).selectable({ start: function( event, ui ) {} });`
5	parar (evento, ui) Este evento é disparado no final da operação de seleção. Onde o evento é do tipo Evento e ui é do tipo Objeto . Event - stop(event, ui) Este evento é disparado no final da operação de seleção. Onde o evento é do tipo Evento e ui é do tipo Objeto . Syntax `$( ".selector" ).selectable({ stop: function( event, ui ) {} });`
6	não selecionado (evento, ui) Este evento é disparado no final da operação de seleção de cada elemento que se torna desmarcado. Onde o evento é do tipo Evento e ui é do tipo Objeto . Event - unselected(event, ui) Este evento é disparado no final da operação de seleção de cada elemento que se torna desmarcado. Onde o evento é do tipo Evento e ui é do tipo Objeto . Os valores possíveis de ui são - unselected - Um elemento que contém uma referência ao elemento que deixou de ser selecionado. Syntax `$( ".selector" ).selectable({ unselected: function( event, ui ) {} });`
7	desmarcando (evento, ui) Este evento é disparado durante a operação de seleção para cada elemento selecionado que está prestes a se tornar desmarcado. Onde o evento é do tipo Evento e ui é do tipo Objeto . Event - unselecting(event, ui) Este evento é disparado durante a operação de seleção para cada elemento selecionado que está prestes a se tornar desmarcado. Onde o evento é do tipo Evento e ui é do tipo Objeto . Os valores possíveis de ui são - unselecting - Um elemento que contém uma referência ao elemento que está prestes a se tornar desmarcado. Syntax `$( ".selector" ).selectable({ unselecting: function( event, ui ) {} });`

Exemplo

O exemplo a seguir demonstra o uso do método de evento durante a funcionalidade selecionável. Este exemplo demonstra o uso do evento selecionado .

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

Vamos salvar o código acima em um arquivo HTML selectableexample.htm e abri-lo em um navegador padrão que suporte javascript, você verá a seguinte saída -

Tente clicar nos produtos, use a tecla CTRL para selecionar vários produtos. Você notará que o número do produto selecionado está impresso na parte inferior.