Les onglets

Pour comprendre ce qui suit, une (re)lecture des pages du chapitre DevWeb_jQuery du site peut être souhaitable :

Pour ajouter les onglets qui figurent dans certaines page du site, j'ai suivi les étapes suivantes :

  1. Ajouter dans la page un bloc de contenu identifié "onglets"
  2. Modifier le script js vu à la page précédante.
  3. Modifier le fichier libraries.yml du thême

1. le bloc "les Onglets"

Attention : l'identifiant (au sens HTML-CSS du terme) "onglets" que j'utilise peut être remplacé par un terme de votre choix. Si vous utilisez, un autre identifiant pensez à porter cette modification dans le code à ajouter au script.

Pour créer des onglets, je dois créer un contenu HTML qui a la structure vue ici, donc de la forme

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

2. la modification du script

Dans la fonction
       function (context, settings) {...}
il suffit j'ajouter la portion de code

      $( "#onglets" ).tabs();

NB : penser à exécuter les étapes 4 - 5 et 6  vu à la page précédente qui votre modification soit visible.

3. la modication de la librairie

Dans le fichier xxx.lbrairies.yml (xxx représente le nom de votre thème), ajouter la ligne suivante dans la sous-section dependencies de la section js.

            - jquery_ui_tabs/tabs

Dans monthème, cette section est reprise ci-dessous

  js:
    js/monScript.js: {}
  dependencies:
    - jquery_ui/core
    - jquery_ui_tooltip/tooltip
    - jquery_ui_tabs/tabs
    - jquery_ui_accordion/accordion

NB : si vous utilisez les bibliothèques jQuery intégrées au coeur de D8, cette section devrait être la suivante :

  js:
    js/dhv3.js: {}
  dependencies:
    - core/jquery
    - core/jquery.ui.tooltip
    - core/jquery.ui.tabs
    - core/jquery.ui.accordion
  

Mots Clé Système