Mootools en 30 jours : jour 20 - Les onglets

I. Introduction aux onglets

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.

Nous voilà de retour pour la suite des 30 jours de Mootools. Aujourd'hui, nous allons suspendre un peu notre parcours de la librairie et des bases du développement afin de faire un court projet. En utilisant ce que nous avons appris, il y a plusieurs moyens d'utiliser des onglets de navigation (et autres "li")pour créer du contenu qui ne s'affichera que sur un passage de souris ou sur un clic.

II. Explications

Onglets “Extra Info” simples

Des onglets avec des infos quand on passe dessus

Pour cette première étape, nous allons créer un menu simple qui révèlera des informations additionnelles quand vous passerez sur l'un des éléments de la liste. Tout d'abord, configurons le html - mettons en place un ul contenant quatre éléments, puis créons quatre divs (un correspond à chaque élément de la liste):

//voici notre menu

  • One

  • Two

  • Three

  • Four


 
//et voici nos divs de contenu



Pour le moment, ne vous inquiétez du look que ça a. Dans le css, tout ce que nous avons à faire est cacher les boites de contenu :

.hidden {
display: none;
}

Maintenant, passons du côté de Mootools. Si nous voulons que le contenu s'affiche quand quelqu'un passe la souris dessus et se cache quand on enlève la souris, il nous faut définir deux fonctions :

var showFunction = function() {
this.setStyle('display', 'block');
}
 
var hideFunction = function() {
this.setStyle('display', 'none');
}

et quelques évènements :

window.addEvent('domready', function() {
//ici nous pouvons passer les éléments de contenu
//dans une variable
var elOne = $('contentone');
 
$('one').addEvents({
//pour l'évènement mousenter, nous appelons showFunction
//et attachons elOne, afin de passer l'élément à la fonction
'mouseenter': showFunction.bind(elOne),
'mouseleave': hideFunction.bind(elOne)
});
 
});

Maintenant, nous répétons juste ce modèle pour chaque onglet et son contenu correspondant. Voici le code complet : 

//nos fonctions pour changer les styles
var showFunction = function() {
this.setStyle('display', 'block');
}
 
var hideFunction = function() {
this.setStyle('display', 'none');
}
 
window.addEvent('domready', function() {
//nos éléments de contenu dans des variables
var elOne = $('contentone');
var elTwo = $('contenttwo');
var elThree = $('contentthree');
var elFour = $('contentfour');
 
//les évènements sur les onglets
$('one').addEvents({
//définition des types d'évènements
//appel de la fonction bind et on passe l'élément
'mouseenter': showFunction.bind(elOne),
'mouseleave': hideFunction.bind(elOne)
});
 
$('two').addEvents({
'mouseenter': showFunction.bind(elTwo),
'mouseleave': hideFunction.bind(elTwo)
});
 
$('three').addEvents({
'mouseenter': showFunction.bind(elThree),
'mouseleave': hideFunction.bind(elThree)
});
 
$('four').addEvents({
'mouseenter': showFunction.bind(elFour),
'mouseleave': hideFunction.bind(elFour)
});
});

Comme vous pouvez le voir, c'est assez simple et il n'y a pas vraiment besoin d'utiliser ce que nous avons vu jusqu'à présent.

  • Un
  • Deux
  • Trois
  • Quatre


Des onglets qui affichent du contenu après un clic

En prenant l'idée précédente, nous pouvons facilement l'adapter pour que le contenu ne s'affiche qu'après un clic. Utilisons le même code html qu'au-dessus, et ajustons le code Mootools pour qu'il prenne en compte un évènement click.

Tout d'abord, nous allons allons avoir besoin d'ajuster nos fonctions. Puisque nous ne pouvons pas cacher le contenu sur l'évènement mouseleave, il nous faut trouver une autre façon de passer d'un div à l'autre. Peut-être que l'option la plus facile serait de les cacher tous lors d'un click, et de juste afficher celui qui nous intéresse (peu importe l'élément qui est passé par l'évènement click):

var showFunction = function() {
$$('.hiddenB').setStyle('display', 'none');
this.setStyle('display', 'block');
}

Maintenant, quand nous passons à la fonction un élément en utilisant bind, cela cachera les autres et révèlera cet élément.

Ensuite, nous avons besoin d'adapter les évènements. Tout d'abord, nous avons besoin d'un seul évènement, donc nous utiliserons .addEvent();, puis nous changerons le type de l'évènement en ‘click.’

window.addEvent('domready', function() {
var elOneB = $('contentoneB');
var elTwoB = $('contenttwoB');
var elThreeB = $('contentthreeB');
var elFourB = $('contentfourB');
 
$('oneB').addEvent('click', showFunction.bind(elOneB));
$('twoB').addEvent('click', showFunction.bind(elTwoB));
$('threeB').addEvent('click', showFunction.bind(elThreeB));
$('fourB').addEvent('click', showFunction.bind(elFourB));
});
  • Un
  • Deux
  • Trois
  • Quatre


Des onglets avec un Morph

En étendant le code que nous avons au dessus, nous pouvons ajouter des fonctionnalités de morphing quand notre contenu caché doit s'afficher. Pour commencer, nous pouvons définir un effet Fx.Morph tout comme l'exemple précédent, sauf qu'au lieu de définir les styles, nous leur appliquerons un morph. Bien entendu, nous aurons aussi besoin de créer nos objets "morph"

var showFunction = function() {
//réinitialise tous les styles avant de lancer un morph
$$('.hiddenM').setStyles({
'display': 'none',
'opacity': 0,
'background-color': '#fff',
'font-size': '16px'
});
 
//ici nous lançons le morph et définissions le style d'arrivée
this.start({
'display': 'block',
'opacity': 1,
'background-color': '#d3715c',
'font-size': '31px'
});
}
 
window.addEvent('domready', function() {
var elOneM = $('contentoneM');
var elTwoM = $('contenttwoM');
var elThreeM = $('contentthreeM');
var elFourM = $('contentfourM');
 
//creation des objets morph
elOneM = new Fx.Morph(elOneM, {
link: 'cancel'
});
elTwoM = new Fx.Morph(elTwoM, {
link: 'cancel'
});
elThreeM = new Fx.Morph(elThreeM, {
link: 'cancel'
});
elFourM = new Fx.Morph(elFourM, {
link: 'cancel'
});
 
$('oneM').addEvent('click', showFunction.bind(elOneM));
$('twoM').addEvent('click', showFunction.bind(elTwoM));
$('threeM').addEvent('click', showFunction.bind(elThreeM));
$('fourM').addEvent('click', showFunction.bind(elFourM));
});

Si nous utilisons le même code html que nous avions plus haut, nous obtiendrons quelque chose comme ceci :

  • Un
  • Deux
  • Trois
  • Quatre
content for four

Note: Si vous cliquez sur l'exemple ci-dessus rapidement, vous verrez que ça envoie plusieurs divs de contenu. En fait, si showFunction est appelée avant la fin du précédent effet en cours, cela ne le prendra pas en compte quand il cache les divs de contenu. Pour régler ce problème, nous allons avoir besoin de jouer un peu avec Fx.Elements.


III. Conclusion du tutorial

Exemple

Cet exemple fonctionne exactement comme le précédent, sauf que quand vous cliquez sur deux onglets rapidement, cela ne superposera pas les divs de contenu.

//creation d'une fonction "hideAll"
//creation d'un paramètre afin de passer l'élement
var hideAll = function(fxElementObject){
fxElementObject.set({
'0': {
'display': 'none'
},
'1': {
'display': 'none'
},
'2': {
'display': 'none'
},
'3': {
'display': 'none'
}
});
}
 
//ici nous créons une fonction pour chaque élément de contenu
var showFunctionOne = function() {
//avant tout, appelez la fonction hideAll
//puis passez "this" comme objet Fx.element
hideAll(this);
 
//lancez le morph Fx.element pour l'index qui
//correspond à l'évènement click
this.start({
'0': {
'display': ['none', 'block'],
'background-color': ['#fff', '#999'],
'font-size': ['16px', '25px']
}
});
}
 
var showFunctionTwo = function() {
hideAll(this);
 
this.start({
'1': {
'display': ['none', 'block'],
'background-color': ['#fff', '#999'],
'font-size': ['16px', '25px']
}
});
}
 
var showFunctionThree = function() {
hideAll(this);
 
this.start({
'2': {
'display': ['none', 'block'],
'background-color': ['#fff', '#999'],
'font-size': ['16px', '25px']
}
});
}
 
var showFunctionFour = function() {
hideAll(this);
 
this.start({
'3': {
'display': ['none', 'block'],
'background-color': ['#fff', '#999'],
'font-size': ['16px', '25px']
}
});
}
 
 
window.addEvent('domready', function() {
//cration d'un tableau pour passer à Fx.elements
var morphElements = $$('.hiddenMel');
 
//creation d'un nouvel objet Fx.Element
var elementEffects = new Fx.Elements(morphElements, {
//définition de l'option "link" pour annuler
link: 'cancel'
});
 
$('oneMel').addEvent('click', showFunctionOne.bind(elementEffects));
$('twoMel').addEvent('click', showFunctionTwo.bind(elementEffects));
$('threeMel').addEvent('click', showFunctionThree.bind(elementEffects));
$('fourMel').addEvent('click', showFunctionFour.bind(elementEffects));
});
  • One a
  • Two
  • Three
  • Four
content for four


Pour en savoir plus…

Ce tutoriel est principalement une application qui reprend les différentes choses que l'on a pu voir dans les tutoriels précédents. Donc, je vous recommande de lire les documentations, en entier, si vous ne l'avez pas encore fait. C'est plus fun que ça n'en a l'air. Si la librairie est nouvelle pour vous et que vous avez bien suivi le cheminement des ce tutoriel, vous serez sans doute surpris d'en comprendre autant.

Télécharger le fichier zip de l'exemple final

Il contient tout ce qu'il vous faut pour débuter.

Le tutoriel de demain

Les classes partie 2