JqueryUI - sélectionnable

jQueryUI fournit une méthode selectable () pour sélectionner l'élément DOM individuellement ou dans un groupe. Avec cette méthode, les éléments peuvent être sélectionnés en faisant glisser une boîte (parfois appelée lasso) avec la souris sur les éléments. En outre, les éléments peuvent être sélectionnés en cliquant ou en faisant glisser tout en maintenant la touche Ctrl / Meta, permettant des sélections multiples (non contiguës).

Syntaxe

le selectable() La méthode peut être utilisée sous deux formes -

$ (selector, context) .selectable (options), méthode
$ (selector, context) .selectable ("action", params) Méthode

$ (selector, context) .selectable (options), méthode

La méthode sélectionnable (options) déclare qu'un élément HTML contient des éléments sélectionnables. Le paramètre options est un objet qui spécifie le comportement des éléments impliqués lors de la sélection.

Syntaxe

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

Vous pouvez fournir une ou plusieurs options à la fois en utilisant un objet Javascript. S'il y a plus d'une option à fournir, vous les séparerez en utilisant une virgule comme suit -

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

Le tableau suivant répertorie les différentes options pouvant être utilisées avec cette méthode -

N ° Sr.	Option et description
1	ajouter à Cette option indique à quel élément l'assistant de sélection (le lasso) doit être ajouté. Par défaut, sa valeur estbody. Option - appendTo Cette option indique à quel élément l'assistant de sélection (le lasso) doit être ajouté. Par défaut, sa valeur estbody. Syntax `$( ".selector" ).selectable({ appendTo: "#identifier" });`
2	actualisation automatique Si cette option est définie sur true , la position et la taille de chaque élément sélectionnable sont calculées au début d'une opération de sélection. Par défaut, sa valeur esttrue. Option - autoRefresh Si cette option est définie sur true , la position et la taille de chaque élément sélectionnable sont calculées au début d'une opération de sélection. Par défaut, sa valeur esttrue. Si vous avez de nombreux éléments, vous pouvez le définir sur false et appeler la méthode refresh () manuellement. Syntax `$( ".selector" ).selectable({ autoRefresh: false });`
3	Annuler Cette option interdit la sélection si vous démarrez la sélection d'éléments. Par défaut, sa valeur estinput,textarea,button,select,option. Option - cancel Cette option interdit la sélection si vous démarrez la sélection d'éléments. Par défaut, sa valeur estinput,textarea,button,select,option. Syntax `$( ".selector" ).selectable({ cancel: "a,.cancel" });`
4	retard Cette option permet de définir le temps en millisecondes et définit le moment où la sélection doit commencer. Cela peut être utilisé pour éviter les sélections indésirables. Par défaut, sa valeur est0. Option - delay Cette option permet de définir le temps en millisecondes et définit le moment où la sélection doit commencer. Cela peut être utilisé pour éviter les sélections indésirables. Par défaut, sa valeur est0. Syntax `$( ".selector" ).selectable({ delay: 150 });`
5	désactivée Cette option, lorsqu'elle est définie sur true, désactive le mécanisme de sélection. Les utilisateurs ne peuvent pas sélectionner les éléments tant que le mécanisme n'est pas restauré à l'aide de l'instruction sélectionnable («activer»). Par défaut, sa valeur estfalse. Option - disabled Cette option, lorsqu'elle est définie sur true, désactive le mécanisme de sélection. Les utilisateurs ne peuvent pas sélectionner les éléments tant que le mécanisme n'est pas restauré à l'aide de l'instruction sélectionnable («activer»). Par défaut, sa valeur estfalse. Syntax `$( ".selector" ).selectable({ disabled: true });`
6	distance Cette option est la distance (en pixels) que la souris doit déplacer pour considérer la sélection en cours. Ceci est utile, par exemple, pour éviter que de simples clics ne soient interprétés comme une sélection de groupe. Par défaut, sa valeur est0. Option - distance Cette option est la distance (en pixels) que la souris doit déplacer pour considérer la sélection en cours. Ceci est utile, par exemple, pour éviter que de simples clics ne soient interprétés comme une sélection de groupe. Par défaut, sa valeur est0. Syntax `$( ".selector" ).selectable({ distance: 30 });`
sept	filtre Cette option est un sélecteur indiquant quels éléments peuvent faire partie de la sélection. Par défaut, sa valeur est. Option - filter* Cette option est un sélecteur indiquant quels éléments peuvent faire partie de la sélection. Par défaut, sa valeur est. Syntax* `$( ".selector" ).selectable({ filter: "li" });`
8	tolérance Cette option spécifie le mode à utiliser pour tester si l'assistant de sélection (le lasso) doit sélectionner un élément. Par défaut, sa valeur esttouch. Option - tolerance Cette option spécifie le mode à utiliser pour tester si l'assistant de sélection (le lasso) doit sélectionner un élément. Par défaut, sa valeur esttouch. Cela peut être de type - fit - Ce type indique qu'une sélection de glissement doit englober complètement un élément pour être sélectionnée. touch - Ce type indique que le rectangle de glissement n'a besoin d'intersecter aucune partie de l'élément sélectionnable. Syntax `$( ".selector" ).selectable({ tolerance: "fit" });`

La section suivante vous montrera quelques exemples fonctionnels de fonctionnalités sélectionnables.

Fonctionnalité par défaut

L'exemple suivant montre un exemple simple de fonctionnalité sélectionnable, en ne passant aucun paramètre au selectable() méthode.

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

Sauvegardons le code ci-dessus dans un fichier HTML selectableexample.htmet ouvrez-le dans un navigateur standard qui prend en charge javascript, vous devriez voir la sortie suivante. Maintenant, vous pouvez jouer avec le résultat -

Essayez de cliquer sur les produits, utilisez la touche CTRLS pour sélectionner plusieurs produits.

Utilisation du retard et de la distance

L'exemple suivant illustre l'utilisation de deux options delay et distance dans la fonction sélectionnable 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>

Essayez de cliquer sur les produits, utilisez la touche CTRL pour sélectionner plusieurs produits. Vous remarquerez que la sélection du produit 1, du produit 2 et du produit 3 démarre après un délai de 1000 ms. La sélection du produit 4, du produit 5, du produit 6 et du produit 7 ne peut être effectuée individuellement. La sélection ne commence qu'après que la souris se déplace sur une distance de 100 pixels.

Utilisation du filtre

L'exemple suivant illustre l'utilisation de deux options delay et distance dans la fonction sélectionnable 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>

Essayez de cliquer sur les produits. Vous remarquerez que seul le premier produit peut être sélectionné.

$ (selector, context) .selectable ("action", params) Méthode

La méthode sélectionnable ("action", params) peut effectuer une action sur des éléments sélectionnables, comme empêcher une fonctionnalité sélectionnable. L'action est spécifiée sous forme de chaîne dans le premier argument (par exemple, "désactiver" pour arrêter la sélection). Découvrez les actions qui peuvent être passées, dans le tableau suivant.

Syntaxe

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

Le tableau suivant répertorie les différentes actions qui peuvent être utilisées avec cette méthode -

N ° Sr.	Action et description
1	détruire Cette action supprime complètement la fonctionnalité sélectionnable d'un élément. Les éléments reviennent à leur état pré-init. Action - destroy Cette action supprime complètement la fonctionnalité sélectionnable d'un élément. Les éléments reviennent à leur état pré-init. Syntax `$( ".selector" ).selectable("destroy");`
2	désactiver Cette action désactive la fonctionnalité sélectionnable d'un élément. Cette méthode n'accepte aucun argument. Action - disable Cette action supprime complètement la fonctionnalité sélectionnable d'un élément. Les éléments reviennent à leur état pré-init. Syntax `$( ".selector" ).selectable("disable");`
3	activer Cette action active la fonctionnalité sélectionnable d'un élément. Cette méthode n'accepte aucun argument. Action - enable Cette action active la fonctionnalité sélectionnable d'un élément. Cette méthode n'accepte aucun argument. Syntax `$( ".selector" ).selectable("enable");`
4	option (optionName) Cette action obtient la valeur actuellement associée au nom d' option spécifié . Action - option( optionName ) Cette action obtient la valeur actuellement associée au nom d' option spécifié . Syntax `var isDisabled = $( ".selector" ).selectable( "option", "disabled" );`
5	option() Cette action obtient un objet contenant des paires clé / valeur représentant le hachage d'options sélectionnables en cours. Action - option() Cette action obtient un objet contenant des paires clé / valeur représentant le hachage d'options sélectionnables en cours. Syntax `var options = $( ".selector" ).selectable( "option" );`
6	option (optionName, valeur) Cette action définit la valeur de l'option sélectionnée associée à l' endroit spécifié optionName . L'argument optionName est le nom de l'option à définir et value est la valeur à définir pour l'option. Action - option( optionName, value ) Cette action définit la valeur de l'option sélectionnée associée à l' endroit spécifié optionName . L'argument optionName est le nom de l'option à définir et value est la valeur à définir pour l'option. Syntax `$( ".selector" ).selectable( "option", "disabled", true );`
sept	option (options) Cette action définit une ou plusieurs options pour le sélectionnable. L'argument options est une carte de paires option-valeur à définir. Action - option( options ) Cette action définit une ou plusieurs options pour le sélectionnable. L'argument options est une carte de paires option-valeur à définir. Syntax `$( ".selector" ).selectable( "option", { disabled: true } );`
8	rafraîchir Cette action provoque l'actualisation de la taille et de la position des éléments sélectionnables. Utilisé principalement lorsque l' option autoRefresh est désactivée (définie sur false ). Cette méthode n'accepte aucun argument. Action - refresh Cette action provoque l'actualisation de la taille et de la position des éléments sélectionnables. Utilisé principalement lorsque l' option autoRefresh est désactivée. Cette méthode n'accepte aucun argument. Syntax `$( ".selector" ).selectable("refresh");`
9	widget Cette action renvoie un objet jQuery contenant l'élément sélectionnable. Cette méthode n'accepte aucun argument. Action - widget Cette action renvoie un objet jQuery contenant l'élément sélectionnable. Cette méthode n'accepte aucun argument. Syntax `var widget = $( ".selector" ).selectable( "widget" );`

Exemple

Voyons maintenant un exemple utilisant les actions du tableau ci-dessus. L'exemple suivant illustre l'utilisation des méthodes disable () et 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>

Sauvegardons le code ci-dessus dans un fichier HTML selectableexample.htm et ouvrez-le dans un navigateur standard qui prend en charge javascript, vous devriez voir la sortie suivante -

Essayez de cliquer sur les produits, utilisez la touche CTRL pour sélectionner plusieurs produits. Vous remarquerez que le produit 1, le produit 2 et le produit 3 sont désactivés. La sélection du produit 4, du produit 5, du produit 6 et du produit 7 se produit après que la souris se déplace d'une distance de 1px.

Gestion des événements sur les éléments sélectionnables

En plus de la méthode sélectionnable (options) que nous avons vue dans les sections précédentes, JqueryUI fournit des méthodes d'événement qui se déclenchent pour un événement particulier. Ces méthodes d'événement sont répertoriées ci-dessous -


$( ".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 ) {}
});

N ° Sr.	Méthode d'événement et description
1	create (événement, interface utilisateur) Cet événement est déclenché lors de la création de l'élément sélectionnable. Où event est de type Event et ui est de type Object . Event - create(event, ui) Cet événement est déclenché lors de la création de l'élément sélectionnable. Où event est de type Event et ui est de type Object . Syntax `$( ".selector" ).selectable({ create: function( event, ui ) {} });`
2	sélectionné (événement, ui) Cet événement est déclenché pour chaque élément sélectionné. Où event est de type Event et ui est de type Object . Event - selected(event, ui) Cet événement est déclenché pour chaque élément sélectionné. Où event est de type Event et ui est de type Object . Les valeurs possibles de ui sont - selected - Ceci spécifie l'élément sélectionnable qui a été sélectionné. Syntax `$( ".selector" ).selectable({ selected: function( event, ui ) {} });`
3	sélection (événement, ui) Cet événement est déclenché pour chaque élément sélectionnable sur le point d'être sélectionné. Où event est de type Event et ui est de type Object . Event - selecting(event, ui) Cet événement est déclenché pour chaque élément sélectionnable sur le point d'être sélectionné. Où event est de type Event et ui est de type Object . Les valeurs possibles de ui sont - selecting - Ceci spécifie une référence à l'élément qui est sur le point d'être sélectionné. Syntax `$( ".selector" ).selectable({ selecting: function( event, ui ) {} });`
4	start (événement, ui) Cet événement est déclenché au début de l'opération de sélection. Où event est de type Event et ui est de type Object . Event - start(event, ui) Cet événement est déclenché au début de l'opération de sélection. Où event est de type Event et ui est de type Object . Syntax `$( ".selector" ).selectable({ start: function( event, ui ) {} });`
5	stop (événement, ui) Cet événement est déclenché à la fin de l'opération de sélection. Où event est de type Event et ui est de type Object . Event - stop(event, ui) Cet événement est déclenché à la fin de l'opération de sélection. Où event est de type Event et ui est de type Object . Syntax `$( ".selector" ).selectable({ stop: function( event, ui ) {} });`
6	non sélectionné (événement, interface utilisateur) Cet événement est déclenché à la fin de l'opération de sélection pour chaque élément désélectionné. Où event est de type Event et ui est de type Object . Event - unselected(event, ui) Cet événement est déclenché à la fin de l'opération de sélection pour chaque élément désélectionné. Où event est de type Event et ui est de type Object . Les valeurs possibles de ui sont - unselected - Un élément qui contient une référence à l'élément qui n'est plus sélectionné. Syntax `$( ".selector" ).selectable({ unselected: function( event, ui ) {} });`
sept	désélectionner (événement, ui) Cet événement est déclenché lors de l'opération de sélection pour chaque élément sélectionné qui est sur le point de devenir désélectionné. Où event est de type Event et ui est de type Object . Event - unselecting(event, ui) Cet événement est déclenché lors de l'opération de sélection pour chaque élément sélectionné qui est sur le point de devenir désélectionné. Où event est de type Event et ui est de type Object . Les valeurs possibles de ui sont - unselecting - Un élément qui contient une référence à l'élément qui est sur le point de devenir désélectionné. Syntax `$( ".selector" ).selectable({ unselecting: function( event, ui ) {} });`

Exemple

L'exemple suivant illustre l'utilisation de la méthode d'événement pendant la fonctionnalité sélectionnable. Cet exemple illustre l'utilisation de l'événement sélectionné .

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

Sauvegardons le code ci-dessus dans un fichier HTML selectableexample.htm et ouvrez-le dans un navigateur standard qui prend en charge javascript, vous devriez voir la sortie suivante -

Essayez de cliquer sur les produits, utilisez la touche CTRL pour sélectionner plusieurs produits. Vous remarquerez que le numéro de produit sélectionné est imprimé en bas.