ScrollBar

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

Pour ajouter les scrolbars (ascenceurs) qui figurent dans certaines page du site, j'ai suivi les étapes suivantes :

  1. Ajouter dans la page un bloc de contenu identifié "contenu"
  2. Modifier le script js vu à la page "ajouter un script"
  3. Modifier le fichier libraries.yml du thême
Billet créé le :
21 nov 2020

1. le bloc "clipSnippet"

information complémentaireAttention : le mot clé (la classe au sens HTML-CSS du terme) "clipSnippet" que j'utilise peut être remplacé par un terme de votre choix. Si vous utilisez, un autre terme pensez à porter cette modification dans le code à ajouter au script.

Pour encadrer  un contenu de scrollbars, je dois simplement placer ce contenu  dans la balise <div id="clipSnippet">, ce qui donne cette forme :

<div class="clipSnippet"
          <!-- la suite du contenu apparaitra encadrée de scrollbars -->
</div>

2. la modification du script

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

        $(".clipSnippet").mCustomScrollbar({
                axis:"xy",// horizontal scrollbar
                theme:"rounded-dark",
                scrollbarPosition: "outside",
                advanced:{ autoExpandHorizontalScroll:true }
        });

NB : penser à exécuter les étapes 4 - 5 et 6  vues à 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 section js.

             js/jquery.mCustomScrollbar.concat.min.js: { minified: true }

  • la ligne suivante de la sous-section component de la section css

           css/jquery.mCustomScrollbar.min.css: { minified: true }

Dans monthème, ces sections sont reprises ci-dessous

 css:
    component :
               css/monstyle.css
               css/jquery.mCustomScrollbar.min.css: { minified: true }

js:
     js/monScript.js: {}
     js/jquery.mCustomScrollbar.concat.min.js: { minified: true }
  dependencies:
    - jquery_ui/core
    - jquery_ui_tooltip/tooltip
    - jquery_ui_tabs/tabs
    - jquery_ui_accordion/accordion