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)

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 -

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>

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

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

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 -

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.