JqueryUI - do wyboru

jQueryUI zapewnia metodę selectable () do wybierania elementu DOM indywidualnie lub w grupie. Dzięki tej metodzie elementy można wybierać, przeciągając ramkę (czasami nazywaną lasso) myszą nad elementami. Ponadto elementy można wybierać, klikając lub przeciągając, przytrzymując klawisz Ctrl / Meta, co pozwala na wielokrotne (nieciągłe) zaznaczenia.

Składnia

Plik selectable() metoda może być stosowana w dwóch formach -

$ (selektor, kontekst) .selectable (opcje) Metoda
$ (selektor, kontekst) .selectable ("akcja", parametry) Metoda

$ (selektor, kontekst) .selectable (opcje) Metoda

Metoda selectable (options) deklaruje, że element HTML zawiera elementy do wyboru. Te opcje parametr jest obiektem, który określa zachowanie elementów zaangażowanych przy wyborze.

Składnia

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

Możesz podać jedną lub więcej opcji naraz, używając obiektu JavaScript. Jeśli chcesz podać więcej niż jedną opcję, oddziel je przecinkiem w następujący sposób -

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

W poniższej tabeli wymieniono różne opcje , których można użyć z tą metodą -


$( ".selector" ).selectable({ appendTo: "#identifier" });
$( ".selector" ).selectable({ autoRefresh: false });
$( ".selector" ).selectable({ cancel: "a,.cancel" });
$( ".selector" ).selectable({ delay: 150 });
$( ".selector" ).selectable({ disabled: true });
$( ".selector" ).selectable({ distance: 30 });
$( ".selector" ).selectable({ filter: "li" });
$( ".selector" ).selectable({ tolerance: "fit" });

Sr.No.	Opcja i opis
1	dołączyć do Ta opcja mówi, do którego elementu należy dołączyć pomocnik selekcji (lasso). Domyślnie jego wartość tobody. Option - appendTo Ta opcja mówi, do którego elementu należy dołączyć pomocnik selekcji (lasso). Domyślnie jego wartość tobody. Syntax `$( ".selector" ).selectable({ appendTo: "#identifier" });`
2	automatyczne odświeżanie Jeśli ta opcja ma wartość true , pozycja i rozmiar każdego wybieralnego elementu są obliczane na początku operacji wyboru. Domyślnie jego wartość totrue. Option - autoRefresh Jeśli ta opcja ma wartość true , pozycja i rozmiar każdego wybieralnego elementu są obliczane na początku operacji wyboru. Domyślnie jego wartość totrue. Jeśli masz wiele elementów, możesz ustawić tę opcję na false i ręcznie wywołać metodę refresh () . Syntax `$( ".selector" ).selectable({ autoRefresh: false });`
3	Anuluj Ta opcja zabrania wybierania w przypadku rozpoczęcia selekcji elementów. Domyślnie jego wartość toinput,textarea,button,select,option. Option - cancel Ta opcja zabrania wybierania w przypadku rozpoczęcia selekcji elementów. Domyślnie jego wartość toinput,textarea,button,select,option. Syntax `$( ".selector" ).selectable({ cancel: "a,.cancel" });`
4	opóźnienie Ta opcja służy do ustawiania czasu w milisekundach i określa, kiedy powinno się rozpocząć wybieranie. Można to wykorzystać, aby zapobiec niechcianym wyborom. Domyślnie jego wartość to0. Option - delay Ta opcja służy do ustawiania czasu w milisekundach i określa, kiedy powinno się rozpocząć wybieranie. Można to wykorzystać, aby zapobiec niechcianym wyborom. Domyślnie jego wartość to0. Syntax `$( ".selector" ).selectable({ delay: 150 });`
5	wyłączone Gdy ta opcja ma wartość true, wyłącza mechanizm wyboru. Użytkownicy nie mogą wybierać elementów, dopóki mechanizm nie zostanie przywrócony za pomocą instrukcji wybieralnej („włącz”). Domyślnie jego wartość tofalse. Option - disabled Gdy ta opcja ma wartość true, wyłącza mechanizm wyboru. Użytkownicy nie mogą wybierać elementów, dopóki mechanizm nie zostanie przywrócony za pomocą instrukcji wybieralnej („włącz”). Domyślnie jego wartość tofalse. Syntax `$( ".selector" ).selectable({ disabled: true });`
6	dystans Ta opcja to odległość (w pikselach), o jaką musi się przesunąć mysz, aby uwzględnić trwający wybór. Jest to przydatne, na przykład, aby zapobiec interpretowaniu prostych kliknięć jako wyboru grupowego. Domyślnie jego wartość to0. Option - distance Ta opcja to odległość (w pikselach), o jaką musi się przesunąć mysz, aby uwzględnić trwający wybór. Jest to przydatne, na przykład, aby zapobiec interpretowaniu prostych kliknięć jako wyboru grupowego. Domyślnie jego wartość to0. Syntax `$( ".selector" ).selectable({ distance: 30 });`
7	filtr Ta opcja to selektor wskazujący, które elementy mogą być częścią zaznaczenia. Domyślnie jego wartość to. Option - filter* Ta opcja to selektor wskazujący, które elementy mogą być częścią zaznaczenia. Domyślnie jego wartość to. Syntax* `$( ".selector" ).selectable({ filter: "li" });`
8	tolerancja Ta opcja określa, który tryb ma być używany do testowania, czy pomocnik wyboru (lasso) powinien wybrać element. Domyślnie jego wartość totouch. Option - tolerance Ta opcja określa, który tryb ma być używany do testowania, czy pomocnik wyboru (lasso) powinien wybrać element. Domyślnie jego wartość totouch. Może to być typ - fit - Ten typ wskazuje, że zaznaczenie przez przeciąganie musi całkowicie obejmować element, aby zostało wybrane. touch - Ten typ wskazuje, że prostokąt przeciągania musi przecinać tylko dowolną część zaznaczanego elementu. Syntax `$( ".selector" ).selectable({ tolerance: "fit" });`

Poniższa sekcja przedstawia kilka działających przykładów wybranych funkcji.

Domyślna funkcjonalność

Poniższy przykład ilustruje prosty przykład wybieralnej funkcjonalności, nie przekazując żadnych parametrów do selectable() metoda.

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

Zapiszmy powyższy kod w pliku HTML selectableexample.htmi otwórz go w standardowej przeglądarce obsługującej javascript, powinieneś zobaczyć następujące dane wyjściowe. Teraz możesz grać z wynikiem -

Spróbuj kliknąć produkty, użyj klawisza CTRLS, aby wybrać wiele produktów.

Korzystanie z opóźnienia i odległości

Poniższy przykład ilustruje użycie dwóch opcji delay i distance w wybieralnej funkcji 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>

Spróbuj kliknąć produkty, użyj klawisza CTRL, aby wybrać wiele produktów. Zauważysz, że wybór Produktu 1, Produktu 2 i Produktu 3 rozpocznie się po upływie 1000 ms. Wyboru produktu 4, produktu 5, produktu 6 i produktu 7 nie można dokonać indywidualnie. Zaznaczanie rozpoczyna się dopiero po przesunięciu myszy na odległość 100px.

Korzystanie z filtra

Poniższy przykład ilustruje użycie dwóch opcji delay i distance w wybieralnej funkcji 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>

Spróbuj kliknąć produkty. Zauważysz, że można wybrać tylko pierwszy produkt.

$ (selektor, kontekst) .selectable ("akcja", parametry) Metoda

Metoda selectable („action”, params) może wykonać akcję na elementach wybieralnych, na przykład uniemożliwić wybranie funkcjonalności. Akcja jest określana jako ciąg znaków w pierwszym argumencie (np. „Disable”, aby zatrzymać wybór). Zapoznaj się z czynnościami, które można wykonać, w poniższej tabeli.

Składnia

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

W poniższej tabeli wymieniono różne akcje , których można użyć z tą metodą -


$( ".selector" ).selectable("destroy");
$( ".selector" ).selectable("disable");
$( ".selector" ).selectable("enable");
var isDisabled = $( ".selector" ).selectable( "option", "disabled" );
var options = $( ".selector" ).selectable( "option" );
$( ".selector" ).selectable( "option", "disabled", true );
$( ".selector" ).selectable( "option", { disabled: true } );
$( ".selector" ).selectable("refresh");
var widget = $( ".selector" ).selectable( "widget" );

Sr.No.	Działanie i opis
1	zniszczyć Ta akcja całkowicie usuwa możliwą do wybrania funkcjonalność elementu. Elementy wracają do stanu sprzed uruchomienia. Action - destroy Ta akcja całkowicie usuwa możliwą do wybrania funkcjonalność elementu. Elementy wracają do stanu sprzed uruchomienia. Syntax `$( ".selector" ).selectable("destroy");`
2	wyłączyć Ta czynność dezaktywuje wybieralną funkcjonalność elementu. Ta metoda nie przyjmuje żadnych argumentów. Action - disable Ta akcja całkowicie usuwa możliwą do wybrania funkcjonalność elementu. Elementy wracają do stanu sprzed uruchomienia. Syntax `$( ".selector" ).selectable("disable");`
3	włączyć Ta akcja umożliwia wybranie funkcjonalności elementu. Ta metoda nie przyjmuje żadnych argumentów. Action - enable Ta akcja umożliwia wybranie funkcjonalności elementu. Ta metoda nie przyjmuje żadnych argumentów. Syntax `$( ".selector" ).selectable("enable");`
4	opcja (optionName) Ta akcja pobiera wartość aktualnie skojarzoną z określoną optionName . Action - option( optionName ) Ta akcja pobiera wartość aktualnie skojarzoną z określoną optionName . Syntax `var isDisabled = $( ".selector" ).selectable( "option", "disabled" );`
5	opcja() Ta akcja pobiera obiekt zawierający pary klucz / wartość reprezentujące bieżący skrót opcji do wyboru. Action - option() Ta akcja pobiera obiekt zawierający pary klucz / wartość reprezentujące bieżący skrót opcji do wyboru. Syntax `var options = $( ".selector" ).selectable( "option" );`
6	opcja (nazwa_opcji, wartość) Ta akcja ustawia wartość opcji do wyboru skojarzonej z określoną opcją nazwa_opcji . Argument nazwa_opcji to nazwa opcji, która ma zostać ustawiona, a wartość to wartość, która ma zostać ustawiona dla opcji. Action - option( optionName, value ) Ta akcja ustawia wartość opcji do wyboru skojarzonej z określoną opcją nazwa_opcji . Argument nazwa_opcji to nazwa opcji, która ma zostać ustawiona, a wartość to wartość, która ma zostać ustawiona dla opcji. Syntax `$( ".selector" ).selectable( "option", "disabled", true );`
7	opcja (opcje) Ta akcja ustawia jedną lub więcej opcji do wyboru. Opcje argumentów to mapa par opcja-wartość do ustawienia. Action - option( options ) Ta akcja ustawia jedną lub więcej opcji do wyboru. Opcje argumentów to mapa par opcja-wartość do ustawienia. Syntax `$( ".selector" ).selectable( "option", { disabled: true } );`
8	odświeżać Ta akcja powoduje odświeżenie rozmiaru i położenia wybranych elementów. Używane głównie, gdy opcja autoRefresh jest wyłączona (ustawiona na false ). Ta metoda nie przyjmuje żadnych argumentów. Action - refresh Ta akcja powoduje odświeżenie rozmiaru i położenia wybranych elementów. Używany głównie, gdy opcja autoRefresh jest wyłączona. Ta metoda nie przyjmuje żadnych argumentów. Syntax `$( ".selector" ).selectable("refresh");`
9	widget Ta akcja zwraca obiekt jQuery zawierający wybieralny element. Ta metoda nie przyjmuje żadnych argumentów. Action - widget Ta akcja zwraca obiekt jQuery zawierający wybieralny element. Ta metoda nie przyjmuje żadnych argumentów. Syntax `var widget = $( ".selector" ).selectable( "widget" );`

Przykład

Zobaczmy teraz przykład wykorzystujący akcje z powyższej tabeli. Poniższy przykład demonstruje użycie metod disable () i 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>

Zapiszmy powyższy kod w pliku HTML selectableexample.htm i otwórz go w standardowej przeglądarce obsługującej javascript, powinieneś zobaczyć następujące dane wyjściowe -

Spróbuj kliknąć produkty, użyj klawisza CTRL, aby wybrać wiele produktów. Zauważysz, że Produkt 1, Produkt 2 i Produkt 3 są wyłączone. Wybór produktu 4, produktu 5, produktu 6 i produktu 7 następuje po przesunięciu myszy o 1px.

Zarządzanie zdarzeniami na elementach do wyboru

Oprócz metody wybieralnej (opcji), którą widzieliśmy w poprzednich sekcjach, JqueryUI udostępnia metody zdarzeń, które są wyzwalane dla określonego zdarzenia. Te metody zdarzeń są wymienione poniżej -


$( ".selector" ).selectable({
   create: function( event, ui ) {}
});
$( ".selector" ).selectable({
   selected: function( event, ui ) {}
});
$( ".selector" ).selectable({
   selecting: function( event, ui ) {}
});
$( ".selector" ).selectable({
   start: function( event, ui ) {}
});
$( ".selector" ).selectable({
   stop: function( event, ui ) {}
});
$( ".selector" ).selectable({
   unselected: function( event, ui ) {}
});
$( ".selector" ).selectable({
   unselecting: function( event, ui ) {}
});

Sr.No.	Metoda i opis wydarzenia
1	create (event, ui) To zdarzenie jest wyzwalane po utworzeniu wybieralnego elementu. Gdzie zdarzenie jest typu Event , a interfejs użytkownika jest typu Object . Event - create(event, ui) To zdarzenie jest wyzwalane po utworzeniu wybieralnego elementu. Gdzie zdarzenie jest typu Event , a interfejs użytkownika jest typu Object . Syntax `$( ".selector" ).selectable({ create: function( event, ui ) {} });`
2	wybrane (zdarzenie, interfejs użytkownika) To zdarzenie jest wyzwalane dla każdego wybranego elementu. Gdzie zdarzenie jest typu Event , a interfejs użytkownika jest typu Object . Event - selected(event, ui) To zdarzenie jest wyzwalane dla każdego wybranego elementu. Gdzie zdarzenie jest typu Event , a interfejs użytkownika jest typu Object . Możliwe wartości interfejsu użytkownika to - selected - określa element do wyboru, który został wybrany. Syntax `$( ".selector" ).selectable({ selected: function( event, ui ) {} });`
3	zaznaczanie (wydarzenie, ui) To zdarzenie jest wyzwalane dla każdego wybieralnego elementu, który ma zostać wybrany. Gdzie zdarzenie jest typu Event , a interfejs użytkownika jest typu Object . Event - selecting(event, ui) To zdarzenie jest wyzwalane dla każdego wybieralnego elementu, który ma zostać wybrany. Gdzie zdarzenie jest typu Event , a interfejs użytkownika jest typu Object . Możliwe wartości interfejsu użytkownika to - selecting - określa odniesienie do elementu, który ma zostać wybrany. Syntax `$( ".selector" ).selectable({ selecting: function( event, ui ) {} });`
4	start (wydarzenie, ui) To zdarzenie jest wyzwalane na początku operacji wyboru. Gdzie zdarzenie jest typu Event , a interfejs użytkownika jest typu Object . Event - start(event, ui) To zdarzenie jest wyzwalane na początku operacji wyboru. Gdzie zdarzenie jest typu Event , a interfejs użytkownika jest typu Object . Syntax `$( ".selector" ).selectable({ start: function( event, ui ) {} });`
5	stop (zdarzenie, ui) To zdarzenie jest wyzwalane na końcu operacji wyboru. Gdzie zdarzenie jest typu Event , a interfejs użytkownika jest typu Object . Event - stop(event, ui) To zdarzenie jest wyzwalane na końcu operacji wyboru. Gdzie zdarzenie jest typu Event , a interfejs użytkownika jest typu Object . Syntax `$( ".selector" ).selectable({ stop: function( event, ui ) {} });`
6	niewybrane (zdarzenie, ui) To zdarzenie jest wyzwalane na końcu operacji zaznaczania dla każdego elementu, który nie jest zaznaczony. Gdzie zdarzenie jest typu Event , a interfejs użytkownika jest typu Object . Event - unselected(event, ui) To zdarzenie jest wyzwalane na końcu operacji zaznaczania dla każdego elementu, który nie jest zaznaczony. Gdzie zdarzenie jest typu Event , a interfejs użytkownika jest typu Object . Możliwe wartości interfejsu użytkownika to - unselected - Element zawierający odniesienie do elementu, który został odznaczony. Syntax `$( ".selector" ).selectable({ unselected: function( event, ui ) {} });`
7	odznaczanie (zdarzenie, interfejs użytkownika) To zdarzenie jest wyzwalane podczas operacji wybierania dla każdego wybranego elementu, który ma zostać odznaczony. Gdzie zdarzenie jest typu Event , a interfejs użytkownika jest typu Object . Event - unselecting(event, ui) To zdarzenie jest wyzwalane podczas operacji wybierania dla każdego wybranego elementu, który ma zostać odznaczony. Gdzie zdarzenie jest typu Event , a interfejs użytkownika jest typu Object . Możliwe wartości interfejsu użytkownika to - unselecting - Element zawierający odniesienie do elementu, który ma zostać odznaczony. Syntax `$( ".selector" ).selectable({ unselecting: function( event, ui ) {} });`

Przykład

Poniższy przykład ilustruje użycie metody zdarzenia podczas wybierania funkcji. Ten przykład ilustruje użycie wybranego zdarzenia .

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

Zapiszmy powyższy kod w pliku HTML selectableexample.htm i otwórz go w standardowej przeglądarce obsługującej javascript, powinieneś zobaczyć następujące dane wyjściowe -

Spróbuj kliknąć produkty, użyj klawisza CTRL, aby wybrać wiele produktów. Zauważysz, że wybrany numer produktu jest wydrukowany na dole.