JavaScript Tabifier créer automatiquement une interface onglets css html
Si vous commencez avec un certain HTML simple comme ceci:
Ajouter quelques éléments DIV structurels. Ajouter un div class = tabber autour du tout:
Ensuite, ajoutez un div class = tabbertab autour de chaque section. Par défaut tabber va obtenir le titre de l'onglet à partir d'un élément de position à l'intérieur de la section, ou vous pouvez définir l'attribut title être le texte de navigation par onglets:
REMARQUE: les DIVs de tabbertab doivent être des noeuds enfants du tabber DIV. Cela a été nécessaire afin de permettre des onglets imbriqués.
Après votre page se termine le chargement, le script est exécuté pour convertir votre HTML brut en HTML dynamique.
Remarque: si vous ne voulez pas d'exécuter automatiquement onLoad, reportez-vous aux sujets avancés.
Troisième étape
Ajouter des styles. Reportez-vous à l'exemple des fichiers CSS fournis ou modifier un des styles de Listamatic.
NOTE: Votre a été transformé en HTML d'origine quelque chose comme ceci:
Notez les points suivants:- La principale div (class = tabber) a été modifiée pour (class = tabberlive). Cela vous permet d'appliquer un style pour le untabbed HTML et un style différent pour le code HTML à onglets.
- Une liste ul est ajouté. Chaque élément de la liste est un lien qui déclenche la navigation dynamique. Le texte du lien est l'attribut title de la tabbertab div.
Sujets avancés
Réglage de l'onglet par défaut
Par défaut, le premier onglet est sélectionné. Pour sélectionner un autre onglet initial, utilisez la classe tabbertabdefault (en plus de la classe tabbertab):
Reportez-vous à example2.html pour le voir en action.
Modification de l'onglet Dynamiquement
D'abord, vous devez donner un identifiant à votre principal tabber div. Un objet tabber est fixé à la div et on peut utiliser la méthode tabShow () pour changer le onglet est affiché: Les onglets sont numérotés à partir de zéro, de sorte utiliser 0 pour la première languette, 1 pour le second onglet, etc.
onLoad désactiver
Lorsque vous chargez tabber.js il met en place un événement à exécuter lorsque la page se termine le chargement. Pour éviter tabber de courir, avant d'inclure tabber.js. configurés comme la variable tabberOptions ceci:
fonctions de rappel d'événement onLoad et onClick
Vous pouvez définir une fonction onLoad être appelée après l'interface onglet initialisation terminée, ou une fonction onClick (être appelée lorsqu'un utilisateur clique sur un onglet).
Reportez-vous à example2.html pour un exemple plus complet.