USimpleTabStrip Dezente JavaScript ist es, die klassische Anker-Links (noch) nicht innerhalb einer HTML-Seite zu verbessern. Diese Quelle ist eine Verbesserung der Funktion im vorgestellten Unauffällig Tabstrip . In dieser Version sowie Ausrichtung der Code mit Release 1.6 von prototype.js hat eine echte Klasse, um die Register zu handhaben. Die Mitteilung ist hier sehr einfach und unkompliziert. Sein Hauptwerk liegt in Hinzufügen eines Click-Ereignis den normalen Link zu verankern. CSS-Stile auch nicht vorgelegt werden, nur um die maximale Handlungsfreiheit zu verlassen, aber Sie können einen bekommen effektive TabStrip mit ein paar zusätzlichen Zeilen CSS-Code, siehe Hinzufügen von CSS-Stilen unten.
HTML
Die Klasse USimpleTabStrip der Arbeit an einem einfachen HTML, der Anker sftuttando ( <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 25 26 | <-! Einfache Liste von Links auf der Seite -> < ul > = "#tbs1" > Link 1 < / a >< / li > < wird > < ein href = "# tbs1"> Link 1 </ eins > </ sie > = "#tbs2" > Link 2 < / a >< / li > < wird > < ein href = "# tbs2"> Link 2 </ eins > </ sie > = "#tbs3" > Link 3 < / a >< / li > < wird > < ein href = "# tbs3"> Link 3 </ eins > </ sie > </ ul > <-! Blocks / Tabs -> "tbs1" >< / a > < ein name = "tbs1"> </ eins > < div > h1 > < h1 > Listing # 1 </ h1 > p > < p > Blah blah blah .... </ p > </ div > "tbs2" >< / a > < ein name = "tbs2"> </ eins > < div > h1 > < h1 > Listing # 2 </ h1 > p > < p > Blah blah blah .... </ p > </ div > "tbs3" >< / a > < ein name = "tbs3"> </ eins > < div > h1 > < h1 > Data # 3 </ h1 > p > < p > Blah blah blah .... </ p > </ div > |
funziona da contenitore. Das Tag div knapp unterhalb der Anker a als Container zu arbeiten.
Die Klasse USimpleTabStrip
Die Instanziierung USimpleTabStrip hat keine Auswirkung, bis Sie die Methode aufrufen Init() . In diesem Beispiel die Klasse in Aktion sehen können, auf den Link klicken, um die Init aktivieren.
Initialisierung
1 2 3 4 5 6 7 8 9 10 11 | / / Nach der Fertigstellung des Dokuments ruft init (). / / Kann jeder anderen Methode verwendet werden, da Event.observe (window, 'load', ...); / / Je nach verfügbaren Tools ist in diesem Fall / / Google API zum Laden von Bibliotheken init ) ; google setOnLoadCallback (init).; / ** * Wenn die Seite geladen ist trigged * / function init () { new USimpleTabStrip ( ) ; UTS USimpleTabStrip var = new (); } |
Methoden
-
Init()
Initialisiert die Klasse und aktiv auf das Register -
showFirstTab()
Macht alle Registerkarten mit Ausnahme des ersten -
showTabs(v)
) tutti i Tabs Show (true) / hide (false) alle Tabs -
version()
Gebe die Version aus der Klasse
Ereignisrückrufe
Sie können Haken Veranstaltungen zum Anzeigen / Verbergen Register, wie in diesem Beispiel verwendet wurde Scriptaculous zu einem Fade-Effekt auf die Tab-Display (klicken Sie auf den Link SetEffects) hinzu:
1 2 3 4 5 | new USimpleTabStrip ( ) ; UTS USimpleTabStrip var = new (); / / Verwenden Sie Scriptaculous um ein Tab zu sehen function ( e ) { UTS. OnShow = function (e) { ( e ) ; . neuen Effekt erscheinen (s); } |
Hinzufügen von CSS-Stilen
Wie eingangs erwähnt, mit ein paar Definitionen der CSS-Stile können Sie ein echtes machen Layout TabStrip . Hier ist, wie der HTML-Code bearbeiten, um CSS-Stile zu verbinden:
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 > < wird > < ein href = "# tbs1"> Tab 1 </ eins > </ sie > = "#tbs2" > Tab 2 < / a >< / li > < wird > < ein href = "# tbs2"> Tab 2 </ eins > </ sie > = "#tbs3" > Tab 3 < / a >< / li > < wird > < ein href = "# tbs3"> Tab 3 </ eins > </ sie > </ ul > </ div > "tabstrip_boxes" > < div class = "tabstrip_boxes"> "tbs1" >< / a > < ein name = "tbs1"> </ eins > "tabstrip" > < div class = "Tableiste"> h1 > < h1 > # 1 Inhalt </ h1 > p > < p > Blah blah blah .... </ p > </ div > .... </ div > |
Simple CSS Beispiel:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 | / ** * Sample Layout Style für TabStrip * * @ Autor Giovambattista Fazioli * @ @ Email g.fazioli undolog.com * @ Web http://www.undolog.com * * / div. tabstrip_button { 300px ; width: 300px; } div. tabstrip_button zu, , . 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 ; width: 700px; 500px ; height: 500px; #aaa ; background: # aaa; 8px ; padding: 8px; } div. {tab Streifen #fff ; background: # fff; 12px ; padding: 12px; 2px inset #eee ; border: 2px eingelassen # eee; } |
Herunterladen
USimpleTabStrip ist auf Google Code, können Sie den Download RAW hier
[...] USimpleTabStrip Klasse, in Unauffällig Einfache TabStrip präsentiert, kann auch verwendet werden, um ein einfaches Menü Accordion.Utilizzando die Auswirkungen werden [...]