J'ai rédigé ce tuto afin de faire découvrir le Frameworks JavaScript Mootools aux non connaisseurs. Il permet de présenter les bases de l'utilisation de cet outil, ce qui va vous permettre par la suite d'intégrer des éléments dynamiques dans vos applications.

Pour ce tuto, nous allons mettre en place un système d'accordéon tel que vous pouvez le voir ici : Mootools Accordion.

Vous allez commencer par récupérer tous les éléments nécessaires pour bosser ici : Mootools Accordion Pack.

Je vous laisse dézipper le tout sur votre PC et tester l'index. Alors ? Ça marche ? Effectivement, le pack est opérationnel.

Pour fonctionner, votre application a besoin de 4 fichiers :

• mootools.js
• demo.js
• demo.css
• index.html

Détaillons-les un peu :

Le fichier mootools.js

C'est LE fichier de base de Mootools. Il y recense toutes les variables et fonctions nécessaires au bon fonctionnement de vos applications. Dans le cas de l'accordéon, c'est ce bout de code qui est concerné :

var Accordion = new Class({
 
	Extends: Fx.Elements,
 
	options: {/*
		onActive: $empty,
		onBackground: $empty,*/
		display: 0,
		show: false,
		height: true,
		width: false,
		opacity: true,
		fixedHeight: false,
		fixedWidth: false,
		wait: false,
		alwaysHide: false
	},
 
	initialize: function(){
		var params = Array.link(arguments, {'container': Element.type, 'options': Object.type, 'togglers': $defined, 'elements': $defined});
		this.parent(params.elements, params.options);
		this.togglers = $$(params.togglers);
		this.container = $(params.container);
		this.previous = -1;
		if (this.options.alwaysHide) this.options.wait = true;
		if ($chk(this.options.show)){
			this.options.display = false;
			this.previous = this.options.show;
		}
		if (this.options.start){
			this.options.display = false;
			this.options.show = false;
		}
		this.effects = {};
		if (this.options.opacity) this.effects.opacity = 'fullOpacity';
		if (this.options.width) this.effects.width = this.options.fixedWidth ? 'fullWidth' : 'offsetWidth';
		if (this.options.height) this.effects.height = this.options.fixedHeight ? 'fullHeight' : 'scrollHeight';
		for (var i = 0, l = this.togglers.length; i < l; i++) this.addSection(this.togglers[i], this.elements[i]);
		this.elements.each(function(el, i){
			if (this.options.show === i){
				this.fireEvent('active', [this.togglers[i], el]);
			} else {
				for (var fx in this.effects) el.setStyle(fx, 0);
			}
		}, this);
		if ($chk(this.options.display)) this.display(this.options.display);
	},
 
	addSection: function(toggler, element, pos){
		toggler = $(toggler);
		element = $(element);
		var test = this.togglers.contains(toggler);
		var len = this.togglers.length;
		this.togglers.include(toggler);
		this.elements.include(element);
		if (len && (!test || pos)){
			pos = $pick(pos, len - 1);
			toggler.inject(this.togglers[pos], 'before');
			element.inject(toggler, 'after');
		} else if (this.container && !test){
			toggler.inject(this.container);
			element.inject(this.container);
		}
		var idx = this.togglers.indexOf(toggler);
		toggler.addEvent('click', this.display.bind(this, idx));
		if (this.options.height) element.setStyles({'padding-top': 0, 'border-top': 'none', 'padding-bottom': 0, 'border-bottom': 'none'});
		if (this.options.width) element.setStyles({'padding-left': 0, 'border-left': 'none', 'padding-right': 0, 'border-right': 'none'});
		element.fullOpacity = 1;
		if (this.options.fixedWidth) element.fullWidth = this.options.fixedWidth;
		if (this.options.fixedHeight) element.fullHeight = this.options.fixedHeight;
		element.setStyle('overflow', 'hidden');
		if (!test){
			for (var fx in this.effects) element.setStyle(fx, 0);
		}
		return this;
	},
 
	display: function(index){
		index = ($type(index) == 'element') ? this.elements.indexOf(index) : index;
		if ((this.timer && this.options.wait) || (index === this.previous && !this.options.alwaysHide)) return this;
		this.previous = index;
		var obj = {};
		this.elements.each(function(el, i){
			obj[i] = {};
			var hide = (i != index) || (this.options.alwaysHide && (el.offsetHeight > 0));
			this.fireEvent(hide ? 'background' : 'active', [this.togglers[i], el]);
			for (var fx in this.effects) obj[i][fx] = hide ? 0 : el[this.effects[fx]];
		}, this);
		return this.start(obj);
	}
 
});

Je vous conseille de ne pas trop toucher à ce fichier, sauf si vous vous y connaissez ;)

Ensuite vient le fichier demo.js

window.addEvent('domready', function() {
 
	//create our Accordion instance
	var myAccordion = new Accordion($('accordion'), 'h3.toggler', 'div.element', {
		opacity: false,
		onActive: function(toggler, element){
			toggler.setStyle('color', '#41464D');
		},
		onBackground: function(toggler, element){
			toggler.setStyle('color', '#528CE0');
		}
	});
 
	//add click event to the "add section" link
	$('add_section').addEvent('click', function(event) {
		event.stop();
 
		// create toggler
		var toggler = new Element('h3', {
			'class': 'toggler',
			'html': 'Common descent'
		});
 
		// create content
		var content = new Element('div', {
			'class': 'element',
			'html': '<p>A group of organisms [...] </p>'
		});
 
		// position for the new section
		var position = 0;
 
		// add the section to our myAccordion using the addSection method
		myAccordion.addSection(toggler, content, position);
	});
});

Un code un peu plus digeste que le précédent. Détaillons-le :

windows.addEvent('domready', function())

Cette méthode permet d'exécuter la fonction dès que l’arbre dom est chargé. Elle est nécessaire dans tous vos scripts liés au Frameworks Mootools.

var myAccordion = new Accordion($('accordion'), 'h3.toggler', 'div.element', {
		opacity: false,
		onActive: function(toggler, element){
			toggler.setStyle('color', '#41464D');
		},
		onBackground: function(toggler, element){
			toggler.setStyle('color', '#528CE0');
		}
	});

Ici on déclare une nouvelle instance de la classe Accordion en spécifiant les éléments html qui vont interagir avec le JavaScript. En l'occurence, les éléments h3 de classe toggler et les éléments div de classe element. On définit ensuite la couleur du texte des éléments dans les deux états : activé et non activé.

//add click event to the "add section" link
	$('add_section').addEvent('click', function(event) {
		event.stop();
 
		// create toggler
		var toggler = new Element('h3', {
			'class': 'toggler',
			'html': 'Common descent'
		});
 
		// create content
		var content = new Element('div', {
			'class': 'element',
			'html': '<p>A group of organisms [...] </p>'
		});
 
		// position for the new section
		var position = 0;
 
		// add the section to our myAccordion using the addSection method
		myAccordion.addSection(toggler, content, position);
	});

Ce code permet d'ajouter une nouvelle section suite à un clic sur un élément d'id add_section. Cet ajout de section se caractérise par l'ajout d'un élément h3.toggler et d'un élément div.element. Ce bout de code n'a pas vraiment d'importance dans l'utilisation d'un accordéon classique.

Ensuite vient le fichier demo.css

#accordion {
	margin:20px 0px;
}
 
h3.toggler {
	cursor: pointer;
	border: 1px solid #f5f5f5;
	border-right-color: #ddd;
	border-bottom-color: #ddd;
	font-family: 'Andale Mono', sans-serif;
	font-size: 12px;
	background: #D2E0E6;
	color: #528CE0;
	margin: 0 0 4px 0;
	padding: 3px 5px 1px;
}
 
div.element p, div.element h4 {
	margin:0px;
	padding:4px;
}
 
blockquote {
	padding:5px 20px;
}

Rien de bien particulier. C'est ici que se paramètre le style de votre application.

Enfin, le fichier index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<link rel="stylesheet" href="demo.css" type="text/css" />
	<script type="text/javascript" src="../mootools.js"></script>
	<script type="text/javascript" src="demo.js"></script>
	<title>Accordion Demo</title>
</head>
<body>
	<h1>Accordion</h1>
	<h2>Introduction</h2>
	<p>
		The Accordion gives you a fancy way to only show the really needed content.
	</p>
	<hr />
	<div>
		<a id="add_section" href="#">add section</a>
	</div>
	<div id="accordion">
		<h3 class="toggler">History</h3>
		<div class="element">
			<h4>Common ancestor</h4>
			<p>The first suggestion [...]</p>
			<blockquote>"Could one not say [...]</blockquote>
			<h4>The Origin of Species</h4>
			<p>In 1859, Charles Darwin's [...]</p>
			<blockquote>[P]robably all [...]</blockquote>
			<p>The famous closing [...]</p>
		</div>
 
		<h3 class="toggler">Evidence of universal common descent</h3>
		<div class="element">
			<h4>Common biochemistry and genetic code</h4>
			<p>All known forms [...]</p>
			<img src="images/phylogenetic_tree.png" width="340" height="230" align="right" alt="" />
			<p>The universality [...]</p>
			<h4>Phylogenetic trees</h4>
			<p>Another important [...]</p>
		</div>
 
		<h3 class="toggler">Examples of common descent</h3>
		<div class="element">
			<h4>Artificial selection</h4>
			<p>Artificial selection [...]</p>
			<img src="images/biglittledog.jpg" width="180" height="151" align="right" alt="" />
			<h4>Dog breeding</h4>
			<p>An obvious [...]</p>
		</div>
	</div>
</body>
</html>

Ce fichier recense 3 éléménts capitaux :

<div id="accordion">
</div>

C'est dans cette div que devront figurer tous vos élements dynamiques. Ne l'oubliez pas ;)

<h3 class="toggler">
</h3>

C'est en cliquant sur ces éléments que vous allez déclencher l'action (affichage ou masquage de la DIV).

<div class="element">
</div>

Ce sont les éléments qui seront masqués ou affichés

Enfin, un détail très important, n'oubliez pas de déclarer le DOCTYPE de votre document ainsi que de faire figurer le paramètre xmlns dans votre balise HTML :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

On s'en tiendra là pour cette première approche. Je vous conseille vivement d'aller fouiner sur le site de Mootools afin de tester dans un premier temps toutes les démos, afin de les mettre en application et ainsi maitriser ce Frameworks qui a de l'avenir ;)