Le blog de nodeo

Aller au contenu | Aller au menu | Aller à la recherche

Mot clé - mootools

Fil des billets - Fil des commentaires

mardi, mai 8 2007

Sortie de mootools 1.1 : optimisation, optimisation !

Par davidm le mardi, mai 8 2007, 11:20 - Développement web

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

samedi, avril 28 2007

Suite des expériences avec mootools : le toggle

Par davidm le samedi, avril 28 2007, 13:57

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>

jeudi, avril 19 2007

Initialiser un effet au chargement de la page avec mootools

Par davidm le jeudi, avril 19 2007, 02:19 - Développement web

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 !