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

Aperçu en live à tester

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.

Les fichiers

Le script "index.js", dont le code est affiché dans l'onglet script .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>)

Le script ci-dessous 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 );

  Cette portion de code est utilisée pour l'affichage des onglets de présentation de la variante ci-dessus où seul l'onglet "script .JS" est actif.