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

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>

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.

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