Vous créez des plugins pour jQuery et vous parvenez à des résultats satisfaisants mais vous vous demandez si vous respectez les bonnes pratiques ? jQuery Boilerplate fournit un modèle de base de développement de plugins jQuery pour utilisateurs débutants ou plus avancés : objet, constructeur et options pour étendre les fonctionnalités.
→ jQuery Boilerplate est disponible sur github.
turn.js est un plugin jQuery créé par Emmanuel Garcia (@blasten) dont le but est d’ajouter un effet de transition entre deux blocs HTML pour donner l’impression que l’on tourne les pages d’un livre ou d’un magazine. Le script est léger (6 kb) et simple d’utilisation. Il utilise l’accélération matérielle et fonctionne sur tablettes et téléphones portables intelligents. →
loupe est un plugin jQuery qui permet d’appliquer un effet loupe sur une image lorsque le curseur passe au-dessus. Avec un poids plume de moins d’un kb un fois minifié, ce script devrait trouver une place dans votre boite à outils web. Son utilisation est simple, il suffit d’initialiser le script de la façon suivante : →
jFontSize est un plugin jQuery développé pour faciliter la création des fameux boutons A+ et A- pour modifier la taille du texte. La classe ou l’identifiant étant un simple paramètre de la fonction $('.some-class-name').jfontsize();, il est très pratique de restreindre les modifications de taille à certaines portions de textes. Les styles des boutons est facilement modifiable avec une pincée de CSS.
ResponsiveSlides.js est un tout petit plugin jQuery permettant de créer des Slideshows qui s’adaptent à la taille de l’écran de l’utilisateur, dans un grand nombre de navigateurs (y compris IE6 !). Seules contraintes : nécessite jQuery et une même taille d’images pour chaque Slideshow. Son point fort ? Une taille de moins de 800 bytes pour un défilement automatique avec fading ou au clic via la pagination. Via Megaptery.
Blueberry est un plugin jQuery expérimental et open source permettant de faire défiler des images (Slider) dans un environnement fluide (Responsive Web Design). Les utilisateurs utilisent de plus en plus souvent des smartphones pour consulter des pages web ; les intégrateurs web ont donc de plus en plus besoin de maquettes flexibles pour les satisfaire. Voici donc un diaporama adapté à cet usage. →
Le webdesign réactif (traduction approximative de Responsive Webdesign) est un ensemble de techniques permettant d’adapter la mise en page d’un site web selon le périphérique de l’utilisateur. Avec l’arrivée des Media Queries en CSS3, le webdesign réactif devient de plus en plus utilisé. Il manquait toutefois des carousels réactifs. C’est le cas de Elastislide qui profitera au mieux des caractéristiques de l’écran. Via @guerrier. →
FlexSlider est un slider, un de plus, qui permettra de faire défiler vos contenus avec le marquage HTML de votre choix. FlexSlider est utilisable avec le clavier, ce qui est toujours bon pour l’accessibilité ; son poids plume (6 kb minifié) est également un atout de taille. Il est possible d’ajouter une légende (caption) pour chaque image. Pour cela, une simple balise p sous l’image suffit. Pour plus de sémantique et pour profiter des nouvelles balises apportées dans la hotte du Père Noël HTML5, il faudrait tester FlexSlider avec une balise figure et un bon vieux figcaption des familles. Merci à @allfordesign et @oncletom pour la suggestion 🙂 →
jQuery Timelinr est un plugin jQuery qui permet de créer un effet de ligne temporelle verticale ou horizontale avec d’un côté des dates et de l’autre des événements. Une démonstration valant mieux qu’un long discours voici deux exemples : défilement horizontal, défilement vertical. →
