nodeo.net - Blog - Pour un web libre, moderne et ouvert ! - mootools

Sortie de mootools 1.1 : optimisation, optimisation !

davidm — Tue, 08 May 2007 11:20:00 +0200

La version 1.1 de la libraierie mootools vient de sortir, avec au programme de nombreuses optimisation du code et de nouvelle possibilités

possibilité de créer des evènements customs grâce à une API
évènements mouseenter et mouseleave
des filtres plus puissants : on peut désormais grâce à la fonction filterByClass écrire des filtres plus sélectifs par exemple $('myElement').getChildren().filterByClass('myClass'); qui permet de récupérer tous les éléments enfants de l'élément avec la classe myClass
et bien d'autres améliorations trop longues pour être listées ici !

(Cf http://dev.mootools.net/wiki/whatsNew pour plus de détails)

A noter aussi, une nouvelle section démos (enfin !) sur le site de mootools, qui est (hourra !) cette fois bien documentée avec le code js, html et css :)

Suite des expériences avec mootools : le toggle

davidm — Sat, 28 Apr 2007 13:57:00 +0200

Nous avons vu la dernière fois comment initialiser un effet mootools au chargement d'une page web, cette fois je vais partager avec vous ce à quoi j'ai abouti pour la mise en place un effet simple (ici Slide in et out) initialisé via un toggle (interrupteur pour afficher ou masquer un élément).

<script type="text/javascript">

window.addEvent('domready', function() {
            var showSearch = new Fx.Slide('recherche', {duration: 750});   
             showSearch.hide(); 
             $('show_search').addEvent('click', function() {showSearch.toggle();});
         });

</script>

Initialiser un effet au chargement de la page avec mootools

davidm — Thu, 19 Apr 2007 02:19:00 +0200

J'avais déjà abordé la même question sur les forums de MODx concernant la technique permettant d'initialiser un effet du framework script.aculo.us, et dernièrement j'ai basculé mes développement vers le framework mootools, plus léger et aussi plus "propre" d'un point de vue code.

Exemple avec script.aculo.us :

<script type="text/javascript"><!-- // --><![CDATA[

/* Observe when page loads and run the "init" function */
Event.observe(window, 'load', init, false);

/* When page is loaded, this function is called */
function init()
{
           new Effect.Opacity('submenu', {duration:1.5, from:0.2, to:1.0});
  }

// ]]>

</script>

Comment faire avec mootools ? Ni la documentation, ni le fameux mootorial ne donnent réellement de réponse simple à la question... après une bonne lecture des forums et quelques tâtonnements, voici ce à quoi j'abouti (l'élement cible est un div avec l'id "submenu"):

<script type="text/javascript">

window.addEvent('load', function() {
var myFx = new Fx.Style('submenu', 'opacity', {duration: 500}).start(0,1);
});

</script>

Notez que j'utilise window.addEvent car window.onLoad sera prochainement déprécié... Suite des aventures au pays de mootools prochainement !