Jquery Pagination System — Les systèmes de navigation sont généralement programmé côté serveur et sont relativement gourmands en requêtes MySQL et en preprocessing PHP. Cette pagination est entièrement réalisée avec jQuery, côté client, donc. Un exemple à copier-coller est disponible pour vous faire une idée.
jQuery Flash Plugin — Inspiré par SWFObject, UFO et sIFR, jQuery Flash Plugin a été complètement réécrit via jQuery pour éviter les redondances telles que recherche des éléments par leurs sélecteurs, la détection du navigateur, détection de Flash et améliorer les temps de chargement (si vous utilisez déjà jQuery, bien entendu). Sert aussi bien à faire du simple remplacement des contenus alternatifs par une animation Flash ou remplace le texte contenu dans une balise par l’équivalent avec la police de caractère de votre choix (comme sIFR) !
jQuery UI Multiselect — Améliore l’apparence et l’ergonomie de la balise HTML select basé sur jQuery 1.3 et jQuery UI 1.7, ce plugin dispose même d’un champs pour rechercher parmis les options proposées. Via arnaud-k.
jQuery Tools — Si jQuery UI propose des éléments d’interface de qualité, jQuery Tools va encore plus loin en proposant l’incorporation des animations Flash, une gamme étendue d’overlay, des tooltips à foison, des tabs, etc. Voir jQuery Tools: The missing UI library for the Web pour plus d’information. Et pour achever de vous convaincre, voici la page de démontration.
Tipsy — L’attribut HTML title affiche une bulle d’aide pour donner des informations sur la destination du lien à l’utilisateur. C’est bien, mais il faut reconnaitre que par défaut ce rectangle à fond jaune n’est pas toujours raccord avec la charte graphique du site web. Heureusement, Tipsy s’invite à la fête et nous offre sur un plateau des bulles d’aide façon bande dessinée comme celles que l’on trouve sur Facebook ou Twitter. De nombreuses options sont disponibles : du fading à l’apparition à la gravité (la bulle s’oriente en fonction de sa position dans la page). Télécharger Tipsy. Via Dator.
Faire un carrousel avec jQuery — Tutoriel très didactique qui décompose le déroulement des opérations pour réaliser un carrousel de base avec HTML, CSS et jQuery.
Lazy loader — Vous souvenez-vous du préchargement d’images en Javascript ? Et bien ce plugin pour jQuery fait exactement le contraire : il ne charge vos images que lorsqu’elles apparaissent dans la fenêtre du navigateur. Le plugin est doté d’options plutôt bien pensées : seuil en pixels à partir duquel l’image sera chargée ; image de substitution en attendant le chargement de l’image ; apparition des images sur un événement click ou mouseover ; affichage des images après le déclenchement d’une fonction personnalisée, etc. Via Anis Berejeb.
jQuery Magnifier Loupe permet d’effectuer un zoom sur vos images en utilisant (entre autre) l’attribut longdesc pour zoomer à partir d’une miniature (thumbnail). Attention au caractère peu accessible de l’utilisation de l’attribut HTML longdesc prévue à l’origine pour fournir une description de l’image pour les malvoyants. Cela dit, le script ne nécessite pas obligatoirement cet attribut pour fonctionner : il est possible de déclencher la loupe en utilisant la classe .jLoupe sur l’élément img concerné !
News déroulantes à la iTélé — Très bonne solution pour avoir un joli bandeau de news à l’aide de liste de définition, d’une pincée de CSS et d’une bonne rasade de jQuery avec explication de texte. Le tutoriel aborde également les aspects graphiques avec le découpage des images. Profitez-en pour jeter un oeil sur la création de plugins jQuery et sur cet effet de page cornée en quelques lignes de jQuery.
La propriété @font-face (revigorée par CSS3) n’est malheureusement pas disponible sur tous les navigateurs. Il existe néanmoins de nombreuses solutions plus ou moins simples à mettre en oeuvre pour utiliser les fontes de votre choix sur votre site. Cufón semble la solution la plus aboutie en terme de mise en place et de compatibilité avec le plus grand nombre de navigateurs. Voici une liste de quelques articles permettant d’en savoir plus :
