Jquery 1.4 : les nouveautès , live() ,detach(), unwrap() et delay()

Voici quelques unes des nouveautés proposées par cette nouvelle version de Jquery. Live() n’est pas à proprement parler quelque chose de neuf. Mais cette fonction a été amélioré pour prendre en compte tous les évènements. Si vous n’êtes pas famillié de cette fonction je vous fournirai également un bref descriptif ainsi qu’une recommandation importante sur l’utilisation de live().

delay() et une super innovation qui permet de mettre des temporisation dans l’exécution du code, et notamment des animations. Sans exagérer, je pense que c’est une fonction dont tout le monde rêvait, et Jquery l’a fait.

detach() est vraiment très intéressante car cette fonction permet de supprimer du DOM ,et , puis , de les réinjecter dans votre page web.

Enfin unwrap() est le pendant de wrap() et cela sera parfois bien utile de disposer de cette fonction généralement réalisé à la ’main’.

jquery delay() : Une temporisation , indispensable !!!

Comment faire une temporisation .... Ceux qui développent depuis un moment avec jquery ont eu à gérer cette difficulté maintes et maintes fois , quitte à limiter les effets visuels pour ne pas complexifié le code inutilement. Mais aujourd’hui tout çà c’est du passé !!! La fonction jquery.delay() offre ce dont vous avez toujours rêvé. Une temporisation aux petits oignons , alors trêve de bavardage ... des exemples et du code

Alors cela a l’air sympa ? Et ce qui est le plus sympa c’est le code qui va avec. La première animation le cade se limite à deux lignes dont le point important est : $(’#ex_delay’).stop().hide(’slow’).delay(1000).show .... Ici on voit que entre l’effet hide et show il y a un delay(1000) qui indique de faire une pause entre ces 2 effets. Le deuxième exemple est plus touffu mais le principe est le même. On garde l’effet précédent , en plus entre 2 animations on fait une pause de 2 secondes ... et la div revient en arrière. Vraiment facile n’est il pas ?

Il est important de préciser un point si vous écrivez : $(’#ex_delay’).hide(’slow’).delay(1000).show(’slow’).text(’le texte’). La modification du texte se faire instantanément et ne tiendra pas compte du delay(). Delay() assure la temporisation entre 2 animations. Pour faire des changements autre ( text , html , class ...) il faut placer le code dans le callback de l’animation.

jquery detach() : couper-copier-coller votre DOM et ses évènements

Voici une petite innovation qui rendra bien des services. Grâce à elle vous allez pouvoir supprimer des éléments du DOM , puis les remettre en gardant tous les événements associés ... si , si ... pour voir cela de près je vous propose une petite démo ... et le lien vers la documentation officielle de cette fonction sur jquery.

il est clair que l’on peut se dire que c’est un tour de magie réalisé avec un display none .... Mais il n’en ai rien. D’ailleurs si vous inspectez le code la liste a bien disparu , et une fois réactivé le DOM est réécrit de nouveau.

Concrètement nous avons les effets sur les ’li’. Le plus important est dans la fonction suivante , et plus exactement : detach = $(".list_detach").detach() ; Ici l’ensemble du DOM est conservé dans une variable ( ici detach ). Le point le plus important est que cette variable garde le HTML mais également les évènements qui lui sont associés . Ainsi dans la fonction suivante quand on ’recolle’ la liste ( detach.appendTo("#coller") ; ) , non seulement le rendu est là mais les évènements associés aussi. Pratique , non ?

jquery unwrap() : enlevez moi ces conteneurs ...

Un wrapper ... si vous êtes un novice en programmation cela ne vous dira certainement pas grand chose. Sinon nous sommes tous des habitués de ce nom au son barbare qui signifie ’englober’. La sonorité est beaucoup plus douce en français .... En bref cela peut donner de manière basic : ’<p>text</p>’ voici un code très simple que je souhaite wrapper avec une div , on obtient : ’<div><p>text</p></div>’. cette fonction jquery.wrap() existe déjà , il était donc temps de lui trouver son corollaire unwrap ....

La le code est vraiment simpliste. On wrap et dewrap , pardon unwrap ... , la balise p ayant le id #demo_wrap. Vu que j’ai un style différent avec le wrapper nous obtenons un petit effet visuel ...

Cette fonction peu paraître très simpliste, et elle est, mais elle n’est pas pour le moins inutile.

jquery live() : fonction étendue

Pour ceux qui ne connaissent pas la fonction live() de jquery , celle ci permet de laisser un évènement actif sur un élément du DOM même si celui ci a été rajouté après le chargement de la page. Un exemple est toujours plus simple :

Ce code effectuera une alert sur toutes les balises p. Par contre si vous rajoutez un élément dans votre page ( par exemple via une requête ajax ) les balises p ainsi rajoutées ne bénéficieront pas de cette évènement.

Pour remédier à cela : jquery.live()

Avec ce morceau de code tous les évènements click , sur les balises p seront actifs même si ceux ci ont été rajouté après le chargement de la page. Cette fonctionnalité de ’persistance des évènements’ a été étendue aux évènements suivants : change, submit, focusin , focusout, mouseenter et mouseleave.

Important : utiliser live et la boisson avec modération Souvent ce qui est bon doit être utiliser avec modération : alcool, chocolat, programmation ... il en va de même avec la fonction jquery.live(). Son mécanisme est en réalité assez simple mais assez couteux. Dans notre exemple comment jquery fait pour savoir que nous avons cliqué sur une balise p. En fait il l’ignore. Il lance simplement un écouteur global sur les clicks. Dès que vous cliquez il voit qu’une fonction live est enregistré sur p et test si le dit ’click’ a été effectué sur un p. Au final si vous mettez plein d’évènements avec live chaque action ( click , change , mouseenter ...) sera systématiquement étudier. Au final vous allez ralentir considérablement le traitement des scripts. Utiliser live() uniquement quand cela est indispensable , et préféré plutôt un code favorisant les ’bind’ - ’unbind’.

Conclusion

Voici quelques unes des innovations de la nouvelle version de jquery 1.4. Que retenir ? Je dirai en tout premier lieu jquery.delay() ; Le rajout d’une fonction de temporisation aussi simple donne une dimension supplémentaire à jquery et à sa capacité de réaliser des animations de qualités. Si le Flash tenait le haut du pavé dans ce domaine, il est aujourd’hui clair qu’une grande partie de vos effets sur une page web peuvent utiliser le DOM et des librairies tel que jquery. Cette évolution sera encore plus marquée quand nous n’aurons plus à entretenir les dinosaures d’ Internet explorer ( version 8 comprise ...)

Concernant unwrap et detach, gardez les biens au chaud, même si vous n’aurez pas à les utiliser fréquemment , ces 2 fonctions rendent de grandes services. Pour live() , c’est super , mais pas trop souvent , alors je n’ai plus qu’à vous dire ’A vos claviers et Have Fun’.