Script MooTools

Exemple de fonctions MooTools VS Javascript

MooTools met lui aussi à disposition une large palette de fonctions très utiles et, comme jQuery, encapsule tous les nœuds DOM dans des objets étendus spécifiques, apportant ainsi des méthodes additionnelles utilisables simplement.

Manipulation de DOM, effets graphiques et AJAX sont au rendez-vous.

Je n’effleurerai ici que les bases de MooTools en reprenant les exemples précédents :

Récupérer un élément par son ID

// Natif
var div = document.getElementById('myDiv');

// MooTools
var div = $('#myDiv');

Récupérer les <p> contenus dans un <div id="myDiv">

// Natif
var div = document.getElementById('myDiv');
var p_list = div.getElementsByTagName('p');

// MooTools
var p_list = $$('#myDiv p');

Supprimer les <p> contenus dans un <div id="myDiv">

// Natif
var div = document.getElementById('myDiv');
var p_list = div.getElementsByTagName('p');

for (var i=0 ; i < p_list.length ; i++)
{
div.removeChild(p_list[i]);
}

// MooTools
var p_list = $$('#myDiv p').each();
Array.each(p_list, function(pObj)
{
pObj.destroy();
});

Cacher/afficher un élément par un clic sur un bouton

// Natif
var button = document.getElementById('button');

button.onclick = function(e)
{
var div = document.getElementById('myDiv');
var display = div.style.display != 'block' ? 'block' : 'none';
div.style.display = display;
};

// MooTools
$('#button').addEvent('click', function(e)
{
var div = $('#myDiv');

if (div.getStyle('display') != 'block')
div.setStyle('display', 'block');
else
div.setStyle('display', 'none');
});