Archives des tags : Onglets

Pas encore de description pour le tag Onglets. Suggérez à l'administrateur du site de d'y remédier.

390 ressources Javascript & jQuery

Cette liste de liens pour le développeur web front-end et l’intégrateur HTML & CSS est issue de la veille documentée que j’effectue depuis deux ans sur le blog Javascript & Webdesign. Elle reprend les 139 ressources Javascript et jQuery déjà publiées sur ce site, auxquelles j’ai ajouté les 78 nouveaux liens publiés depuis, ainsi que 73 tutoriels pour créer des diaporamas et autres Slideshows. Last but not least, vous pourrez accéder à une dernière liste composée d’une bonne centaine de bibliothèques Javascript (Polyfills) pour émuler HTML5 dans les navigateurs qui ne prennent pas les nouvelles API’s en charge. A quelques exceptions près, les  liens pointent directement sur les sources d’origine.

nanotabs — Menu à onglets Javascript ultra-léger

nanotabs — Cette version allégée du plugin jQuery idTabs est un script autonome (sans jQuery ou autre framework Javascript) qui permet de faire des menus à onglets à partir de simples listes pour le poids dérisoire de 2 KB, ce qui ne devrait pas gréver les performances d’affichage de votre site ou de votre blog. 

Coda Slider Effect — Navigation par onglets accessible avec effet de Slide

Coda Slider Effect est un des nombreux excellents tutoriels proposés par Remy Sharp sur jQuery for Designers. Au menu de Coda Slider Effect : un système de navigation par onglets accessible avec effet de Slide du plus bel effet composé de plusieurs plugins tels que scrollTo, localScroll et serialScroll. Dégradation grâcieuse en l’absence de Javascript, effet de slide respectueux de votre CPU et maintient de la navigation courante via les «hash».

SimpleTabs — Onglets Javascript non-intrusif

SimpleTabs est un script autonome écrit en Javascript par Fotis Evangelou. Il permet de mettre en place facilement un système de navigation à base d’onglets (tabs). J’aime bien le côté autonome du script qui ne dépend ainsi d’aucune bibliothèque tierce pour fonctionner. Pas besoin de jQuery ou de Mootools ! Le script se souvient du dernier onglet cliqué et se place sur celui-ci après un rechargement de page ou l’utilisation du bouton « Retour » du navigateur. SimpleTabs est simple à mettre en place, léger (2,4 Kio) et compatible avec tous les navigateurs.

DOMTab — Menu à onglets simple et efficace

DOMTab — Ce script non-intrusif transforme une liste de liens en un système de menu à onglets (plusieurs menus sur une même page possibles). Parmi les plus : la possibilité de faire un lien vers un onglet et la mise en place de liens suivant et précédent pour accéder aux onglets (y compris avec une image). Voir mon comparatif entre DOMTab et idTabs pour en savoir plus.

Un diaporama avec AnythingSlider jQuery Plugin

Voici un diaporama de très bonne facture qui fera le bonheur de tous. Le contenu de chaque diapo peut être réalisé à l’aide du composé HTML de votre choix (texte, images, etc.) et chacune d’elle peut être directement accessible via un système d’onglet. Mais trêve de bavardage, je vous laisse avec la démo, le lien de téléchargement et l’exemple d’appel du slideshow avec ses paramètres :

Menu à onglets (tabs) — idTabs ou domTab ?

Menu à onglets avec Javascript et CSS fait partie des articles les plus lus de ce *blogzine*. Mais la solution présentée n’est pas un modèle d’accessibilité car elle ne fonctionne plus correctement si Javascript est désactivé. Dans ce cas, le menu reste bloqué sur le premier onglet actif. Bien que certains trouvent qu’il s’agit d’une fonctionnalité et non d’un défaut, je préconise deux scripts bien plus accessibles et efficaces : idTabs de Sean Catchpole et domtab de Chris Heilmann.

Nanotabs — un idTabs minimaliste sans jQuery

Sean Catchpole, le créateur du plugin idTabs pour jQuery nous propose nanotabs un nouveau script minimaliste pour gérer des menus à onglets (mais pas seulement).

*Nanotabs* peut faire tout ce que faisait *idTab*s avec même quelques options supplémentaires, le tout sans utiliser le *framework jQuery* !