JqueryUI - Onglets

Les onglets sont des ensembles de contenu regroupés de manière logique qui nous permettent de passer rapidement de l'un à l'autre. Les onglets nous permettent d'économiser de l'espace comme des accordéons. Pour que les onglets fonctionnent correctement, le jeu de balises suivant doit être utilisé -

Les onglets doivent être dans une liste ordonnée (<ol>) ou non ordonnée (<ul>).
Chaque titre d'onglet doit être dans chaque <li> et entouré d'une balise d'ancrage (<a>) avec un attribut href .
Chaque panneau d'onglets peut être n'importe quel élément valide mais il doit avoir un identifiant , qui correspond au hachage dans l'ancre de l'onglet associé.

jQueryUI nous fournit la méthode tabs () change radicalement l'apparence des éléments HTML à l'intérieur de la page. Cette méthode parcourt (en interne dans jQuery UI) le code HTML et ajoute de nouvelles classes CSS aux éléments concernés (ici, les onglets) pour leur donner le style approprié.

Syntaxe

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

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

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

La méthode tabs (options) déclare qu'un élément HTML et son contenu doivent être gérés sous forme d'onglets. Le paramètre options est un objet qui spécifie l'apparence et le comportement des onglets.

Syntaxe

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

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

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

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


$( ".selector" ).tabs (
   { active: 1 }
);
$( ".selector" ).tabs (
   { collapsible: true }
);
$( ".selector" ).tabs (
   { disabled: [ 0, 2 ] }
);
$( ".selector" ).tabs (
   { event: "mouseover" }
);
$( ".selector" ).tabs (
   { heightStyle: "fill" }
);
$( ".selector" ).tabs (
   { { hide: { effect: "explode", duration: 1000 } } }
);
$( ".selector" ).tabs (
   { show: { effect: "blind", duration: 800 } }
);

N ° Sr.	Option et description
1	actif Cette option spécifie l'onglet / panneau actif actuel. Par défaut, sa valeur est0. Option - active Cette option spécifie l'onglet / panneau actif actuel. Par défaut, sa valeur est0. Cela peut être de type - Boolean- Lorsqu'il est défini sur false , tous les panneaux seront réduits. Cela nécessite que l' option réductible soit vraie . Integer - Index de base zéro du panneau actif (ouvert). Une valeur négative sélectionne les panneaux remontant à partir du dernier panneau. Syntax `$( ".selector" ).tabs ( { active: 1 } );`
2	pliant Cette option définie sur true , elle permet de désélectionner les onglets. Lorsqu'il est défini sur false (par défaut), cliquer sur un onglet sélectionné ne désélectionne pas (il reste sélectionné). Par défaut, sa valeur estfalse. Option - collapsible Cette option définie sur true , elle permet de désélectionner les onglets. Lorsqu'il est défini sur false (par défaut), cliquer sur un onglet sélectionné ne désélectionne pas (il reste sélectionné). Par défaut, sa valeur estfalse. Syntax `$( ".selector" ).tabs ( { collapsible: true } );`
3	désactivée Cette option utilise un tableau pour indiquer les onglets d'index qui sont désactivés (et ne peuvent donc pas être sélectionnés). Par exemple, utilisez [0, 1] pour désactiver les deux premiers onglets. Par défaut, sa valeur estfalse. Option - disabled Cette option utilise un tableau pour indiquer les onglets d'index qui sont désactivés (et ne peuvent donc pas être sélectionnés). Par exemple, utilisez [0, 1] pour désactiver les deux premiers onglets. Par défaut, sa valeur estfalse. Cela peut être de type - Boolean - Activez ou désactivez tous les onglets. Array - Un tableau contenant les index de base zéro des onglets qui devraient être désactivés, par exemple, [0, 2] désactiverait le premier et le troisième onglet. Syntax `$( ".selector" ).tabs ( { disabled: [ 0, 2 ] } );`
4	un événement Cette option est un nom de l'événement qui permet aux utilisateurs de sélectionner un nouvel onglet. Si, par exemple, cette option est définie sur "mouseover", passer la souris sur un onglet le sélectionnera. Par défaut, sa valeur est"click". Option - event Cette option est un nom de l'événement qui permet aux utilisateurs de sélectionner un nouvel onglet. Si, par exemple, cette option est définie sur "mouseover", passer la souris sur un onglet le sélectionnera. Par défaut, sa valeur est"click". Syntax `$( ".selector" ).tabs ( { event: "mouseover" } );`
5	hauteurStyle Cette option contrôle la hauteur du widget onglets et de chaque panneau. Par défaut, sa valeur est"content". Option - heightStyle Cette option contrôle la hauteur du widget onglets et de chaque panneau. Par défaut, sa valeur est"content". Les valeurs possibles sont - auto - Tous les panneaux seront réglés à la hauteur du panneau le plus haut. fill - Développez la hauteur disponible en fonction de la hauteur du parent des onglets. content - Chaque panneau sera seulement aussi grand que son contenu. Syntax `$( ".selector" ).tabs ( { heightStyle: "fill" } );`
6	cacher Cette option spécifie comment animer le masquage du panneau. Par défaut, sa valeur estnull. Option - hide Cette option spécifie comment animer le masquage du panneau. Par défaut, sa valeur estnull. Cela peut être de type - Boolean- Lorsqu'il est défini sur false , aucune animation ne sera utilisée et le panneau sera immédiatement masqué. Number - Le panneau disparaîtra avec la durée spécifiée et l'accélération par défaut. String- Le panneau sera masqué en utilisant l'effet spécifié. La valeur peut être slideUp ou fold Object- Pour ce type, des propriétés effet , délai , durée et assouplissement peuvent être fournis. Syntax `$( ".selector" ).tabs ( { { hide: { effect: "explode", duration: 1000 } } } );`
sept	spectacle Cette option spécifie comment animer l'affichage du panneau. Par défaut, sa valeur estnull. Option - show Cette option spécifie comment animer l'affichage du panneau. Par défaut, sa valeur estnull. Cela peut être de type - Boolean- Lorsqu'il est défini sur false , aucune animation ne sera utilisée et le panneau sera affiché immédiatement. Number - Le panneau disparaîtra avec la durée spécifiée et l'accélération par défaut. String- Le panneau sera affiché en utilisant l'effet spécifié. La valeur peut être slideUp ou fold . Object- Pour ce type, des propriétés effet , délai , durée et assouplissement peuvent être fournis. Syntax `$( ".selector" ).tabs ( { show: { effect: "blind", duration: 800 } } );`

La section suivante vous montrera quelques exemples fonctionnels de fonctionnalités d'onglets.

Fonctionnalité par défaut

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

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Tabs 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() {
            $( "#tabs-1" ).tabs();
         });
      </script>
		
      <style>
         #tabs-1{font-size: 14px;}
         .ui-widget-header {
            background:#b9cd6d;
            border: 1px solid #b9cd6d;
            color: #FFFFFF;
            font-weight: bold;
         }
      </style>
   </head>
	
   <body>
      <div id = "tabs-1">
         <ul>
            <li><a href = "#tabs-2">Tab 1</a></li>
            <li><a href = "#tabs-3">Tab 2</a></li>
            <li><a href = "#tabs-4">Tab 3</a></li>
         </ul>
         <div id = "tabs-2">
            <p>
               Neque porro quisquam est qui dolorem ipsum quia dolor sit 
               amet, consectetur, adipisci velit... 
            </p>
         </div>
         <div id = "tabs-3">
            <p>
               Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
               sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
               Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris 
               nisi ut aliquip ex ea commodo consequat.
            </p>
         </div>
         <div id = "tabs-4">
            <p>
               ed ut perspiciatis unde omnis iste natus error sit 
               voluptatem accusantium doloremque laudantium, totam rem aperiam, 
               eaque ipsa quae ab illo inventore veritatis et quasi architecto 
               beatae vitae dicta sunt explicabo.
            </p>	
            <p>
               Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
               sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
               Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris 
               nisi ut aliquip ex ea commodo consequat.
            </p>
         </div>
      </div>
   </body>
</html>

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

Dans l'exemple ci-dessus, cliquez sur les onglets pour passer d'un contenu à l'autre.

Utilisation de heightStyle, pliable et hide

L'exemple suivant illustre l'utilisation de trois options (a) heightStyle (b) collapsible, et (c) hide dans la fonction onglets de JqueryUI.

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Tabs 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() {
            $( "#tabs-5" ).tabs({
               heightStyle:"fill",
               collapsible:true,
               hide:"slideUp"
            });
         });
      </script>
		
      <style>
         #tabs-5{font-size: 14px;}
         .ui-widget-header {
            background:#b9cd6d;
            border: 1px solid #b9cd6d;
            color: #FFFFFF;
            font-weight: bold;
         }
      </style>
   </head>
	
   <body>
      <div id = "tabs-5">
         <ul>
            <li><a href = "#tabs-6">Tab 1</a></li>
            <li><a href = "#tabs-7">Tab 2</a></li>
            <li><a href = "#tabs-8">Tab 3</a></li>
         </ul>
         <div id = "tabs-6">
            <p>Neque porro quisquam est qui dolorem ipsum quia dolor 
               sit amet, consectetur, adipisci velit...
            </p>
         </div>
         <div id = "tabs-7">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
               sed do eiusmod tempor incididunt ut labore et dolore magna 
               aliqua. Ut enim ad minim veniam, quis nostrud exercitation 
               ullamco laboris nisi ut aliquip ex ea commodo consequat.
            </p>
         </div>
         <div id = "tabs-8">
            <p>
               ed ut perspiciatis unde omnis iste natus error sit voluptatem 
               accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae 
               ab illo inventore veritatis et quasi architecto beatae vitae dicta 
               sunt explicabo.
            </p>
            <p>
               Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
               sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
               Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris 
               nisi ut aliquip ex ea commodo consequat.
            </p>
         </div>
      </div>
   </body>
</html>

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

Cliquez sur l'onglet sélectionné pour basculer son contenu fermé / ouvert. Vous pouvez également voir l'effet d'animation "slideUp" lorsque l'onglet est fermé.

Utilisation de l'événement

L'exemple suivant illustre l'utilisation de trois options event dans la fonction onglets de JqueryUI.

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Tabs 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() {
            $( "#tabs-9" ).tabs({
               event:"mouseover"
            });
         });
      </script>
		
      <style>
         #tabs-9{font-size: 14px;}
         .ui-widget-header {
            background:#b9cd6d;
            border: 1px solid #b9cd6d;
            color: #FFFFFF;
            font-weight: bold;
         }
      </style>
   </head>
	
   <body>
      <div id = "tabs-9">
         <ul>
            <li><a href = "#tabs-10">Tab 1</a></li>
            <li><a href = "#tabs-11">Tab 2</a></li>
            <li><a href = "#tabs-12">Tab 3</a></li>
         </ul> 
         <div id = "tabs-10">
            <p>Neque porro quisquam est qui dolorem ipsum quia dolor 
               sit amet, consectetur, adipisci velit... </p>
         </div>
         <div id = "tabs-11">
            <p>
               Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
               sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
               Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris 
               nisi ut aliquip ex ea commodo consequat.
            </p>
         </div>
         <div id = "tabs-12">
            <p>
               ed ut perspiciatis unde omnis iste natus error sit 
               voluptatem accusantium doloremque laudantium, totam rem aperiam, 
               eaque ipsa quae ab illo inventore veritatis et quasi architecto 
               beatae vitae dicta sunt explicabo.
            </p>
            <p>
               Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
               sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
               Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris 
               nisi ut aliquip ex ea commodo consequat.
            </p>
         </div>
      </div>
   </body>
</html>

Dans l'exemple ci-dessus, basculez les sections ouvertes / fermées avec la souris sur les onglets.

$ (selector, context) .tabs ("action", params), méthode

La méthode tabs ("action", params) permet une action sur les onglets (via un programme JavaScript), la sélection, la désactivation, l'ajout ou la suppression d'un onglet. L'action est spécifiée sous forme de chaîne dans le premier argument (par exemple, «ajouter» pour ajouter un nouvel onglet). Découvrez les actions qui peuvent être passées, dans le tableau suivant.

Syntaxe

$(selector, context).tabs ("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 détruit complètement la fonctionnalité des onglets d'un élément. Les éléments reviennent à leur état pré-init. Cette méthode n'accepte aucun argument. Action - destroy Cette action détruit complètement la fonctionnalité des onglets d'un élément. Les éléments reviennent à leur état pré-init. Cette méthode n'accepte aucun argument. Syntax `$( ".selector" ).tabs("destroy");`
2	désactiver Cette action désactive tous les onglets. Cette méthode n'accepte aucun argument. Action - disable Cette action désactive tous les onglets. Cette méthode n'accepte aucun argument. Syntax `$( ".selector" ).tabs("disable");`
3	désactiver (index) Cette action désactive l'onglet spécifié. Où index est l'onglet à désactiver. Action - disable( index ) Cette action désactive l'onglet spécifié. Où index est l'onglet à désactiver. Pour désactiver plusieurs onglets à la fois, définissez l'option désactivée: $ ("#tabs") .tabs ("option", "disabled", [1, 2, 3]). Syntax `$( ".selector" ).tabs( "disable", 1 );`
4	activer Cette action active tous les onglets. Cette signature n'accepte aucun argument. Action - enable Cette action active tous les onglets. Cette signature n'accepte aucun argument. Syntax `$( ".selector" ).tabs("enable");`
5	activer (index) Cette action active un onglet spécifié. Où index est l'onglet à activer. Action - enable( index ) Cette action active un onglet spécifié. Où index est l'onglet à activer. Pour activer plus d'un onglet à la fois, réinitialisez la propriété désactivée comme: $ ("#example") .tabs ("option", "disabled", []) ;. Syntax `$( ".selector" ).tabs( "enable", 1 );`
6	charge (index) Cette action force un rechargement de l'onglet indexé, ignorant le cache. Où index est l'onglet à charger. Action - load( index ) Cette action force un rechargement de l'onglet indexé, ignorant le cache. Où index est l'onglet à charger. Syntax `$( ".selector" ).tabs("load", 1);`
sept	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" ).tabs( "option", "disabled" );`
8	option Cette action obtient un objet contenant des paires clé / valeur représentant le hachage des options des onglets actuels. Action - option Cette action obtient un objet contenant des paires clé / valeur représentant le hachage des options des onglets actuels. Cette méthode n'accepte aucun argument. Syntax `$( ".selector" ).tabs("option");`
9	option (optionName, valeur) Cette action définit la valeur de l'option des onglets associés à la spécifiée 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 des onglets associés à la spécifiée optionName . L'argument optionName est le nom de l'option à définir et value est la valeur à définir pour l'option. Syntax `$( ".selector" ).tabs( "option", "disabled", true );`
dix	option (options) Cette action définit une ou plusieurs options pour les onglets. Action - option( options ) Cette action définit une ou plusieurs options pour les onglets. Syntax `$( ".selector" ).tabs( "option", { disabled: true } );`
11	rafraîchir Cette action recalcule la hauteur des panneaux d'onglets lorsque des onglets ont été ajoutés ou supprimés directement dans le DOM. Les résultats dépendent du contenu et de l' option heightStyle . Action - refresh Cette action recalcule la hauteur des panneaux d'onglets lorsque des onglets ont été ajoutés ou supprimés directement dans le DOM. Les résultats dépendent du contenu et de l' option heightStyle . Syntax `$( ".selector" ).tabs( "refresh" );`
12	widget Cette action renvoie l'élément servant de widget onglets, annoté avec le nom de la classe ui-tabs . Action - widget Cette action renvoie l'élément servant de widget onglets, annoté avec le nom de la classe ui-tabs . Syntax `var widget = $( ".selector" ).tabs( "widget" );`

Utilisation de la désactivation de l'action ()

Voyons maintenant un exemple utilisant les actions du tableau ci-dessus. L'exemple suivant illustre l'utilisation de la méthode disable () .

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Tabs 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() {
            $( "#tabs-13" ).tabs();
            $( "#tabs-13" ).tabs("disable");
         });
      </script>
		
      <style>
         #tabs-13{font-size: 14px;}
         .ui-widget-header {
            background:#b9cd6d;
            border: 1px solid #b9cd6d;
            color: #FFFFFF;
            font-weight: bold;
         }
      </style>
   </head>
	
   <body>
      <div id = "tabs-13">
         <ul>
            <li><a href = "#tabs-14">Tab 1</a></li>
            <li><a href = "#tabs-15">Tab 2</a></li>
            <li><a href = "#tabs-16">Tab 3</a></li>
         </ul>
         <div id = "tabs-14">
            <p>
               Neque porro quisquam est qui dolorem ipsum quia dolor 
               sit amet, consectetur, adipisci velit...
            </p>
         </div>
         <div id = "tabs-15">
            <p>
               Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
               sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
               Ut enim ad minim veniam, quis nostrud exercitation ullamco
               laboris nisi ut aliquip ex ea commodo consequat.
            </p>
         </div>
         <div id = "tabs-16">
            <p>
               ed ut perspiciatis unde omnis iste natus error sit 
               voluptatem accusantium doloremque laudantium, totam rem aperiam, 
               eaque ipsa quae ab illo inventore veritatis et quasi architecto 
               beatae vitae dicta sunt explicabo.
            </p>
            <p>
               Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
               sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
               Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris 
               nisi ut aliquip ex ea commodo consequat.
            </p>
         </div>
      </div>
   </body>
</html>

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

Ici, vous pouvez voir que tous les onglets sont désactivés.

Utilisation de la désactivation de l'action (index)

Voyons maintenant un exemple utilisant les actions du tableau ci-dessus. L'exemple suivant illustre l'utilisation de la méthode disable (index) .

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Tabs 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() {
            $( "#tabs-17" ).tabs();
            $( "#tabs-17" ).tabs("disable",2);
         });
      </script>
		
      <style>
         #tabs-17{font-size: 14px;}
         .ui-widget-header {
            background:#b9cd6d;
            border: 1px solid #b9cd6d;
            color: #FFFFFF;
            font-weight: bold;
         }
      </style>
   </head>
	
   <body>
      <div id = "tabs-17">
         <ul>
            <li><a href = "#tabs-18">Tab 1</a></li>
            <li><a href = "#tabs-19">Tab 2</a></li>
            <li><a href = "#tabs-20">Tab 3</a></li>
         </ul>
         <div id = "tabs-18">
            <p>
               Neque porro quisquam est qui dolorem ipsum quia dolor 
               sit amet, consectetur, adipisci velit...
            </p>
         </div>
         <div id = "tabs-19">
            <p>
               Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
               sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
               Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris 
               nisi ut aliquip ex ea commodo consequat.
            </p>
         </div>
         <div id = "tabs-20">
            <p>
               ed ut perspiciatis unde omnis iste natus error sit voluptatem 
               accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae 
               ab illo inventore veritatis et quasi architecto beatae vitae dicta 
               sunt explicabo.
            </p>	
            <p>
               Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
               sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
               Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi 
               ut aliquip ex ea commodo consequat.
            </p>
         </div>
      </div>
   </body>
</html>

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

Dans l'exemple ci-dessus, vous remarquez que l'onglet 3 est désactivé.

Gestion des événements sur les éléments des onglets

En plus de la méthode tabs (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" ).slider({
   activate: function( event, ui ) {}
});
$( ".selector" ).slider({
   beforeActivate: function( event, ui ) {}
});
$( ".selector" ).slider({
   beforeLoad: function( event, ui ) {}
});
$( ".selector" ).slider({
   create: function( event, ui ) {}
});
$( ".selector" ).slider({
   load: function( event, ui ) {}
});

N ° Sr.	Méthode d'événement et description
1	activer (événement, ui) Cet événement est déclenché après l'activation de l'onglet (après la fin de l'animation). Event - activate(event, ui) Cet événement est déclenché après l'activation de l'onglet (après la fin de l'animation). Où event est de type Event et ui est de type Object . Les valeurs possibles de ui sont - newTab - L'onglet qui vient d'être activé. oldTab - L'onglet qui vient d'être désactivé. newPanel - Le panneau qui vient d'être activé. oldPanel - Le panneau qui vient d'être désactivé. Syntax `$( ".selector" ).slider({ activate: function( event, ui ) {} });`
2	beforeActivate (événement, interface utilisateur) Cet événement est déclenché avant l'activation de l'onglet. Event - beforeActivate(event, ui) Cet événement est déclenché avant l'activation de l'onglet. Où event est de type Event et ui est de type Object . Les valeurs possibles de ui sont - newTab - L'onglet sur le point d'être activé. oldTab - L'onglet sur le point d'être désactivé. newPanel - Le panneau est sur le point d'être activé. oldPanel - Le panneau est sur le point d'être désactivé. Syntax `$( ".selector" ).slider({ beforeActivate: function( event, ui ) {} });`
3	beforeLoad (événement, interface utilisateur) Cet événement est déclenché lorsqu'un onglet distant est sur le point d'être chargé, après l' événement beforeActivate . Cet événement est déclenché juste avant la demande Ajax. Event - beforeLoad(event, ui) Cet événement est déclenché lorsqu'un onglet distant est sur le point d'être chargé, après l' événement beforeActivate . Cet événement est déclenché juste avant la demande Ajax. Où event est de type Event et ui est de type Object . Les valeurs possibles de ui sont - tab - L'onglet en cours de chargement. panel - Le panneau qui sera peuplé par la réponse Ajax. jqXHR- L' objet jqXHR qui demande le contenu. ajaxSettings- Les paramètres qui seront utilisés par jQuery.ajax pour demander le contenu. Syntax `$( ".selector" ).slider({ beforeLoad: function( event, ui ) {} });`
4	create (événement, interface utilisateur) Cet événement est déclenché lors de la création des onglets. Event - create(event, ui) Cet événement est déclenché lors de la création des onglets. Où event est de type Event et ui est de type Object . Les valeurs possibles de ui sont - tab - L'onglet actif. panel - Le panneau actif. Syntax `$( ".selector" ).slider({ create: function( event, ui ) {} });`
5	load (événement, interface utilisateur) Cet événement est déclenché après le chargement d'un onglet distant. Event - load(event, ui) Cet événement est déclenché après le chargement d'un onglet distant. Où event est de type Event et ui est de type Object . Les valeurs possibles de ui sont - tab - L'onglet qui vient d'être chargé. panel - Le panneau qui vient d'être rempli par la réponse Ajax. Syntax `$( ".selector" ).slider({ load: function( event, ui ) {} });`

Exemple

L'exemple suivant illustre l'utilisation de la méthode d'événement dans les widgets d'onglets. Cet exemple illustre l'utilisation d'événements d' activation et de création .

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Tabs 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() {
            $( "#tabs-21" ).tabs({
               activate: function( event, ui ) {
                  var result = $( "#result-2" ).empty();
                  result.append( "activated" );
               },
               create: function( event, ui ) {
                  var result = $( "#result-1" ).empty();
                  result.append( "created" );
               }
            });
         });
      </script>
		
      <style>
         #tabs-21{font-size: 14px;}
         .ui-widget-header {
            background:#b9cd6d;
            border: 1px solid #b9cd6d;
            color: #FFFFFF;
            font-weight: bold;
         }
         .resultarea {
            background: #cedc98;
            border-top: 1px solid #000000;
            border-bottom: 1px solid #000000;
            color: #333333;
            font-size:14px;
         }
      </style>
   </head>
	
   <body>
      <div id = "tabs-21">
         <ul>
            <li><a href = "#tabs-22">Tab 1</a></li>
            <li><a href = "#tabs-23">Tab 2</a></li>
            <li><a href = "#tabs-24">Tab 3</a></li>
         </ul>
         <div id = "tabs-22">
            <p>
               Neque porro quisquam est qui dolorem ipsum quia dolor 
               sit amet, consectetur, adipisci velit...
            </p>
         </div>
         <div id = "tabs-23">
            <p>
               Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
               sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
               Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris 
               nisi ut aliquip ex ea commodo consequat.
            </p>   
         </div>
         <div id = "tabs-24">
            <p>
               ed ut perspiciatis unde omnis iste natus error sit voluptatem 
               accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae 
               ab illo inventore veritatis et quasi architecto beatae vitae dicta 
               sunt explicabo.
            </p>
            <p>
               Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
               sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut 
               enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi 
               ut aliquip ex ea commodo consequat.
            </p>
         </div>
      </div><br>
      
      <span class = "resultarea" id = result-1></span><br>
      <span class = "resultarea" id = result-2></span>
   </body>
</html>

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

Cliquez sur les onglets pour voir un message imprimé ci-dessous sur des événements spécifiques.