JqueryUI: selezionabile

jQueryUI fornisce il metodo selezionabile () per selezionare l'elemento DOM individualmente o in un gruppo. Con questo metodo gli elementi possono essere selezionati trascinando una casella (a volte chiamata lazo) con il mouse sugli elementi. Inoltre, gli elementi possono essere selezionati facendo clic o trascinando tenendo premuto il tasto Ctrl / Meta, consentendo selezioni multiple (non contigue).

Sintassi

Il selectable() può essere utilizzato in due forme:

$ (selettore, contesto) .selectable (opzioni) Metodo

Il metodo selezionabile (opzioni) dichiara che un elemento HTML contiene elementi selezionabili. Il parametro options è un oggetto che specifica il comportamento degli elementi coinvolti durante la selezione.

Sintassi

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

Puoi fornire una o più opzioni alla volta utilizzando l'oggetto Javascript. Se sono disponibili più opzioni, le separerai utilizzando una virgola come segue:

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

La tabella seguente elenca le diverse opzioni che possono essere utilizzate con questo metodo:

Sr.No. Opzione e descrizione
1 appendTo

Questa opzione indica a quale elemento deve essere aggiunto l'helper di selezione (il lazo). Per impostazione predefinita, il suo valore èbody.

Option - appendTo

Questa opzione indica a quale elemento deve essere aggiunto l'helper di selezione (il lazo). Per impostazione predefinita, il suo valore èbody.

Syntax

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

Questa opzione, se impostata su true , la posizione e le dimensioni di ogni elemento selezionabile vengono calcolate all'inizio di un'operazione di selezione. Per impostazione predefinita, il suo valore ètrue.

Option - autoRefresh

Questa opzione, se impostata su true , la posizione e le dimensioni di ogni elemento selezionabile vengono calcolate all'inizio di un'operazione di selezione. Per impostazione predefinita, il suo valore ètrue. Se hai molti elementi, potresti impostarlo su false e chiamare manualmente il metodo refresh () .

Syntax

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

Questa opzione vieta la selezione se si avvia la selezione degli elementi. Per impostazione predefinita, il suo valore èinput,textarea,button,select,option.

Option - cancel

Questa opzione vieta la selezione se si avvia la selezione degli elementi. Per impostazione predefinita, il suo valore èinput,textarea,button,select,option.

Syntax

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

Questa opzione viene utilizzata per impostare il tempo in millisecondi e definisce quando deve iniziare la selezione. Questo può essere usato per prevenire selezioni indesiderate. Per impostazione predefinita, il suo valore è0.

Option - delay

Questa opzione viene utilizzata per impostare il tempo in millisecondi e definisce quando deve iniziare la selezione. Questo può essere usato per prevenire selezioni indesiderate. Per impostazione predefinita, il suo valore è0.

Syntax

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

Questa opzione, se impostata su true, disabilita il meccanismo di selezione. Gli utenti non possono selezionare gli elementi finché il meccanismo non viene ripristinato utilizzando l'istruzione selezionabile ("abilita"). Per impostazione predefinita, il suo valore èfalse.

Option - disabled

Questa opzione, se impostata su true, disabilita il meccanismo di selezione. Gli utenti non possono selezionare gli elementi finché il meccanismo non viene ripristinato utilizzando l'istruzione selezionabile ("abilita"). Per impostazione predefinita, il suo valore èfalse.

Syntax

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

Questa opzione è la distanza (in pixel) che il mouse deve percorrere per considerare la selezione in corso. Ciò è utile, ad esempio, per evitare che semplici clic vengano interpretati come una selezione di gruppo. Per impostazione predefinita, il suo valore è0.

Option - distance

Questa opzione è la distanza (in pixel) che il mouse deve percorrere per considerare la selezione in corso. Ciò è utile, ad esempio, per evitare che semplici clic vengano interpretati come una selezione di gruppo. Per impostazione predefinita, il suo valore è0.

Syntax

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

Questa opzione è un selettore che indica quali elementi possono far parte della selezione. Per impostazione predefinita, il suo valore è*.

Option - filter

Questa opzione è un selettore che indica quali elementi possono far parte della selezione. Per impostazione predefinita, il suo valore è*.

Syntax

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

Questa opzione specifica quale modalità utilizzare per verificare se l'helper di selezione (il lazo) deve selezionare un elemento. Per impostazione predefinita, il suo valore ètouch.

Option - tolerance

Questa opzione specifica quale modalità utilizzare per verificare se l'helper di selezione (il lazo) deve selezionare un elemento. Per impostazione predefinita, il suo valore ètouch.

Questo può essere di tipo -

  • fit - Questo tipo indica che una selezione di trascinamento deve comprendere completamente un elemento per poter essere selezionato.

  • touch - Questo tipo indica che il rettangolo di trascinamento deve solo intersecare qualsiasi parte dell'elemento selezionabile.

Syntax

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

La sezione seguente mostrerà alcuni esempi funzionanti di funzionalità selezionabili.

Funzionalità predefinita

L'esempio seguente mostra un semplice esempio di funzionalità selezionabile, senza passare parametri al file selectable() metodo.

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

Salviamo il codice sopra in un file HTML selectableexample.htme aprilo in un browser standard che supporta javascript, dovresti vedere il seguente output. Ora puoi giocare con il risultato:

Prova a fare clic sui prodotti, usa il tasto CTRLS per selezionare più prodotti.

Uso del ritardo e della distanza

L'esempio seguente mostra l'utilizzo di due opzioni delay e distance nella funzione selezionabile di 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>

Salviamo il codice sopra in un file HTML selectableexample.htme aprilo in un browser standard che supporta javascript, dovresti vedere il seguente output. Ora puoi giocare con il risultato:

Prova a fare clic sui prodotti, usa il tasto CTRL per selezionare più prodotti. Noterai che la selezione del Prodotto 1, Prodotto 2 e Prodotto 3 inizia dopo un ritardo di 1000 ms. La selezione del Prodotto 4, Prodotto 5, Prodotto 6 e Prodotto 7 non può essere effettuata individualmente. La selezione inizia solo dopo che il mouse si sposta di una distanza di 100 px.

Uso del filtro

L'esempio seguente mostra l'utilizzo di due opzioni delay e distance nella funzione selezionabile di 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>

Salviamo il codice sopra in un file HTML selectableexample.htme aprilo in un browser standard che supporta javascript, dovresti vedere il seguente output. Ora puoi giocare con il risultato:

Prova a fare clic sui prodotti. Noterai che è possibile selezionare solo il primo prodotto.

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

Il metodo selezionabile ("azione", params) può eseguire un'azione su elementi selezionabili, come impedire la funzionalità selezionabile. L'azione è specificata come una stringa nel primo argomento (ad esempio, "disabilita" per interrompere la selezione). Controlla le azioni che possono essere trasmesse, nella tabella seguente.

Sintassi

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

La tabella seguente elenca le diverse azioni che possono essere utilizzate con questo metodo:

Sr.No. Azione e descrizione
1 distruggere

Questa azione rimuove completamente la funzionalità selezionabile di un elemento. Gli elementi tornano al loro stato pre-inizializzazione.

Action - destroy

Questa azione rimuove completamente la funzionalità selezionabile di un elemento. Gli elementi tornano al loro stato pre-inizializzazione.

Syntax

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

Questa azione disattiva la funzionalità selezionabile di un elemento. Questo metodo non accetta argomenti.

Action - disable

Questa azione rimuove completamente la funzionalità selezionabile di un elemento. Gli elementi tornano al loro stato pre-inizializzazione.

Syntax

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

Questa azione abilita la funzionalità selezionabile di un elemento. Questo metodo non accetta argomenti.

Action - enable

Questa azione abilita la funzionalità selezionabile di un elemento. Questo metodo non accetta argomenti.

Syntax

$( ".selector" ).selectable("enable");
4 opzione (optionName)

Questa azione ottiene il valore attualmente associato con optionName specificato .

Action - option( optionName )

Questa azione ottiene il valore attualmente associato con optionName specificato .

Syntax

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

Questa azione ottiene un oggetto contenente coppie chiave / valore che rappresentano l'hash delle opzioni attualmente selezionabili.

Action - option()

Questa azione ottiene un oggetto contenente coppie chiave / valore che rappresentano l'hash delle opzioni attualmente selezionabili.

Syntax

var options = $( ".selector" ).selectable( "option" );
6 opzione (optionName, value)

Questa azione imposta il valore dell'opzione selezionabile associata all'optionName specificato . L'argomento optionName è il nome dell'opzione da impostare e valore è il valore da impostare per l'opzione.

Action - option( optionName, value )

Questa azione imposta il valore dell'opzione selezionabile associata all'optionName specificato . L'argomento optionName è il nome dell'opzione da impostare e valore è il valore da impostare per l'opzione.

Syntax

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

Questa azione imposta una o più opzioni per il selezionabile. L'argomento opzioni è una mappa di coppie opzione-valore da impostare.

Action - option( options )

Questa azione imposta una o più opzioni per il selezionabile. L'argomento opzioni è una mappa di coppie opzione-valore da impostare.

Syntax

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

Questa azione causa l'aggiornamento delle dimensioni e della posizione degli elementi selezionabili. Utilizzato principalmente quando l' opzione autoRefresh è disabilitata (impostata su false ). Questo metodo non accetta argomenti.

Action - refresh

Questa azione determina l'aggiornamento delle dimensioni e della posizione degli elementi selezionabili. Utilizzato principalmente quando l' opzione autoRefresh è disabilitata. Questo metodo non accetta argomenti.

Syntax

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

Questa azione restituisce un oggetto jQuery contenente l'elemento selezionabile. Questo metodo non accetta argomenti.

Action - widget

Questa azione restituisce un oggetto jQuery contenente l'elemento selezionabile. Questo metodo non accetta argomenti.

Syntax

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

Esempio

Vediamo ora un esempio usando le azioni della tabella sopra. L'esempio seguente mostra l'uso dei metodi 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>

Salviamo il codice sopra in un file HTML selectableexample.htm e aprilo in un browser standard che supporta javascript, dovresti vedere il seguente output:

Prova a fare clic sui prodotti, usa il tasto CTRL per selezionare più prodotti. Noterai che il prodotto 1, il prodotto 2 e il prodotto 3 sono disabilitati. La selezione del prodotto 4, prodotto 5, prodotto 6 e prodotto 7 avviene dopo che il mouse si sposta di 1 px di distanza.

Gestione degli eventi su elementi selezionabili

Oltre al metodo selezionabile (opzioni) che abbiamo visto nelle sezioni precedenti, JqueryUI fornisce metodi di eventi che vengono attivati ​​per un particolare evento. Questi metodi di eventi sono elencati di seguito:

Sr.No. Metodo e descrizione dell'evento
1 create (evento, ui)

Questo evento viene attivato quando viene creato l'elemento selezionabile. Dove event è di tipo Event e ui è di tipo Object .

Event - create(event, ui)

Questo evento viene attivato quando viene creato l'elemento selezionabile. Dove event è di tipo Event e ui è di tipo Object .

Syntax

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

Questo evento viene attivato per ogni elemento che viene selezionato. Dove event è di tipo Event e ui è di tipo Object .

Event - selected(event, ui)

Questo evento viene attivato per ogni elemento che viene selezionato. Dove event è di tipo Event e ui è di tipo Object . I possibili valori di ui sono -

  • selected - Specifica l'elemento selezionabile che è stato selezionato.

Syntax

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

Questo evento viene attivato per ogni elemento selezionabile che sta per essere selezionato. Dove event è di tipo Event e ui è di tipo Object .

Event - selecting(event, ui)

Questo evento viene attivato per ogni elemento selezionabile che sta per essere selezionato. Dove event è di tipo Event e ui è di tipo Object . I possibili valori di ui sono -

  • selecting - Specifica un riferimento all'elemento che sta per essere selezionato.

Syntax

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

Questo evento viene attivato all'inizio dell'operazione di selezione. Dove event è di tipo Event e ui è di tipo Object .

Event - start(event, ui)

Questo evento viene attivato all'inizio dell'operazione di selezione. Dove event è di tipo Event e ui è di tipo Object .

Syntax

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

Questo evento viene attivato al termine dell'operazione di selezione. Dove event è di tipo Event e ui è di tipo Object .

Event - stop(event, ui)

Questo evento viene attivato al termine dell'operazione di selezione. Dove event è di tipo Event e ui è di tipo Object .

Syntax

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

Questo evento viene attivato alla fine dell'operazione di selezione per ogni elemento che diventa deselezionato. Dove event è di tipo Event e ui è di tipo Object .

Event - unselected(event, ui)

Questo evento viene attivato alla fine dell'operazione di selezione per ogni elemento che diventa deselezionato. Dove event è di tipo Event e ui è di tipo Object . I possibili valori di ui sono -

  • unselected - Un elemento che contiene un riferimento all'elemento che è diventato non selezionato.

Syntax

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

Questo evento viene attivato durante l'operazione di selezione per ogni elemento selezionato che sta per diventare deselezionato. Dove event è di tipo Event e ui è di tipo Object .

Event - unselecting(event, ui)

Questo evento viene attivato durante l'operazione di selezione per ogni elemento selezionato che sta per diventare deselezionato. Dove event è di tipo Event e ui è di tipo Object . I possibili valori di ui sono -

  • unselecting - Un elemento che contiene un riferimento all'elemento che sta per diventare non selezionato.

Syntax

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

Esempio

L'esempio seguente mostra l'utilizzo del metodo degli eventi durante la funzionalità selezionabile. Questo esempio dimostra l'uso dell'evento selezionato .

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

Salviamo il codice sopra in un file HTML selectableexample.htm e aprilo in un browser standard che supporta javascript, dovresti vedere il seguente output:

Prova a fare clic sui prodotti, usa il tasto CTRL per selezionare più prodotti. Noterai che il numero del prodotto selezionato è stampato in basso.