JqueryUI - Bouton

jQueryUI fournit la méthode button () pour transformer les éléments HTML (comme les boutons, les entrées et les ancres) en boutons thématiques, avec une gestion automatique des mouvements de la souris sur eux, le tout géré de manière transparente par jQuery UI.

Afin de regrouper les boutons radio, Button fournit également un widget supplémentaire, appelé Buttonset . Buttonset est utilisé en sélectionnant un élément conteneur (qui contient les boutons radio) et en appelant .buttonset () .

Syntaxe

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

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

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

La méthode button (options) déclare qu'un élément HTML doit être traité comme un bouton. Le paramètre options est un objet qui spécifie le comportement et l'apparence du bouton.

Syntaxe

$(selector, context).button (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).button({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	désactivée Cette option désactive le bouton est défini sur true . Par défaut, sa valeur estfalse. Option - disabled Cette option désactive le bouton est défini sur true . Par défaut, sa valeur estfalse. Syntax `$( ".selector" ).button({ disabled: true });`
2	Icônes Cette option spécifie qu'une ou deux icônes doivent être affichées dans le bouton: icônes principales à gauche, icônes secondaires à droite. L'icône principale est identifiée par la propriété principale de l'objet et l' icône secondaire est identifiée par la propriété secondaire. Par défaut, sa valeur estprimary: null, secondary: null. Option - icons Cette option spécifie qu'une ou deux icônes doivent être affichées dans le bouton: icônes principales à gauche, icônes secondaires à droite. L'icône principale est identifiée par la propriété principale de l'objet et l' icône secondaire est identifiée par la propriété secondaire. Par défaut, sa valeur estprimary: null, secondary: null. Syntax `$( ".selector" ).button({ icons: { primary: "ui-icon-gear", secondary: "ui-icon-triangle-1-s" } });`
3	étiquette Cette option spécifie le texte à afficher sur le bouton qui remplace l'étiquette naturelle. S'il est omis, l'étiquette naturelle de l'élément s'affiche. Dans le cas des boutons radio et des cases à cocher, le libellé naturel est l'élément <label> associé au contrôle. Par défaut, sa valeur estnull. Option - label Cette option spécifie le texte à afficher sur le bouton qui remplace l'étiquette naturelle. S'il est omis, l'étiquette naturelle de l'élément s'affiche. Dans le cas des boutons radio et des cases à cocher, le libellé naturel est l'élément <label> associé au contrôle. Par défaut, sa valeur estnull. Syntax `$( ".selector" ).button({ label: "custom label" });`
4	texte Cette option spécifie si le texte doit être affiché sur le bouton. Si spécifié comme faux , le texte est supprimé si (et seulement si) l'option icônes spécifie au moins une icône. Par défaut, sa valeur esttrue. Option - text Cette option spécifie si le texte doit être affiché sur le bouton. Si spécifié comme faux , le texte est supprimé si (et seulement si) l'option icônes spécifie au moins une icône. Par défaut, sa valeur esttrue. Syntax `$( ".selector" ).button({ text: false });`

Fonctionnalité par défaut

L'exemple suivant montre un exemple simple de fonctionnalité de widget de bouton, ne passant aucun paramètre button() méthode.

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Buttons functionality</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>
      
      <script>
         $(function() {
            $( "#button-1, #button-2, #button-3, #button-4" ).button();
            $( "#button-5" ).buttonset();
         });
      </script>
   </head>
   
   <body>
      <button id = "button-1">A button element</button>
      <input id = "button-2" type = "submit" value = "A submit button">
      <a id = "button-3" href = "">An anchor</a>
      <input type = "checkbox"  id = "button-4" >
      <label for = "button-4">Toggle</label>
      <br><br>
      <div id = "button-5">
         <input type = "checkbox" id = "check1">
         <label for = "check1">Left</label>
         <input type = "checkbox" id = "check2">
         <label for = "check2">Middle</label>
         <input type = "checkbox" id = "check3">
         <label for = "check3">Right</label>
      </div>
   </body>
</html>

Sauvegardons le code ci-dessus dans un fichier HTML buttonexample.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 -

Cet exemple montre le balisage qui peut être utilisé pour les boutons: un élément de bouton, une entrée de type submit et une ancre.

Utilisation d'icônes, de texte et désactivée

L'exemple suivant illustre l'utilisation de deux options icons, text et disabled dans la fonction de bouton de JqueryUI.

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Buttons functionality</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>
      
      <script>
         $(function() {
            $( "#button-6" ).button({
               icons: {
                  primary: "ui-icon-locked"
               },
               text: false
            });
            $( "#button-7" ).button({
               disabled:true
            });
            $( "#button-8" ).button({
               icons: {
                  primary: "ui-icon-gear",
                  secondary: "ui-icon-triangle-1-s"
               }
            });
         });
      </script>
   </head>
   
   <body>
      <button id = "button-6">
         Button with icon only
      </button>
      <button id = "button-7">
         Button Disabled
      </button>
      <button id = "button-8">
         Button with two icons
      </button>
   </body>
</html>

Ici, vous pouvez voir un bouton avec seulement une icône, un bouton avec deux icônes et un bouton désactivé.

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

La méthode button ("action", params) peut effectuer une action sur les boutons, comme la désactivation du bouton. L'action est spécifiée sous forme de chaîne dans le premier argument (par exemple, "désactiver" pour désactiver le bouton). Découvrez les actions qui peuvent être passées, dans le tableau suivant.

Syntaxe

$(selector, context).button ("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é de bouton d'un élément. Les éléments reviennent à leur état pré-init. Cette méthode n'accepte aucun argument. Action - destroy Cette action supprime complètement la fonctionnalité de bouton d'un élément. Les éléments reviennent à leur état pré-init. Cette méthode n'accepte aucun argument. Syntax `$( ".selector" ).button("destroy");`
2	désactiver Cette action désactive la fonctionnalité de bouton d'un élément. Cette méthode n'accepte aucun argument. Action - disable Cette action désactive la fonctionnalité de bouton d'un élément. Cette méthode n'accepte aucun argument. Syntax `$( ".selector" ).button("disable");`
3	activer Cette action active la fonctionnalité de bouton d'un élément. Cette méthode n'accepte aucun argument. Action - enable Cette action active la fonctionnalité de bouton d'un élément. Cette méthode n'accepte aucun argument. Syntax `$( ".selector" ).button("enable");`
4	option (optionName) Cette action récupère la valeur de l'option spécifiée dans optionName . Où optionName est une chaîne. Action - option( optionName ) Cette action récupère la valeur de l'option spécifiée dans optionName . Où optionName est une chaîne. Syntax `var isDisabled = $( ".selector" ).button( "option", "disabled" );`
5	option Cette action récupère un objet contenant des paires clé / valeur représentant le hachage d'options de bouton actuel. Action - option Cette action récupère un objet contenant des paires clé / valeur représentant le hachage d'options de bouton actuel. Syntax `$( ".selector" ).button("option");`
6	option (optionName, valeur) Cette action définit la valeur de l'option de bouton associé à l' endroit spécifié optionName . Action - option( optionName, value ) Cette action définit la valeur de l'option de bouton associé à l' endroit spécifié optionName . Où optionName est le nom de l'option à définir et valeur est la valeur à définir pour l'option. Syntax `$( ".selector" ).button( "option", "disabled", true );`
sept	option (options) Cette action définit une ou plusieurs options pour le bouton. Où options est la carte des paires option-valeur à définir. Action - option( options ) Cette action définit une ou plusieurs options pour le bouton. Où options est la carte des paires option-valeur à définir. Syntax `$( ".selector" ).button( "option", { disabled: true } );`
8	rafraîchir Cette action actualise l'affichage du bouton. Ceci est utile lorsque les boutons sont manipulés par le programme et que l'affichage ne correspond pas nécessairement à l'état interne. Cette méthode n'accepte aucun argument. Action - refresh Cette action actualise l'affichage du bouton. Ceci est utile lorsque les boutons sont manipulés par le programme et que l'affichage ne correspond pas nécessairement à l'état interne. Cette méthode n'accepte aucun argument. Syntax `$( ".selector" ).button("refresh");`
9	widget Cette action renvoie un objet jQuery contenant l'élément button. Cette méthode n'accepte aucun argument. Action - widget Cette action renvoie un objet jQuery contenant l'élément button. Cette méthode n'accepte aucun argument. Syntax `$( ".selector" ).button("widget");`

Exemple

Voyons maintenant un exemple utilisant les actions du tableau ci-dessus. L'exemple suivant illustre l'utilisation des méthodes destroy () et disable () .

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Buttons functionality</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>
      
      <script>
         $(function() {
            $( "#button-9" ).button({
               text: false,
               icons: {
                  primary: "ui-icon-seek-start"
               }
            });
            $( "#button-9" ).button('destroy');
            $( "#button-10" ).button({
               icons: {
                  primary: "ui-icon-seek-prev"
               }
            });
            $( "#button-10" ).button('disable');
            $( "#button-11" ).button({
               text: false,
               icons: {
                  primary: "ui-icon-play"
               }
            });
         });
      </script>
   </head>
   
   <body>
      <button id = "button-9">
         I'm destroyed
      </button>
      <button id = "button-10">   
         I'm disabled
      </button>
      <button id = "button-11">
         play
      </button>
   </body>
</html>

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

Gestion des événements sur les boutons

En plus de la méthode bouton (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 -

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 du bouton. 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 bouton. Où event est de type Event et ui est de type Object . Syntax `$( ".selector" ).button({ create: function( event, ui ) {} });`

Exemple

L'exemple suivant illustre l'utilisation de la méthode d'événement pour la fonctionnalité de widget de bouton. Cet exemple illustre l'utilisation de la création d' événements .

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Buttons functionality</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>
         .resultarea {
            background: #cedc98;
            border-top: 1px solid #000000;
            border-bottom: 1px solid #000000;
            color: #333333;
            font-size:14px;
         }
      </style>
      
      <script>
         $(function() {
            $( "#button-12" ).button({
               create: function() {
                  $("p#result").html ($("p#result")
                  .html () + "<b>created</b><br>");
               }
            });
         });
      </script>
   </head>
   
   <body>
      <button id = "button-12">
         A button element
      </button>
      <p class = "resultarea" id = result></p>
   </body>
</html>

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