22
janv. 08
Accordion : un système d'onglets animés en DHTML
Par Guillaume BIZET | Lien permanent
Accordion est un système d'onglets animés en ajax DHTML. Il vient de passer en V2.
Ce système de navigation entre les onglets confère un coté très classe un menu par exemple 
Comme son nom l'indique le changement entre les différents onglets se fait à la manière d'un accordéon. pour mieux vous rendre compte du résultats que cela peu avoir, je vous laisse le soi d'aller regarder la démo du script sur le site officiel de Accordion v2
Comme vous pouvez le voir sur les screenshots ci-dessous les système d'accordéon marche aussi bien horizontalement que verticalement
Cliquez sur les images pour les voir en grand
Voici ce que vous devez faire pour le faire fonctionner :
Insérez ce code entre les balises <head> et </head>
<script type="text/javascript" src="javascript/prototype.js"></script>
<script type="text/javascript" src="javascript/effects.js"></script>
<script type="text/javascript" src="javascript/accordion.js"></script>
Il vous faudra utiliser la sémantique ci dessous pour que cela fonctionne
<h2 class="accordion_toggle">Title Bar</h2>
<div class="accordion_content">...</div>
...
<h2 class="accordion_toggle">Title Bar</h2>
<div class="accordion_content">...</div>
Enfin vous pouvez régler les effets en modifiant le script accordion.js
// The speed of the accordion
resizeSpeed : 8,
// The classnames to look for
classNames : {
// The standard class for the title bar
toggle : 'accordion_toggle',
// The class used for the active state of the title bar
toggleActive : 'accordion_toggle_active',
// The class used to find the content
content : 'accordion_content'
},
// If you don't want the accordion to stretch to fit
// its content, set a value here, handy for horixontal examples.
defaultSize : {
height : null,
width : null
},
// The direction of the accordion
direction : 'vertical',
// Should the accordion activate on click or say on mouseover? (apple.com)
onEvent : 'click'
Voilà, faites en bonne utilisation ...
J'adore ce genre de script, cela me donne des idées pour un futur thème par exemple. Et vous, ça vous inspire ?
Suite à la pr"cision de Luc dans les commentaires, j'ai modifié le titre et le billet en conséquence. Merci Luc






































Commentaires
ShadowKris
22/01/2008 - 10:38
Arg, 33 Ko de JS juste pour un "accordion" c'est un peu lourd quand on sait que la (magnifique) librairie Moo.fx (voir Mootools pour plus d'effets) le gère déjà depuis 2 ans avec d'autres effets pour seulement 8Ko de JS ^^
Luc
22/01/2008 - 11:42
Accessoirement, et pour ne pas nuire à la qualité de l'info.
Il ne s'agis pas d'AJAX, mais de DHTML
en effet, l'ajax, impose une relation coté serveur, or la il n'y en à pas, toutes les données sont chargées initialement.
Voila voila, il faut rendre à césar ce qui est à césar.
ce n'est pas un script 2.0 (ajax) mais 1.0 qui est bien mis en forme
lol :p:p:p
Chris
26/03/2008 - 20:25
Formidable merci Guillaume
, j'viens de placer celui sur mon theme j'aimerais savoir comment faire pour placer des sous menu accordion verticaux entre ceux horizontaux ?