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 présentées ci-après :

  1. Ajout dans la page concernée du identifié "onglets" ;

  2. Modification du script js vu à la page "ajouter un script" ;

  3. Modification du fichier d'extension ".libraries.yml" du thème.

Billet créé le :
21 nov 2020

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, et correspond donc au contenu de l'onglet "onglet" ci-dessous :

Cliquez sur le bouton pour copier le code dans le presse papier 
     
 <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 -->

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 "ajouter un script" pour que 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 mon thè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 cœur à partir de la version 8 de Drupal, 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