Le blog CSSKarma nous propose un code JQuery (qui n’est pas tout à fait sous la forme d’un plugin, mais le code est proposé « clé-en-main ») permettant d’améliorer l’ergonomie des formulaires.

L’effet est tout simple, les labels des champs du formulaires sont à l’intérieur des champs de texte inactifs et lorsque le champ prend le focus, son label se déplace vers la gauche pour sortir du champ. Si l’utilisateur n’a rien saisi dans le champ, le label retrouve sa position initiale, autrement, il reste en dehors du champ.

Je trouve cette technique toute bête assez efficace et qui peut ajouter un petit plus à vos formulaires.

Ils ont nommé cela SlidingLabels et un démo est disponible directement ici.

Le plugin JQuery Roundabout (clique sur l’image pour accéder au site) permet de manipuler le DOM HTML pour faire des animations et organiser des éléments de manière poussé (comme par exemple sur la capture d’écran ci-dessus).

Les utilisations sont multiples : on peut l’utiliser de manière classique, sur des images ou sur des éléments de formulaires (et c’est cette application que j’apprécie le plus). Il faut aussi voir la démo sur tous les contrôles JQuery réalisables avec le plugin JQuery.

Le nombre d’options est assez important, on peut donc faire plein de choses différentes avec le plugin. J’ai trouvé la doc bien claire et exhaustive, les exemples et démos sont suffisants. Il ne faut rien de plus, à mon avis, pour le classer parmi les bons plugins JQuery !

Le plugin JQuery Popeye (sympa le jeu de mot) est un plugin de ligthbox classique avec des fonctionnalités supplémentaires. Tout d’abord, à l’agrandissement, l’image n’est pas centrer sur la page, elle démarre à l’endroit où elle se situe dans la page en passant au dessus du contenu.

Il y a également la possibilité de d’afficher une légende sous l’image au survol. A noter qu’il est possible de faire apparaître les boutons de contrôle de l’image directement sur la miniature (image précédente, image suivant, agrandissement de l’image).

Le plugin est bien fait, on voit bien que le graphisme du plugin a été très travaillé. Le nombre d’options est assez élevé et qui sont suffisant pour un plugin de lightbox.

démo

Après avoir testé plusieurs plugins JQuery d’info-bulles, j’ai enfin trouvé le plugin ultime : Qtip. Le plugin JQuery gère toutes sortes d’info-bulles différente :

• avec le contenu basé sur l’attribut title
• avec le contenu d’un élément du DOM
• avec des images
• des info-bulles modales (de type boîte de dialogue)
• avec le contenu chargé en AJAX
• …

Pleins d’options sont disponibles telles que le placement exact de la tooltip, son style, sa taille… Et j’en passe. Il faut voir toutes les démos disponibles sur le site !

Demo du plugin Qtip

Les info-bulles par défaut sont déjà parfaitement exploitable, alors rien qu’en les personnalisant un peu…

En fait derrière ce titre un peu racoleur (je l’avoue), je vais présenter 10 plugins JQuery parmi ceux que je trouve les plus utiles. J’ai essayé de diversifier au plus les plugins que je présente, on retrouve donc en vrac des plugins pour les photos, des sliders, un color picker… Je me suis déjà servi de (quasiment) tous ces plugins sur les divers sites auxquels j’ai participé.

Photos / Lightbox

Cycle :

Le plugin JQuery Cycle est, je pense, un des plugins les plus connus. Il permet de faire des diaporamas de photos. Sa facilité d’utilisation et le grand nombre d’effets de transition proposés permet à (presque) n’importe la possibilité de créer un diaporama. J’avais rédigé, il y a quelques temps un tutorial pour mettre en place ce plugin.

JParallax :

JParallax est un plugin unique en son genre. Il permet de créer un effet ‘parallaxe’, c’est-à-dire que diverse images superposées bougent comme si l’on regardait par une fenêtre. Je m’en suis servi sur mon portfolio, je t’invite donc à aller voir ce que ça donne !

Shadowbox :

Un des meilleurs plugins de Ligthbox. Il est très souple et très complet, on peut afficher tout et n’importe quoi dans la shadowbox : une image, du contenu HTML, une page complète (iframe), une animation flash… Beaucoup d’options sont disponibles à l’initialisation. J’avoue que ce n’est pas à proprement parler un plugin spécifique à JQuery mais je l’utilise très souvent !

Slider

EasySlide :

Un slider très complet (rien qu’en voyant le nombre d’options disponibles). Le résultat final donne un slider très fluide, qui fonctionne bien comme on lui demande. Avec tous les paramètres qu’on peut définir, il est très facilement personnalisable.

Scrollable :

Le plugin Scrollable permet également de créer un slider. Mais celui-ci est différent du plugin EasySlide dans le sens ou il est possible afficher les éléments 3 par 3 (ou 4 par 4…). Ici aussi il y a plein de paramètres que l’on peut définir. Il est même possible de gérer la molette de la souris pour scroller le éléments.

Menu déroulant

Droppy :

Droppy est un plugin assez utilisé (je l’ai vu sur de nombreux sites). Les menus déroulants n’ont jamais été aussi facile à mettre en place depuis la sortie du plugin. Il suffit d’imbriquer des listes non ordonnées (<ul>) afin de créer les différents niveaux du menu déroulant, de modifier les couleurs et les quelques options disponibles et le tour est joué ! A noter que j’avais rédigé un tutorial expliquant son utilisation.

Color Picker

Farbtastic :

Le plugin JQuery Farbtastic permet d’intégrer facilement un color picker sur une page HTML. Il peut servir notamment pour toutes sortes d’applications en ligne. Pour l’avoir utiliser sur un site perso, je peux dire qu’il est assez d’utilisation.

Divers

LazyLoad :

Le plugin Lazy Load permet le chargement à la volée des photos. Les photos uniquement visible au chargement de la page sont chargées (donc celles du haut de la page) et les autres sont chargées au fur et à mesure que le visiteur scrolle. Le plugin permet donc d’alléger la charge serveur !

Contactable :

Contactable est plugin JQuery que j’ai présenté il y a peu. Il permet très facilement de créer un formulaire de contact avec un lien qui se calera sur le bord gauche de la page. Il y même le fichier PHP qui permet de traiter le formulaire fourni avec le plugin. C’est donc du tout cuit !

Impromptu :

Impromptu est plugin JQuery permettant de mettre en avant des informations comme avec un ‘alert’ (ou ‘confirm’ ou ‘prompt’) de JavaScript. La différence est que les boîtes de dialogues qui s’affichent sont personnalisable en CSS et un le contenu du reste du site est ‘caché’ avec un effet d’opacité.

Si tu connais d’autres plugins JQuery dont je n’ai (encore) parlé sur le blog, n’hésite pas à me prévenir dans les commentaires, par twitter ou par signaux de fumée !
Ca faisait quelques temps que j’avais pas rédigé un article aussi long 8O. Je vais essayer de le faire plus souvent !

Le plugin JQuery Delectable (encore un plugin par theodin) permet d’afficher très facilement les dernières adresses ajoutées à un compte Delicious. Il est similaire au plugin JQuery Tweetable dans son fonctionnement. Comme souvent, j’ai préparé une petite démo :

demo du plugin JQuery Delectable

Le plugin est assez complet car, en plus d’afficher l’URL du bookmark, on peut afficher les tags rattachés et la date d’ajout. Un système de mise en avant des tags est même intégré lorsque l’on clique sur un de ces tags.

Comme toujours, il faut importer JQuery et le plugin dans sa page HTML :

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"><!--mce:0--></script>
<script src="js/jquery.delectable.js" type="text/javascript"><!--mce:1--></script>

On crée par la suite un bloc vide auquel on donne un id pour le sélectionner avec JQuery :

Il faut enfin initialiser le plugin JQuery en passant le sélecteur du div créé précédemment et quelques options :

$(document).ready( function () {
	$('#delicious').delectable({
                username: 'arnaudk', // nom d'utilisateur du compte Delicious
                tags: true, // on affiche ou non les tags
                date:true, // on affiche ou non la date d'ajout du bookmark
                limit: 20 // nombre de bookmarks à afficher
        });
});

Pour conclure, encore un plugin JQuery permettant de lier les divers réseaux sociaux et autres sites dits ‘2.0′. On peut maintenant afficher facilement son Twitter, ses dernières photos Flickr et ses derniers bookmarks Delicious sur une même page !

Le plugin JQuery Flip! permet de faire des tourner des blocs, des éléments selon les axes X ou Y avec un effet 3d. Pour mieux comprendre, je t’invite à aller voir la démo sur le site du plugin.

Voir la démo

L’animation est (sur mon poste) fluide. on peut même voir un fondu entre les couleurs de fond des blocs. Divers paramètres permettent de personnaliser l’animation : la direction, la vitesse, la couleur de fond et de paramétrer des callbacks.

Enfin, à noter qu’en plus du framework JQuery, il est nécessaire d’avoir le plugin JQueryUI pour faire fonctionner le plugin JQuery Flip!.