Courant de semaine dernière, mootools a sortie le nouvelle version de son framework javascript en version 1.2 ! Beaucoup de nouveautés sont au rendez-vous, c'est véritablement l'ensemble du framework qui a été re-codé !
Je n'ai pas encore eu le temps de tester, mais j'ai pu constater que le framework a été totalement repensé, avec une nouvelle architecture:
Mootools à bien évidement pensés à la compatibilité des versions, ainsi les anciennes version de mootools seront compatible avec le nouveau framework 1.2.
Petite parenthèse pour le nouveau site internet mootools qui a accompagné la sortie de ce nouveau framework, je le retrouve vraiment moins agréable que l'ancienne version à tous les niveaux: ergonomie, design, interactivité... Vraiment dommage que le site est perdu sa petite touche mootools que tout le monde appréciait !
Il reste à voir si cette nouvelle version va être suivis, donnez moi votre avis !
Mot clé - mootools
Sortie officielle de la nouvelle version du framework javascript mootools en version 1.2
mardi, juin 17 2008
Par julien lavault le mardi, juin 17 2008, 13:06 - Ajax
Effet de survol sur vos éléments avec mootools
lundi, juin 16 2008
Par julien lavault le lundi, juin 16 2008, 10:15 - Ajax
Pour enrichir vos sites internet, il peut être sympa d'ajouter des effets de survol progressif à vos liens, boutons, images, illustrations... Pour cela, mootools est parfaitement adapter et permet très facilement d'ajouter un gestionnaire d'évènement sur certains éléments !
Prenons l'exemple d'un effet de changement de couleur progressif de la couleur d'un texte d'un lien au survol de celui ci:
var fx = new Fx.Styles($('idElement'), {duration:200, wait:false});
$('idElement').addEvent('mouseenter', function(){
fx.start({
'background-color': '#666'
});
});
$('idElement').addEvent('mouseleave', function(){
fx.start({
'background-color': '#333'
});
});
Voila, l'exemple est assez simple, il ne reste plus qu'a paramétrer le Fx.Styles et le tour est joué !
Utilisation des tips avec mootools
mercredi, juin 4 2008
Par julien lavault le mercredi, juin 4 2008, 08:25 - Web 2.0
Moolools permet de faire des infos bulles très sympa sous le nom de 'tips'. Son utilisation est très simple et permet d'ajouter des effets de transition sur l'apparition et la disparition des tips. L'exemple du site mootools est déjà très bien détaillé, je le complèterai en vous expliquant comment enrichir les effets sur vos tips.
/* Ma Tips */
var Tips2 = new Tips($$('.classTips'), {
// On initilalise l'effet que l'on souhaite mettre en place (par defaut un effet en alpha d'apparition)
initialize:function(){ this.fx = new Fx.Style(this.toolTip, 'opacity', {duration: 500, wait: false}).set(0); },
// Gestionnaire d'événement lancé à l'apparition de la Tips
onShow: function(toolTip) { this.fx.start(1); },
// Gestionnaire d'évènement lancé à la disparition de la Tips
onHide: function(toolTip) { this.fx.start(0); }
});
Vous pouvez ainsi facilement rajouter des effet visuel sur l'apparition et la disparition de vos tips, comme un effet de grossissement elastique avec un changement de couleur de fond et de police. En référence pour créer cet effet visuel, le précédent article Enrichir vos formulaire avec FxStyles de mootools.
// On initialise l'objet Fx.Styles
initialize:function(){ this.fx = new Fx.Styles(this.toolTip, {
duration:500,
wait:false,
transition: Fx.Transitions.Back.easeOut
});
// On attache le gestionnaire 'onShow
onShow: function(toolTip) { this.start({
'width': 400,
'color': #CCCCCC,
'background-color': #CCCCCC
});
});
// On attache le gestionnaire d'évènement 'blur'
onHide: function(toolTip) { this.start({
'width': 250,
'color': #FFFFFF,
'background-color': #FFFFFF
});
});
De nombreuses combinaisons sont possible, a vous de les imaginer!
Derniers commentaires