Mootools en 30 jours : jour 17 - Accordion

I. Introduction aux accordéons

Si vous ne l'avez pas encore fait, assurez-vous d'avoir lu les tutoriels Mootools 1.2 précédents de notre série de 30 jours.

Pour poursuivre avec nos tutoriels sur la librairie de plugin  “more”, aujourd'hui nous allons regarder à ce qui est peut-être le plugin le plus populaire, à savoir accordion. La création et la configuration d'un accordéon basique est simple, mais lisez tout attentivement, car les options avancées peuvent être un peu plus complexes.

II. Explications

Les Bases

Créer un nouvel accordéon

Pour créer un nouvel accordéon, vous allez devoir sélectionner une paire d'éléments, le titre et le contenu. Donc tout d'abord, assignez une classe à chaque titre et une classe à chaque élément de contenu :

Toggle 1


Voici le contenu de toggle 1


Toggle 2


Voici le contenu de toggle 2

Maintenant nous pouvons sélectionner tous les éléments avec la classe “togglers” et tous les éléments avec la classe “elements,” les envoyer dans des variables, puis créer un nouvel objet accordéon.

var toggles = $$('.togglers');
var content = $$('.elements');
 
//définissez votre variable objet
//créez un "new" objet Accordion
//définissez le tableau des "toggles"
//définissez le tableau des "content"
var AccordionObject = new Accordion(toggles, content);

Ces paramètres par défaut pour créer un accordéon vous donneront quelque chose qui ressemblera à ça :

Toggle 1

Voici le contenu de toggle 1

Toggle 2
Toggle 3


Les Options

Bien entendu, si vous voulez autre chose que l'accordéon par défaut, vous allez devoir ajuster quelques options. Nous allons explorer chacune d'entre elles :

display

Par défaut : 0

Cette option détermine quelle élément est affiché au chargement de la page. La valeur par défaut est 0, donc le premier élément s'affichera. Pour configurer un autre élément, mettez juste un autre nombre qui correspond à son index. A l'inverse de “show,” display effectuera une transition de l'élément ouvert.

var AccordionObject = new Accordion(toggles, content { 
display: 0 // 0 par défaut
});

show

Par défaut : 0

Tout comme “display,” show détermine l'élément qui doit être ouvert au chargement de la page, mais au lieu de faire une transition, “show” fera juste afficher le contenu au chargement sans transition.

var AccordionObject = new Accordion(toggles, content { 
display: 0 // 0 par défaut
});

height

Par défaut : true

Quand c'est mis sur true, le contenu s'affichera avec une transition de hauteur. C'est la configuration par défaut d'accordion que vous voyez ci-dessus.

var AccordionObject = new Accordion(toggles, content { 
height: true //default is true
});

width

Par défaut : false

Comme “height,” mais au lieu de faire la transition sur la hauteur pour afficher le contenu, cela fera une transition sur la largeur. Si vous utilisez “width” avec un paramètrage par défaut, comme celui ci-dessus, alors l'espace entre le titre restera le même, en se basant sur la hauteur du contenu. Le div “content” fera alors une transition de la gauche vers la droite pour s'afficher dans cet espace.

var AccordionObject = new Accordion(toggles, content { 
width: false // false par défaut
});

opacity

Default is true

This option sets whether or not to show an opacity transition effect when you hide and display content. Since we are using the default options above, you can see the effect there.

var AccordionObject = new Accordion(toggles, content { 
opacity: true //default is true
});

fixedHeight

Par défaut : false

Pour définir une hauteur fixe, vous pouvez mettre un nombre entier ici (par exemple, vous pouvez mettre 100 pour dire 100px de hauteur). Cela doit être utilisé avec un propriété CSS overflow si vous avez prévu d'avoir une hauteur fixe plus petite que la hauteur naturelle du contenu. Cela fonctionne comme prévu,  bien que ça n'ait pas l'air de s'enregistrer si vous utilisez l'option “show” au premier chargement de la page.

var AccordionObject = new Accordion(toggles, content { 
fixedHeight: false // false par défaut
});

fixedWidth

Par défaut : false

Tout comme “fixedHeight” ci-dessus, cela définira la largeur si vous mettez un nombre entier dans cette option.

var AccordionObject = new Accordion(toggles, content { 
fixedWidth: false // false par défaut
});

alwaysHide

Par défaut : false

Cette option vous permet d'ajouter un contrôle toggle sur les titres. Avec cela définit sur true, quand vous cliquez sur le titre d'un contenu ouvert, cela fermera cet élément de contenu sans ouvrir quoi que ce soit d'autre. Vous pouvez le voir en action dans l'exemple complet plus bas..

var AccordionObject = new Accordion(toggles, content { 
alwaysHide: false // false par défaut
});


Les Evènements

onActive

Cela se lancera quand vous ouvrirez un élément. Cela passera l'élément toggle de contrôle et l'élément de contenu qui s'ouvre avec des paramètres.

var AccordionObject = new Accordion(toggles, content { 
onActive: function(toggler, element) {
toggler.highlight('#76C83D'); //vert
element.highlight('#76C83D');
}
});

onBackground

Cela se lancera quand un élément commence à se fermer et passera tous les autres éléments qui sont en train de se fermer, mais pas ceux qui s'ouvrent.

var AccordionObject = new Accordion(toggles, content { 
onBackground: function(toggler, element) {
toggler.highlight('#DC4F4D'); //rouge
element.highlight('#DC4F4D');
}
});

onComplete

Cela est votre évènement onComplete standard. Il passe une variable contenant l'élément de contenu. Il y a peut-être une meilleure façon de les obtenir, si quelqu'un en sait plus qu'il me le fasse savoir.

var AccordionObject = new Accordion(toggles, content { 
onComplete: function(one, two, three, four){
one.highlight('#5D80C8'); //bleu
two.highlight('#5D80C8');
three.highlight('#5D80C8');
four.highlight('#5D80C8');
}
});


Méthodes

.addSection();

Avec cette méthode, vous pouvez ajouter une section (une paire d'élément titre/contenu). Cela fonctionne comme beaucoup d'autres méthodes que nous avons vues. Tout d'abord faites référence à l'objet accordion, ajoutez .addSection, puis appelez l'id du titre, l'id du contenu, et enfin précisez la position à laquelle vous souhaitez voir apparaître le nouveau contenu (0 étant la première).

AccordionObject.addSection('togglersID', 'elementsID', 2);

Note: Quand vous ajoutez une section comme celle-ci, bien qu'elle s'affiche comme étant l'index 2, la position actuelle sera de +1. Donc si vous avez 5 éléments dans votre tableau (0-4) et que vous en ajoutez un 6ème, son index serait 5 peu importe où vous l'avez ajouter avec .addSection();

.display();

Cela vous permet d'ouvrir un élément donné. Vous pouvez sélectionner l'élément par son index (donc si vous avez ajouté une paire d'éléments et que vous voulez les afficher, vous aurez un index différent ici que celui utilisé ci-dessus).

AccordionObject.display(5); //affichera le nouvel élément ajouté



Exemple

Voici un "accordéon" pleinement fonctionnel utilisant tous les évènements et méthodes que nous avons vu plus haut, ainsi que beaucoup d'options. Amusez vous avec l'exemple en live et croisez avec la lecture du code pour voir comment tout cela fonctionne.

//envoie les tableaux toggle et content vers des variables
var toggles = $$('.togglers');
var content = $$('.elements');
 
//définissez votre variable objet
//créer un nouveau ("new") objet Accordion
//précisez le tableau toggle
//précisez le tableau content
//définissez vos options et évènements
var AccordionObject = new Accordion(toggles, content, {
//quand vous chargez la page
//affichera le contenu (par son index)
//sans transition, ca sera juste ouvert
//notez aussi: si vous utilisez "fixedHeight,"
//show ne fonctionnera pas au 1er chargement
//"show" écrasera "display"
show: 0,
 
 
//quand vous chargez la page
//cela affichera le contenu (par son index)
//et le contenu fera une transition d'ouverture
//si display et show sont définis,
//show ecrasera display
//display: 0,
 
//par défaut sur true
//cela créé un accordéon vertical
height : true,
 
//cela est pour les accordéons horizontaux
//délicat à utiliser à cause du css impliqué
//peut-être un tutoriel pour un autre jour?
width : false,
 
//par défaut sur true
//donnera une transition d'opacité au contenu
opacity: true,
 
//par défaut sur false, peut être un nombre -
//fixera la hauteur de tout le contenu
//aura besoin d'une règle css overflow
//ne fonctionnera pas au chargement de page avec "show"
fixedHeight: false,
 
//peut être sur false ou un nombre entier
//similaire à fixedHeight ci-dessus,
//mais pour les accordéons horizontaux,
fixedWidth: false,
 
//vous permet de masquer un élément ouvert
alwaysHide: true,
 
//évènement onComplete standard
//passe une variable contenant l'élément pour chaque contenu
onComplete: function(one, two, three, four, five){
one.highlight('#5D80C8'); //blue
two.highlight('#5D80C8');
three.highlight('#5D80C8');
four.highlight('#5D80C8');
five.highlight('#5D80C8'); //la section ajoutée
$('complete').highlight('#5D80C8');
},
 
//cela se lancera quand vous ouvrez un élément
//passera l'élément de controle du toggle
//et l'élément de contenu qui s'ouvre
onActive: function(toggler, element) {
toggler.highlight('#76C83D'); //green
element.highlight('#76C83D');
$('active').highlight('#76C83D');
},
 
//cela se lancera quand un élément commence à se cacher
//passera tous les autres éléments
//ceux qui se ferment ou pas ouverts
onBackground: function(toggler, element) {
toggler.highlight('#DC4F4D'); //red
element.highlight('#DC4F4D');
$('background').highlight('#DC4F4D');
}
});
 
$('add_section').addEvent('click', function(){
//la nouvelle section est composée d'une paire
//(le nouvel ID du toggle et l'ID du contenu correspondant)
//suivis par l'endroit où vous souhaitez les placer
AccordionObject.addSection('togglersID', 'elementsID', 0);
});
 
$('display_section').addEvent('click', function(){
//déterminera l'objet qui s'affiche en 1er au chargement
//écrasera les paramètres d'affichage
AccordionObject.display(4);
});

Ici vous pouvez voir quand les différents évènements se déclenchent.

onComplete
onActive
onBackground

Essayez d'ajouter une nouvelle section avec le bouton ci-dessous.

Toggle Add

Voici le contenu de toggle 4

Toggle 1

Toggle 2

Toggle 3

Toggle 4


Astuces

  • .display reconnaîtra l'index, mais si vous utilisez addSection, cette section sera le dernier index
  • si vous utilisez “fixedHeight,” “show” ne fonctionnera pas au chargement de la page, mais “display” fonctionnera sans problème

Plus d'options Accordion, évènements et méthodes

Accordion étend la classe Fx.Element, qui étend la classe Fx. Vous pouvez utiliser les diverses options de ces classes pour régler encore plus votre "accordéon". Bien qu'il réalise une tâche simple, l'accordéon est un plugin pratique et puissant. J'aimerais beaucoup voir des exemples faits par des gens qui poussent vraiment son utilisation au maximum.

III. Conclusion du tutorial

Pour en savoir plus…

Lisez les parties de la documentation sur accordion, mais aussi Fx.Elements et Fx. Vous pouvez aussi voir un acccordéon en action sur les démos officielles de Moootols.

Télécharger un zip avec tout ce qu'il faut pour débuter

Il inclut les librairies du noyau et de l'extension de Mootools 1.2, un fichier html simple, un fichier javascript externe, une feuille de style css et l'exemple que vous avez vu ci-dessus.

Tutoriel de demain

Les Classes, partie 1