Pour ajouter un semblant d’interactivité aux pages web, il fallait auparavant chercher longtemps pour dénicher le bon bout de code Javascript cross-browsers qui va bien. Aujourd’hui, c’est le choix d’une librairie1 Javascript adaptée à nos besoins qui prend du temps. Les prétendants sont nombreux et la qualité est au rendez-vous : Prototype accompagné de script.aculo.us, Mootools et le petit Moofx, Dojo, Yahoo! UI Library, jQuery avec Interface, etc. Whoa! quel chemin parcouru depuis la fin du 2ème millénaire…
En suivant les conseils de blogueurs influents, j’ai installé jQuery. Cette librairie récente bénéficie d’une popularité grandissante et d’une documentation tout simplement exceptionnelle qui s’enrichit d’apports francophones, avec notamment une liste de diffusion spécialisée et des tutoriels avec des morceaux d’exemples dedans.
Le fait que Dotclear2 intègre jQuery, est un gage de qualité. Par ailleurs, lorsque la version 2 de Dotclear sera mise en production, je prédis qu’on trouvera de plus en plus de ressources sur jQuery en français, comme pour l’introduction de la biblithèque dans SPIP qui a donnée naissance à jquery.info 🙂
*Les bases de chez base »*
Mazette, ça c’est une revue complète !
Le seul défaut de jQuery, c’est quand tu combines pas mal d’instructions, on s’y perd un peu dans les ) et }….
Pas le temps de lire maintenant, mais je sens que c’est l’article qu’il me fallait pour me lancer dans JavaScript avec jQuery !!
bookmarké !
Juste pour dire que tes post sont toujours aussi impressioants.
Bravo mon br1o !
indica > Bah… en ce moment j’ai un peu de temps libre. Et puis je n’allais pas garder tout ça pour moi 😉 giz 404 > J’espère que tu ne sera pas déçu… Tiens-moi au courant ! Fetard > C’est clair qu’il faut rester vigilant, mais comme tu l’aura remarqué, je n’ai pas encore de problème de lisibilité. J’espère que ça viendra vite 🙂
Excellent article. Je bookmarke. C’est du bon.
Pareil, félicitations. J’utilise prototype et script.aculo.us après Moofx (oui, j’ai voyagé…) et JQuery me tente assez maintenant. A suivre.
( tiens, "je reviendrai" y’a pas de "s"… 😉 )
Tiens, ça fait plaisir de te lire, Gilles 😉
Et hop, blogrollmarké !
Bon, ça fait deux fois que je me fais doubler sur un sujet d’article aujourd’hui. Du coup j’abandonne mon article su jQuery et je renvoie les gens chez toi. 😉
kynerion > Oups ! c’est corrigé 😉
Aymeric > Whoa! j’espère qu’il me reste assez de bande passante pour accueillir tout le monde 😉
Ohh tu sais, ce n’est pas forcément mon blog qui va te bouffer le plus de bande passante. 😉
jQuery c’est bon.
Codez en.
Jquery c’est (très) bien. Le javascript non intrusif, c’est encore mieux.
A ce sujet, le coup des coins arrondis en javascript je trouve ça un poil batard; pour moi c’est le boulot des feuilles de style. Dommage que les CSS3 soit encore si peu implémenté…
Fred Bird > css 3 ? Je te trouve bien optimiste ou bien patient : si on suit le tempo actuel, il nous faudra certainement attendre les css 4 pour espérer voir la version 3 implémentée sur les principaux navigateurs de 2015 😉
Xuxu > t’as pas des devoirs à faire, toi ? :p
Au niveau des mes devoirs, je vais faire comme au collège, c’est à dire les rendre en retard ^^ (ca se trouve "si on suit le tempo actuel", je te répondrais en live au prochain apéro blog :p)
lol, ok xuxu, y a pas de problème : j’apporterai un crayon et du papier au prochain apéro 🙂
Pour ma part, j’avais déjà découvert JQuery mais c’est un très long, très bon et assez complet article que tu nous as fait là (encore une fois! 😉 ), intéressant et parfait pour une première immersion. 🙂
Vivement DC2 ! 😉
Je vois que pour chaque comportement ajouté à la page tu ajoutes un bloc $(document).ready(function(){…}), pourquoi ne pas tout regrouper dans un unique bloc ?
Une version courte de $(document).ready(function(){}) existe, à savoir $(function(){…}) 🙂
Comme tu es demandeur de suggestions d’optimisations, en voici quelques-unes :
1. la ligne $(‘#links>h3:first a’).css(‘font-size’,’1.5em’); ne sert à rien puisqu’il n’y a aucune balise de lien enfant du premier h3 du bloc #links (un oubli certainement).
2. suggestion de code pour « links on blogroll h3 » :
$(‘#links h3’)
.hover(function() { $(this).css(‘color’,’#cf3500′); },function() { $(this).css(‘color’,’#ff7200′); })
.eq(0).css(‘font-size’,’1.5em’); // équivalent à $("#links h3:first")
3. suggestion de code pour « show hide twitter et presentation » et « links h2 twitter et presentation », le tout étant réunit :
$(‘#presentation h2, #twitter h2’)
// masque #presentation p puis reviens à l’objet initial
.eq(0).next(‘p’).hide().end().end()
// modification du curseur
.css(‘cursor’,’pointer’)
// bind click
.click(function() { $(this).next().slideToggle(‘slow’); })
// bind hover
.hover(function() { $(this).css(‘color’,’#065f00′); }, function() { $(this).css(‘color’,’#9E0050′); });
4. il en subsiste certainement d’autres, mais il faudrait dans ce cas oublier la séparation en blocs logiques du code ^_^’
piouPiouM > Merci pour toutes ces suggestions 🙂
Au début j’avais tout mis en un seul $(document).ready(function() puis quand j’ai commencé à rédiger l’article, j’ai trouvé plus didactique de bien séparer, et puis… après, je me suis dit que si c’était plus lisible pour les lecteurs, ça le serait pour moi aussi !
Pour le point n° 1, il s’agit d’une erreur de logique : je voulais atteindre le premier lien enfant de la première balise h3 🙁
N°2, j’ai modifié déjà pas mal de choses entre hier soir et ce matin, et là, j’ai utilisé $(‘#links ul:lt(3)’).show(); pour qu’une partie de la blogroll reste visible après avoir masque l’ensemble.
(à ce propos je ne comprend pas bien la différence entre les méthodes eq() et lt(), sachant que les valeurs sont censées commencer par zéro, mais qu’en mettant ‘3’ ça prend les 3 premiers ul et non pas les 4 premiers…).
N°3 : je vais me pencher dessus un peu plus pour bien comprendre, notamment cette histoire de double .end() 😉
Merci encore, et à très bientôt j’espère :p
Je comprends mieux pourquoi tu t’es couché aussi tard l’autre soir 😉
Brillant!
br1o > de rien :p
> Pour le point n° 1, il s’agit d’une erreur de logique : je voulais atteindre le premier lien enfant de la première balise h3
Oki, dans ce cas le code précédemment donné en 2. devient :
///
$(‘#links h3’)
.hover(function() { $(this).css(‘color’,’#cf3500′); },function() { $(this).css(‘color’,’#ff7200′); })
// équivalent à $("#links h3:first")
.eq(0).css(‘font-size’,’1.5em’)
// recherche du premier élément lien enfant de l’élément qui suit
// l’élément h3 (à savoir <ul />)
.next().find(‘a:first’).css(‘font-size’,’1.5em’);
///
> je ne comprend pas bien la différence entre les méthodes eq() et lt(), sachant que les valeurs sont censées commencer par zéro, mais qu’en mettant ‘3’ ça prend les 3 premiers ul et non pas les 4 premiers…
La méthode eq() réduit le nombre d’éléments à celui dont l’index est passé en paramètre. L’index allant de 0 à n-1, eq(0) retourne logiquement le premier élément, eq(1) le deuxième, eq(2) le troisième, etc…
La méthode lt(), d’aspect similaire, réduit le nombre d’éléments à ceux qui précèdent l’élément dont l’index est passé en paramètre (l’index allant également de 0 à n-1)). Ainsi, lt(1) retourne les éléments précédants le deuxième élément, soit le premier. lt(2) retourne les deuxième et premier éléments. Et, pour finir, lt(0) ne retourne rien, puisqu’il n’existe aucun élément ayant un index inférieur à 0 ^^
Dans ton cas, $(‘#links ul:lt(3)’) réduit donc le nombre d’éléments à ceux qui ont un index inférieur à 3, autrement dit du 4ème élément et par conséquent les 3 premiers ul 😉
> je vais me pencher dessus un peu plus pour bien comprendre, notamment cette histoire de double .end()
La méthode end() permet de retourner à l’état précédant la dernière manipulation DOM.
Par exemple $(‘#links’).next().end() cherche dans un premier temps l’élément div#links puis passe au nœud frère qui suit, soit div#TLA. Finalement la méthode end() fait repasser la pile de jQuery à div#links.
HS: j’espère que la syntaxe dotclear sera prise en compte =]
Très bien vu, j’hésitais encore avec quelle librairie JS travailler, mais bon je crois que mon choix est fait !
pioupiouM > Merci pour toutes ces précisions très utiles. Je perçois mieux maintenant la différence entre eq(0) et lt(0) !
(j’ai l’impression que la syntaxe dotclear n’a pas été prise en compte : ça devait donner quoi, au juste ?)
Simay > Je pense que tu ne seras pas déçu. Bon, en même temps, j’dis ça, j’dis rien, vu que je connais pas très bien les autres bibliothèques 😉
La syntaxe dotclear n’est pas passée effectivement 🙁
D’un aute côté, je me suis planté dans la syntaxe de l’ajout de code en ligne : il y a un couple de @ en trop à chaque fois =]
Une version en ligne est disponible ci-après : mehdi.gimp4you.eu.org/mis…
C’est pas grave, je me suis permis de remplacer les @@ par samp et hop! (j’ai essayé en enlevant un @ de part et d’autre, mais rien à faire…)
J’avais déjà jeté un coup d’oeil sur http://www.jquery.info/ et sur interface.eyecon.ro/demos (pas mal de démos), j’ai hâte de voir l’intégration qu’en fera le Framework Symfony (que j’utilise), le plugin actuel étant pour l’instant seulement en version alpha.
alex > WordPress, Dotclear, Synfony… il semble que jquery soit vraiment la bibliothèque qui grimpe 🙂
A propos de Synfony, si tu as quelques liens vers des tuto orientés windows sans devoir modifier 50 fichiers exotiques, je suis intéressé 😉
Merci, pour cet articla convainquant, je vais me lancer cet été dans c framework!
Bravo pour ces explications (trop bien !). Dommage qu’elle ne marche pas pour la version 2 de Dotclear. J’essaie en vain de trouver un tuto facile pour organiser en trois parties mes widgets dans la sidebar et l’effet de masquage/affichage semble être l’idéal.
Simplement pour ajouter qu’une documentation non officielle sur jQuery est dispo ici: jquery.developpeur-web2.c… pour ceux que ca intéresse 🙂
heu … ?,"ou alors je n’ai pas bien cherche les options disponibles" 😉