nodeo.net - Blog - Pour un web libre, moderne et ouvert ! - Développement web

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 jQuery : le toggle

davidm — Mon, 07 May 2007 11:57:00 +0200

Suite de la série "comparons mootools et jQuery", mais cette fois pour l'affichage d'un élément suite à un clic sur un lien (en l'occurence, pour faire apparaître un formulaire de recherche).

Avec mootools, nous avions écrit :

<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>

Avec jQuery :

<script type="text/javascript">

    $(document).ready(function(){

             $('#recherche').hide(); 

             $('a#show_search').click(function() {
                         $('#recherche').toggle(400);
                        return false;
             }); 
    });

</script>

Initialiser un effet au chargement de la page avec jQuery

davidm — Mon, 07 May 2007 11:50:00 +0200

Pour faire suite au billet "Initialiser un effet au chargement de la page avec mootools",

Pour créer un effet d'apparition de l'élement "submenu" j'avais écrit avec mootools :

<script type="text/javascript">

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

</script>

voici la version écrite avec jQuery :

<script type="text/javascript">

    $(document).ready(function(){
            $("#submenu").fadeIn(500);
    });

</script>

ou, si on utilise une autre libraierie javascript, pour éviter les conflits on peut utiliser la fonction noConflict :

<script type="text/javascript">
     var $j = jQuery.noConflict();

    $j(document).ready(function(){
            $j("#submenu").fadeIn(500);
    });

</script>

De mootools à jQuery

davidm — Mon, 07 May 2007 11:41:00 +0200

Après quelques expérimentations avec mootools, et une discussion passionnante sur les forums de MODx sur la comparaison entre mootools et jQuery, j'ai décidé de tester un peu jQuery.

Je reprendrai les deux exemples de mise en oeuvre avec mootools, ré-écrit avec jQuery cette fois, dans de futurs billets. En attendant, après plusieurs heures sur la doc, je vais finalement opter pour jQuery comme libraierie javascript pour mes développements. Les raisons ?

la possibilité d'utiliser facilement jQuery avec d'autres libraieries (via namespace)
la clarté et la progressivité de la documentation (mootools est beaucoup plus difficile d'accès)
le support autour de jQuery, qui à mon sens est bien meilleur en tout cas lorsque l'on souhaite se former

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 !