Les onglets

Ce billet relate les éléments essentiels permettant la réalisation grâce à la bibliothèque Jquery UI d'un menu à onglets. Il s'appuie sur la documentation  officielle consultable ici.

Cet exemple s'appuie sur 2 fichiers qui s'exécutent côté client : index.html et index.js

Les fichiers ( et démo en direct des onglets !)

Cliquez sur le bouton pour copier le code
dans le presse papier
    
<html>
   <head>
       <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
       <title>Menu à onglets</title>
       <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/cupertino/jquery-ui.css">
       <!--   les scripts ------------------>
       <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
       <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
       <script src="index.js"></script>
   </head>
<body>  
     <div>
       <div id="onglets">
           <ul>
               <li title="onglet-0"><a href="#onglet-0">onglet 0</a></li>
               <li title="onglet-1"><a href="#onglet-1">onglet 1</a></li>
               <li title="onglet-2"><a href="#onglet-2">onglet 2</a></li>
            </ul>
            <div id="onglet-0">
                <!--contenu qui s affiche dans cet onglet -->
                je m'affiche dans l'onglet 0
           </div>
            <div id="onglet-1">
               <!--contenu qui s affiche dans cet onglet -->
                je m'affiche dans l'onglet 1
            </div>
            <div id="onglet-2">
                 <!--contenu qui s affiche dans cet onglet -->
                 je m'affiche dans l'onglet 2
             </div>
         </div> <!-- fin des onglets -->
     </div>
 </body>
</html>
Cliquez sur le bouton pour copier le code
dans le presse papier
    
$(function(){
    $( "#onglets" ).tabs({
    });
 });
     

Cliquer ici pour afficher ces fichiers dans une fenêtre surgissante

Le fichier index.html produit l'affichage ci-contre.
Dans l' entête s'effectue la liaison avec les "bibliothèques" CSS '(thême Cupertino)  et javascript ( jquery.js , jqueryui.js), ainsi que le lien avec notre script index.js.

Le script "index.js" se contente de définir le contenu de la méthode tabs() de la bibliothèque jquery-ui. Dans ce script, la méthode est appliquée sur la balise div identifiée "onglets" définie dans le fichier index.html ( <div id="onglets"> </div>)

information complémentaire disponible en cliquant iciUne variante du script

Cliquez sur le bouton pour copier le code
dans le presse papier

   
$(function(){
             $( "#onglets" ).tabs( "option", "disabled", [ 0, 2, 3 ] );
             $("#onglets" ).tabs( "option", "active", 1 );
 });
     

 

quelques explications

Le script ci-dessus est une variante dans laquelle certaines propriétés de la méthode sont définies.

Quelques autres propriétés intéressantes de cette méthode :

  •     disabled: [ 1, 2 ], // entre crochets les index des onglets à dévalider.
  •     collapsible : true, // "cache" le contenu de l'onglet  actif lors du clic
  •     active : 2, // l'onglet d'index 2 (le n° 3) est affiché lors de l'ouverture de la page

Dans la portion de code ci-dessous, les onglets d'index 0, 2 ; 3 sont "grisés et donc inactifs, la page s'ouvre sur l'onglet d'index1

            $( "#onglets" ).tabs( "option", "disabled", [ 0, 2, 3 ] );
            $("#onglets" ).tabs( "option", "active", 1 );


Mots Clé