JQuery : une bibliothèque indispensable -JavaScript
JQuery est un plugin en Javascript qui facilite la vie du développeur (WEB), ce plugin est très utilisé à l’heure actuelle sur la toile, et est amené à se développer.
Sans vouloir faire un inventaire de fonctions, ni vous assomer avec des lignes et des lignes de code , j’ai décidé de vous dévoiler quelques possibilités de ce plugin.
Quelques fonctionnalités de JQuery :
- Des infos bulle sur le web, ça devient possible ex
- Faire une rotation d’image, pas de problèmes ex
- Des fonctions de zoom (voir ci-dessous) ex
- De jolis pop-up (voir ci-dessous)
- Faire appel à de l’Ajax sans se surcharger de dizaine et dizaine lignes de code
- Intégrer des tas d’animations à notre code ex
- Intégrer à un lien une fonction Javascript à la volée… ex
Certes, je vois de là les plus septiques dire « tout ce que tu nous dis là, c’était déjà possible sans JQuery » et ils auront raison… MAIS faire chacun de ses actions en 3 lignes, c’est ce que nous apporte JQuery !
De plus, le plugin JQuery possède un grand nombre de "sous plugins" que l’on peut inclure séparément pour alléger le poids de la librairie primaire tout en nous offrant des possibilités supplémentaires.
Un zoom en 2 lignes de code :
/*définition des options var options ={ zoomWidth: 250, zoomHeight: 250 } */
/* appel de la fonction $(".jqzoom").jqzoom(options); */
Et voila, vous obtenez un zoom sur une image de la hauteur / longueur choisie et une image principale avec un flou...
Exemples de pop-up avec JQuery :
Exemple de pop-up "classique" sans JQuery :
Des cades exotiques design :
Il y a peu Psykopat parlait d'une des nouveautés du CSS3 (ici): notamment les cadres arrondis et ombrés
JQuery implémente lui aussi un sous plugin qui permet de générer une bonne cinquantaine de cadres : quelques exemples ici et un petit imprime écran
Pour conclure ce billet... si vous avez du code Javascript un minimum complexe et/ou long à faire, pensez à JQuery, il y a de fortes chances que ce dont vous ayez besoin ait déjà été codé.
Il en résultera trés certainement un gain de temps de codage, ainsi qu'un code épuré et rapide...
"On ne perds jamais rien à être intélligement faignant." E. Salvat
A la découverte de la Finlande
Billets similaires | TagsJQuery developpement web Javascript design moderne annimation |
Commentaires 2 commentaires
Seb le 02 Août 2009 à 13:50
Hey, bienvenue à ton premier post le Yep !C'est sympa en effet, bien pratique et plutôt propre en général (sauf les cadres, sincèrement c'est pas très propre et j'aime pas le principe d'empiler des div à la pelle perso). Par contre est-ce que le fait d'utiliser une grosse bibliothèque remplie de fonctions dont on a pas forcément besoin ne risque pas de ralentir la navigation ? Rien que sur les pages de démonstrations j'ai parfois des freezes très désagréables.
En tout cas, merci pour cette introduction à JQuery, et gloire au Yep !
Yep le 02 Août 2009 à 16:00
pour le fait de ralentir le navigateur... je répondrais que comme toute les bibliothèques, le principe d'avoir des fonction qu'on n'utilise qu'en partie est source de diminution de vitesse. c'est certain ! Maintenant, il faut trouver le compromis pratique(de développement)/vitesse ! et je pense que niveau pratique JQuery vaut vraiment le détour ^^pour ce qui est des freezes, je les ai pas constaté :s :p