Jquery 1.4 : Per-property Easing, setter avec fonctions sur les attributs , Event Multi-binding

Voilà 3 nouveautés très intéressantes proposées par la nouvelle version du framework javascript. Per-property Easing , va ravir tous les développeurs et graphistes qui souhaitent faire des animations sur mesure. Après avoir effectuer quelques tests je n’ai qu’une chose à dire, c’est bluffant ... Et le petit exemple que je vous propose devrait vous donner un avant gout de cette fonctionnalité.

Plus technique, l’utilisation de fonctions pour modifier la valeur d’un attribut est extrêmement pratique. Nous avons eut tous à utiliser ce genre de fonction. Mais maintenant celle ci pourra directement mise dans $(selecteur).attr(’attribut’, function ...

Enfin le ’Event Multi-binding’ va fous faire gagner en lisibilité en proposant de lier un sélecteur à plusieurs événements dans une seule et même fonction. Cela accroitra également la maintenabilité du code grâce à ce regroupement.

Per-property Easing

Avant tout soyez rassuré !!! L’animation que vous allez voir n’est pas un bug de votre navigateur !!! Et tout va redevenir bien symétrique à la fin de cette animation. Alors je vous en prie, veuillez cliquer .... ça va secouer ...

Alors n’est ce pas sympathique ? Je trouve la fluidité de l’animation vraiment bluffante. Nous allons tout de suite voir le code en précisant un point important. Jquery propose assez peu de ’types’ ( ou easing) d’animations. Pour la démo effectuer ici j’utilise des propriétés de la librairie jquery ui. Vous pouvez utiliser cette option, ou bien installer le plugin jquery easing qui vous offrent de nombreuses possibilités.

Voici notre code ....

Alors, après le click, on lance une animation sur l’ensemble des ’p’ ( d’où cet étrange ballet ). La variable ’animation’ n’a pour intérêt que de réduire le code. Concrètement j’appelle la fonction $.animate, je précise la durée ( 5 secondes en l’occurrence ) et , ensuite, bonheur, le ’specialEasing’. Et comme vous pouvez le voir le code est vraiment super simple. Comme je le précisez tout à l’heure les possibilités d’effets fournis par jquery sont limités. Ici ’easeOutBounce’ est utilisable car j’utilise jquery ui. Une fois l’animation terminée ( ’complete’ dans le code). Je relance une animation pour que nous puissions retrouver notre page web. Intéressant n’est il pas ?

Setter avec fonctions sur les attributs

Nous allons voir un exemple assez trivial qui va vous permettre de voir l’intérêt de cette toute nouvelle possibilité. Nous disposons d’une liste assez simple et en cliquant vous allez voir la valeurs des attributs ’alt’ de chaque élément de la liste. une fois cela effectué, vous allez pouvoir modifier ces valeurs à l’aide de cette nouvelle possibilité offerte par jquery, à savoir, utiliser une fonction comme ’setter’ sur les attributs.

Voici le code ... la fonction $(’#alt_value’).click ... sert à visualiser la valeur des attributs ’alt’ des éléments de cette liste. La fonction suivante est celle qui nous intéresse le plus pour cette démonstration. Al ’intérieur de celle ci nous avons donc : $(’.attribut’).attr("alt", function(index, value) ... Cette première partie de la fonction est très intéressante car function a 2 paramètres : index , qui indique la position de l’élément ( on part à 0 ) et value qui fournie la valeur actuel de l’attribut. Après on ’set’ la nouvelle variable : val = $(this).text() + ’ - ’ + index ; Et pour que cela soit affectée on utilise un return : return val ; une fois tout cela effectué, on ré-affiche la valeur des attributs ’alt’ : $("#alt_value").trigger(’click’) ;

Cette fonction est on ne peux plus intéressante à mon avis. Elle ouvre notamment des perspectives sur des traitements plus précis. Par exemple en précisant que si la ’value’ de l’attribut vaut ’test’ on ne fait rien sinon on fait un traitement. On peux également utiliser une condition sur la valeur de ’index’. Je vous invite à bien garder cette possibilité sous le coude, à n’en pas douter, elle vous sera indispensable, un jour.

Event Multi-binding

Ce que nous propose jquery 1.4 à travers cette nouveauté c’est de pouvoir construire un code plus lisible. Avec l’avènement des librairies javascript et la puissance croissante des navigateurs, il est maintenant banal d’associer plusieurs évènements sur des éléments de votre page web. il est alors possible que votre code commence à ’s’éparpiller’. Ici on gère le ’click’ sur une class, plus loin c’est autour du ’mouseenter’ et , ailleurs .... , le ’mouseleave’.

Grâce à ’Event Multi-binding’ vous allez pouvoir associer tous les évènements dans un seul et même endroit.

Et voici le code qui n’a rien de particulier si ce n’est que nous avons tous les évènements liés à ’.multi_binding’ qui sont inscrits au même endroit. Cela est d’autant plus pratique que si, par exemple, vous avez un événement double-click à rajouter sur cette class, il vous suffit d’écrire : , dblclick : function() .... mon code ... . N’est il point pratique ?

Conclusion

La librairie jquery continue d’évoluer à un bon rythme. Non seulement cette nouvelle version apporte des nouveautés vraiment indispensables comme delay() ou les ’Per-property Easing’ mais elle tient également compte des besoins croissants du développeur web. Les fonctionnalités demandées pour qu’une page web soit ’réussie’ sont sans cesse croissante. Jquery 1.4 en proposant des syntaxes et des méthodes plus adaptées permet au développeur de continuer à faire évoluer son code en gagnant en clarté et en simplicité.

Bon code !!!