Framework JQuery pour écrire du Javascript non-intrusif

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 ?