Il y a quelques mois, je me suis amusé à transformer mon script javascript maison qui me permet d’afficher certaines zones de textes sur le site, notamment dans les articles de la catégorie Anime/Série.
Étant donné que JQuery est présent sur toutes les pages du site, j’ai adapté le script pour qu’il utilise jQuery. Cela fera aussi une librairie maison de moins à maintenir (et à charger).
Un script Javascript répondant à des besoins précis
J’écris pas mal de code afin de répondre à mes besoins sur le site, le but étant de me simplifier la vie au maximum. Dans certains articles, il existe des zones de textes qui ne sont pas tout public et qui nécessitent une authentification préalable à leur lecture. La zone de texte doit apparaître lorsque l’on clique sur un des liens présents dans l’article.
Démo
Pour voir ce script en action, il suffit de cliquer sur ce lien.
Le script
- Commencez par inclure JQuery dans l’entête de votre page (head) – comme ceci :
1 2 3
<head> <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js'></script> </head>
- Ensuite, il ne vous reste plus qu’à inclure le script dans le corps de votre page (body) :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25
<script type='text/javascript'> /* <![CDATA[ */ /* |----------------------------------------------------------------------- | jQuery Toggle Script by Matt - skyminds.net |----------------------------------------------------------------------- | | Affiche/cache le contenu d'un bloc une fois qu'un lien est cliqué. | */ // On attend que la page soit chargée jQuery(document).ready(function() { // On cache la zone de texte jQuery('#toggle').hide(); // toggle() lorsque le lien avec l'ID #toggler est cliqué jQuery('a#toggler').click(function() { jQuery('#toggle').toggle(400); return false; }); }); /* ]]> */ </script>
- Voici maintenant le code HTML à placer dans votre page. Commençons par le lien :
1
<a href="#" id="toggler">Cliquez sur ce lien</a>.
- On enchaîne avec la zone de texte :
1 2
<div id="toggle" style="display:none;">Ce texte apparaît grâce à un script javascript écrit pour JQuery et utilise la fonction <code>toggle()</code>. </div>
- Il ne vous reste plus qu’à ajouter une ligne de CSS pour styliser l’ID #toggle :
#toggle{height:auto; background:#eee; border:1px solid #900; margin:1em;text-align:center} #toggle p{text-align:center;padding:0}
Explications
Le script en lui-même est toujours aussi simple : le contenu du bloc est caché par défaut au chargement de la page. Lorsque le visiteur clique sur le lien, le contenu est affiché avec un petit effet coulissant.
Simple et efficace.
Passionné par tout ce qui touche le webdesign, la programmation, la littérature et l'histoire, la musique et guitare en particulier. Je suis enseignant et responsable éditorial du site. Vous pouvez me contacter ici.Auteur de l'article : Matt
Matt a écrit 2041 articles sur SkyMinds.Net.
