USimpleTabStrip discret JavaScript est d'améliorer les liens d'ancrage classique (encore) dans une page HTML. Cette source est une amélioration de la fonction présentée dans TabStrip discret . Dans cette version, ainsi que d'aligner le Code de la version 1.6 de prototype.js a créé une véritable classe pour gérer les TabStrip. Le communiqué présenté ici est très simple et directe. Son travail principal réside dans l'ajout d'un événement de clic de l'ancre du lien normal. Les styles CSS sont également pas présenté, juste pour laisser le maximum de liberté d'action, mais vous pouvez obtenir une TabStrip efficaces avec quelques lignes supplémentaires de code CSS, voir Ajout de styles CSS ci-dessous.
HTML
La classe USimpleTabStrip travaille sur un code HTML simple, le sftuttando ancre ( <a name></a> ):
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25e 26 | <! - Simple liste de liens sur la page -> < ul > = "#tbs1" > Link 1 < / a >< / li > < sera > < une href = "# tbs1"> Lien 1 </ une > </ eux > = "#tbs2" > Link 2 < / a >< / li > < sera > < une href = "# TBS2"> Lien 2 </ une > </ eux > = "#tbs3" > Link 3 < / a >< / li > < sera > < une href = "# tbs3"> Lien 3 </ une > </ eux > </ ul > <! - Blocs / onglets -> "tbs1" >< / a > < une name = "tbs1"> </ une > < div > h1 > < h1 > Liste n ° 1 </ h1 > p > < p > Blah blah blah .... </ p > </ div > "tbs2" >< / a > < une name = "TBS2"> </ une > < div > h1 > < h1 > Liste n ° 2 </ h1 > p > < p > Blah blah blah .... </ p > </ div > "tbs3" >< / a > < une name = "tbs3"> </ une > < div > h1 > < h1 > Data # 3 </ h1 > p > < p > Blah blah blah .... </ p > </ div > |
funziona da contenitore. La balise div juste en dessous du point d'ancrage a travailler comme un conteneur.
La classe USimpleTabStrip
L'instanciation USimpleTabStrip n'a aucun effet jusqu'à ce que vous appelez la méthode Init() . Dans cet exemple , vous pouvez voir la classe en action, cliquez sur le lien pour activer le Init.
Initialisation
1 2 3 4 5 6 7 8 9 10 11 | / / À la fin du document appelle init (). / / Peut être utilisé par toute autre méthode, comme Event.observe (fenêtre, «charge», ...); / / Selon les outils disponibles dans ce cas est / / Google API pour le chargement des bibliothèques init ) ; Google setOnLoadCallback (init).; / ** * Lorsque la page est chargée trigged * / fonction init () { new USimpleTabStrip ( ) ; UTS USimpleTabStrip var = new (); } |
Méthodes
-
Init()
Initialise la classe et active sur le TabStrip -
showFirstTab()
Rend tous les onglets sauf pour le premier -
showTabs(v)
) tutti i Tabs Voir (true) / hide (false) tous les onglets -
version()
Voir la version de la classe
Rappels de l'événement
Vous pouvez brancher des événements pour afficher / cacher l'onglet, comme dans cet exemple a été utilisé Scriptaculous d'ajouter un effet de fondu pour afficher l'onglet (cliquez sur le lien SetEffects):
1 2 3 4 5 | new USimpleTabStrip ( ) ; UTS USimpleTabStrip var = new (); / / Utilisation Scriptaculous pour voir un onglet function ( e ) { UTS. OnShow = function (e) { ( e ) ; . Effet nouveaux apparaissent (s); } |
Ajouter des styles CSS
Comme mentionné au début, avec quelques définitions de styles CSS, vous pouvez faire une vraie mise TabStrip . Voici comment faire pour modifier le code HTML pour associer les styles CSS:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | "tabstrip_button" > < div class = "tabstrip_button"> < ul > = "#tbs1" > Tab 1 < / a >< / li > < sera > < une href = "# tbs1"> Onglet 1 </ une > </ eux > = "#tbs2" > Tab 2 < / a >< / li > < sera > < une href = "# TBS2"> onglet 2 </ une > </ eux > = "#tbs3" > Tab 3 < / a >< / li > < sera > < une href = "# tbs3"> Onglet 3 </ une > </ eux > </ ul > </ div > "tabstrip_boxes" > < div class = "tabstrip_boxes"> "tbs1" >< / a > < une name = "tbs1"> </ une > "tabstrip" > < div class = "strip onglet"> h1 > < h1 > # 1 Content </ h1 > p > < p > Blah blah blah .... </ p > </ div > .... </ div > |
Exemple simple CSS:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25e 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 | / ** * Style Dimensionnement des TabStrip * * @ Auteur Giovambattista Fazioli * @ @ Email g.fazioli undolog.com * @ Web http://www.undolog.com * * / div. tabstrip_button { 300px ; width: 300px; } div. tabstrip_button d', , div. tabstrip_button a: link, { div. tabstrip_button a: visited { block ; display: block; 8px ; padding: 8px; #aaa ; background: # AAA; 1px solid #666 ; border-right: 1px solid # 666; 1px solid #666 ; border-bottom: 1px solid # 666; } { div. tabstrip_button a: hover { #ddd ; background: # ddd; } div. tabstrip_button ul { none ; list-style: none; } div. tabstrip_button li { left ; float: left; } div. tabstrip_boxes { block ; display: block; both ; clear: both; 700px ; largeur: 700px; 500px ; Hauteur: 500px; #aaa ; background: # AAA; 8px ; padding: 8px; } div. {tab strip #fff ; background: # FFF; 12px ; padding: 12px; 2px inset #eee ; marge: 2px inset # eee; } |
Télécharger
USimpleTabStrip est sur Google Code, vous pouvez télécharger le RAW ici
Classe USimpleTabStrip [...], présentés dans TabStrip Simple Discret, peut également être utilisé pour créer un menu simple Accordion.Utilizzando les effets de la [...]