Jquery vs mootools pour un effet « fancy » sous vos menus

Jquery vs mootools pour un effet « fancy » sous vos menus

Difficulté

JQuery Mootools htmlcss

Avec le développement des bibliothèques de script pour Javascript, il devient difficile de choisir l’utilisation de l’une ou l’autre.

Aujourd’hui, je me suis penchée sur Mootools, que vous pouvez télécharger ici.
J’ai appris à coder directement à l’aide des fonctions javascript du DOM
Découvrir ensuite JQuery (que vous pouvez télécharger ici m’a bien simplifié les choses !
Plus de problèmes de compatibilité inter navigateur
Une syntaxe simplifiée, un accès aux éléments facilités grâce à sélecteurs css, des animations et effets faciles à programmer, des appels Ajax facilités…

Développant de plus en plus régulièrement sur Joomla, je commence donc à m’intéresser à Mootools, bibliothèque incluse nativement à ce CMS.

J’ai trouvé un petit effet rigolo sur un menu : une barre suiveuse, que j’ai voulu coder en Jquery.

En voulant l’intégrer à Joomla, j’ai trouvé l’opportunité intéressante de comparer les 2 codes.

Voyons tout d’abord le code html du menu :

1. Le code html

<div id="pillmenu">
<ul class="menu">
	<li class="active"><a href="#">Accueil</a></li>
	<li><a href="#">Actualités</a></li>
	<li><a href="#">Répertoire</a></li>
	<li><a href="#">Livre d'Or</a></li>
	<li><a href="#">Vidéos</a></li>
	<li><a href="#" >Le Blog</a></li>
	<li><a href="#">Contact</a></li>
</ul>
<div class="fancy" ></div>

Un menu « liste » classique, où le menu actif est « Accueil », la div « fancy » étant la barre suiveuse.
Mis en page par les css suivantes :

2.La feuille de style CSS

#pillmenu {
	margin:0;
	width:790px;
	height:28px;
	position:relative;
}

#pillmenu ul {
	padding:0;
	margin:0;
	list-style: none;
}

#pillmenu li {
	float: left;
}

#pillmenu li a {
	float:left;
	color: #5e5137;
	font-size:11px;
	font-weight:700;
	text-decoration: none;
	height:28px;
	line-height:27px;
	padding: 0 12px;
	margin:0;
	cursor:pointer;
}

#pillmenu li a:hover{
	color: #670000;
}

.fancy{
height:2px;
position:absolute;
background:none repeat scroll 0 0 #670000;
display: block;
left: -1000px;
width: 100px;
overflow: hidden;
top: 27px;
}

La barre est construite grâce aux css et placée en dehors de l’écran grâce au left:-1000px pour éviter une mauvaise position et largeur de la barre si le javascript n’est pas activé sur le navigateur de l’internaute.
Si un menu possède l’attribut actif, la barre se positionne par défaut sous ce lien de menu. Le lien devient actif au clic de la souris. Au chargement de la page, la barre ne se voit pas.

Le code javascript va devoir récupérer la position du lien survolé, sa taille, puis la transmettre à la barre suiveuse qui s’animera.
Au clic de la souris, le <li> du lien prendra la classe active et la barre s’accrochera à ce lien.

3. Le chargement du Dom

Tout d’abord, il faut bien sûr intégrer la bibliothèque à notre script.
Inutile de rappeler également que sans attendre le chargement de l’arbre entier du DOM, le code ne fonctionnera pas ! ;)

En JQuery

<script src="jquery-1.6.3.min.js" type="text/javascript"></script>
<script type="text/javascript">
// <![CDATA[
jQuery(function(){
//code;
});
// ]]>
</script>

En Mootools

<script src="mootools-core.js" type="text/javascript"></script>
<script type="text/javascript">
// <![CDATA[
window.addEvent('domready', function(){
//code;
});
// ]]>
</script>

Notre Dom est chargé, on peut donc travailler…

4. Les sélecteurs

On initialise les variables. Les objets JQuery ou Mootools sont declarés avec le préfixe $ pour les distinguer des variables standards.

En JQuery

//déclaration des variables
var $barre = $('#pillmenu .fancy');
var $actif = $('#pillmenu li.active');
//position du 1er li
var left_absolu = $('#pillmenu li:first').position().left;
var largeur_base =  100;
var left_base = -1000;

En Mootools

//déclaration des variables
var $barre = $('pillmenu').getElement('.fancy');
var $actif = $('pillmenu').getElement('li.active');
//position du 1er li
var left_absolu = $('pillmenu').getElement('li').getPosition().x;
var largeur_base =  100;
var left_base = -1000;

Le pointage d’élément est peut être un peu plus long en Mootools, en tout cas pour les éléments seuls (la sélection de plusieurs éléments est possible directement avec $$).
L’accès aux propriétés est similaire.
Les variables largeur_base et left_base correspondent aux css width et left de la barre « fancy », et vont nous permettre les calculs de positions et de tailles.

5.Positionnement d’un élément

On calcule et positionne la barre suiveuse au chargement de la page, en vérifiant auparavant la position de la barre, autrement dit en testant la présence ou non de l’attribut actif sur un li. Elle sera donc invisible si aucun lien de ce menu n’est actif, et positionné sur le lien à l’attribut actif si le menu est actif .
Dans notre cas d’école, la barre est positionné sous « Accueil » au chargement de la page, et on simulera la navigation par un clic sur le menu.

En JQuery

//si menu actif, on voit déjà la barre
if($actif.length) {
	//largeur et position du menu actif
	largeur_base =  $actif.width();

	//Calcul de la position de la barre par rapport
	//à sa position d'origine c'est à dire au premier li
	left_base = $actif.position().left - left_absolu ;

//si pas de menu actif, on ne voit pas la barre
}else{
	var invisible = true;
	$barre.css('opacity',0);
}

//positionnement de la barre
$barre.width(largeur_base);
$barre.css('left',left_base);

En Mootools

//si menu actif, on voit déjà la barre
if($actif) {

	//largeur et position du menu actif
	largeur_base =  $actif.getStyle('width');

	//Calcul de la position de la barre par rapport
	//à sa position d'origine c'est à dire au premier li
	left_base = $actif.getPosition().x-left_absolu;

//si pas de menu actif, on ne voit pas la barre
}else{
	var invisible = true;
	$barre.setStyle('opacity',0);
}
//positionnement de la barre
$barre.setStyle('width',largeur_base);
$barre.setStyle('left',left_base);

A noter que pour JQuery, la fonction css('width',valeur) fonctionne également.

Le test de la présence ou non d’un élément pour JQuery n’est possible qu’en retournant la propriété length, le nombre d’élément, sinon il retourne true dans tous les cas.

On a maintenant positionné la barre sous notre lien « Accueil »…

6. Gestion des écouteurs d’évènements, et animation d’un élément

La barre suit la souris au survol du lien de menu (donc du <li>)

En JQuery

//au survol, la barre suit
$('#pillmenu ul.menu li').hover(function(){

	largeur = $(this).width();
	left = $(this).position().left - $('#pillmenu li:first').position().left;
	//barre déjà apparente
	if($barre.css('opacity') > 0){
				$('#pillmenu .fancy:animated').stop();
				$barre.animate({
				'left': left,
				'width': largeur
			},'fast');

	//barre invisible (hors champ) : elle apparait
	}else{
			$barre.width(largeur);
			$barre.css('left',left);
			$barre.css('opacity',1);
		}

},function(){
//rien de prévu pour le mouse out
});

En Mootools

//déclaration de la variable de l'effet
var myEffect = new Fx.Morph($barre, {
	duration:'short'
});

//au survol, la barre suit
$('pillmenu').getElements('ul.menu li').addEvent('mouseover',function() {

		largeur = $(this).getStyle('width');
		left = $(this).getPosition().x - $('pillmenu').getElement('li').getPosition().x;

		//barre déjà apparente
		if($barre.getStyle('opacity') > 0){
				myEffect.cancel();
				myEffect.start({
				'left': left,
				'width': largeur
			});

		//barre invisible (hors champ) =>elle apparait
		}else{
			$barre.setStyle('width',largeur);
			$barre.setStyle('left',left);
			$barre.setStyle('opacity',1);
		}
});

L’animation de la barre est gérée par animate pour Jquery, et fx.Morph pour Mootools
Ici, la seule différence est l’instanciation de l’effet sur un objet Mootool.
En effet, il ne s’instancie pas par défaut, comme de nombreux autres objets Mootools et contrairement à JQuery qui là, s’avère plus souple, sauf qu’il est nécessaire de recibler l’objet si on veut par exemple arrêter l’effet si un autre lien est survolé avant que l’effet ne soit fini : ici :

$('#pillmenu .fancy:animated').stop();

Pour Mootools, on applique la méthode sur l’objet:

myEffect.cancel();

La gestion de l’évènement hover parait plus verbeuse pour JQuery de par sa nécessité de prévoir le « out », ici vide car la barre ne bougera ensuite que si l’on se positionne sur une autre lien ou que l’on sort du menu (donc du <ul>)

7. L’évènement de « sortie » du menu

Retour à la position initiale de la barre suiveuse si l’on sort du menu

En JQuery

//retour à la position de départ si on sort du menu
$('#pillmenu ul').mouseleave(function(){
		//barre doit disparaitre
		if(invisible){
		$barre.css('opacity',0);

		//retour à la position de départ
		}else{
			$barre.animate({
				'left': left_base,
				'width': largeur_base
			},'fast');
		}
});

En Mootools

//retour à la position de départ si on sort du menu
$('pillmenu').getElement('ul').addEvent('mouseleave',function() {

		//barre doit disparaitre
		if(invisible){
		$barre.setStyle('opacity',0);

		//retour à la position de départ
		}else{
			myEffect.start({
				'left': left_base,
				'width': largeur_base
		});
		}

});

La variable invisible nous permet de savoir si la barre était invisible ou non, et de la positionner à sa position de départ, ou de la rendre invisible avec la propriété css opacity.

8. Evènement au clic

Le clic sur un lien provoque une nouvelle position par défaut pour la barre.

En JQuery

//au clic, le menu cliqué devient actif
$('#pillmenu ul.menu li').click(function(){

$actif.removeClass('active');
$(this).addClass('active');
//redéfinition de actif
$actif = $('#pillmenu li.active');
//largeur et position du menu actif
	largeur_base =  $actif.width();
	left_base = $actif.position().left-left_absolu;;
	invisible = false;
});

En Mootools

//au clic, le menu cliqué devient actif
$('pillmenu').getElements('ul.menu li').addEvent('click',function() {
if($actif) $actif.removeClass('active');
$(this).addClass('active');
//redéfinition de actif
$actif = $('pillmenu').getElement('li.active');
//largeur et position du menu actif
	largeur_base =  $actif.getStyle('width');
	left_base = $actif.getPosition().x-left_absolu;;
	invisible = false;
});

La classe active sera supprimé du lien actif et ajouté au li cliqué, d’où une nouvelle position et taille par défaut de la barre : variables largeur_base et left_base .

9. Et voici les résultats finaux des 2 codes

En JQuery

En Mootools

En conclusion, pour un code très simple comme celui là, les fonctionnalités principales sont très semblables, la logique également.
Il faudrait tester sur des effets plus complexes, et des appels ajax pour compléter ce mini comparatif.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Vous pouvez utiliser ces balises et attributs HTML : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>