Aller au contenu principal


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