Article en plusieurs parties : 1 2 3 4 5
Sur la page plugin de jquery.com
jQuery Corner : des coins arrondis, mais pas seulement
En sortant de chez jquery.info, je me suis souvenu que l’homme qui valait 3 milliards m’a montré un jour des coins arrondis réalisés grâce à jQuery. Alors je suis allé voir du côté de chez Dave Methvin.
Ce dernier déclare que La mode des coins arrondis fait rage ces derniers temps dans le monde du webdesign : les angles droits font trop pas web 2.0. Parmi les solutions pour s’affranchir des blocs à angles droits, la plupart des webdesigner utilise un surcroit de balises HTML contraire à la séparation entre la forme et le contenu. Aujourd’hui, nous ne voulons plus de ces pratiques web 1.0. D’autres encore, utilisent des images, ou des gros blocs de Javascript, ce qui semble un prix assez élevé pour la seule beauté de la chose.
L’auteur de cette sage conclusion s’est donc attelé à la tâche et a créé le plugin jQuery Corner qui permet de styler vos coins de plus de 17 manières différentes. Heu.. dans la pratique… Enfin, jugez vous-même car une URL vaut mieux qu’un long discours…
Pour tester le plugin, je me suis amusé à habiller ma div#pagination qui se trouve en bas de la page. Pour ce faire, j’ai ajouté le script jQuery Corner dans mon template. Parmi les options disponibles, j’ai opté pour ces quelques lignes :
$(document).ready(function() {
$("#pagination").corner("dog tr 10px").corner("round tl br bl 10px");
});
Interface à face
Outre jQuery Corner, de nombreux plugins sous forme de scripts à ajouter dans votre head vont vite devenir indispensables. Je pense notamment à Interface qui ajoute une bibliothèque d’effets et de composants à jQuery : glissé-déposé de bloc, tri, effets visuels, slideshow, imagebox, etc.
Le tout en un fichier compressé qui comprend l’ensemble des effets, ou bien en intégrant les effets à la demande ; la majorité nécessitant 2 ou 3 scripts pour un poids ne dépassant pas un quinzaine de ko. L’auteur a eu par ailleurs l’excellente idée de fournir une liste des dépendances entre les fichiers.
Du coup, j’en ai profité pour remplacer le mini-script toggleClass par les effets slides d’Interface
Quoique (couac ?) : ça marchait très bien sous Firefox, mais sous IE6 à chaque clic ma sidebar disparaissait une fraction de seconde, peut-être à cause de la lenteur légendaire de mon PC. Mais bon, dans le doute j’ai remplacé les effets slides d’Interface par ceux inclus dans le package jQuery, ce qui a réglé le problème d’affichage.
Thickbox
Cette Thickbox affiche des contenus variés (fichier HTML via Ajah, image simple, gallerie d’images, contenu en ligne, iframe) en les mettant au premier-plan tout en ajoutant une légère opacité sur le fond comme la lightbox Splash Box de Xuxu.
La feuille de style qui accompagne le script repose sur la remise à zéro du padding et du margin, ce qui peut entrainer des effets indésirables si votre site est conçu autrement. Pour ma part, j’ai tout simplement supprimé la déclaration * { margin: 0; padding: 0; }, sans problème apparent pour le moment. J’imagine que selon les navigateurs, le contenu ne sera peut-être plus exactement au centre de la fenêtre, mais il ne s’agit que de quelques pixels de décalage…
Thickbox ou Splash ?
Splash est spécialisé dans l’affichage des images et le fait bien : une fonction diaporama permet même de visionner un ensemble de photo en un seul clic sans effort !
Outre la fonction diaporama que je trouve très élégante, j’aprécie que Splash ne redimensionne pas les images qui dépassent de la fenêtre. Mais j’apprécie également que la Thickbox le fasse… tout dépend des besoins en somme. Je garde les deux trois, en comptant l’imagebox d’Interface qui reste très intéressante. A moins que vous ne préféreriez une bonne vieille fenêtre popup ?
Pour conclure
Désormais, il est tout à fait envisageable de séparer les trois ingrédients pour monter un site web : le contenu avec XHTML, la présentation avec CSS et l’interactivité avec Javascript. Le tout avec une utilisation de bande passante réduite et une syntaxe très abordable pour des designer web ou intégrateur HTML à qui on délègue de plus en plus la partie dynamique côté client. Par ailleurs, la progressivité de la courbe d’apprentissage plaide en sa faveur !
J’évoquerais les possibilités Ajaxiennes de jQuery lorsque je les aurais un peu testées ;)
Stay tuned and mind the gap!
(1) La guerre fait rage entre les tenants du français bibliothèque contre l’anglicisme librairie. Pour moi, l’une et l’autre contiennent des livres… D’autres encore utilisent l’anglais framework ou le québecois cadriciel. Back to top ?
Articles sur le même sujet
Article en plusieurs parties : Page précédente
PS : Le respect de la vie privée sur internet est important : j'ai décidé d'échanger mon bouton Like de Facebook par un bouton Faire un don de Paypal car Il n'y pas d'amour, il n'y a que des preuves d'amour
(Jean Cocteau) ;) Merci d'avance.
Afin de satisfaire le plus grand nombre, j'ai ajouté
un bouton Flattr parce que vous le valez bien ;)
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 :
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).
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")
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′); });
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" ;)