Einfache Akkordeon mit der Klasse USimpleTabStrip

Mittwoch, 20. August 2008

Die Klasse USimpleTabStrip vorgelegt Einfache unaufdringlich TabStrip, kann auch verwendet werden, um ein einfaches Menü Akkordeon.
Mit den Auswirkungen der BlindUp() und BlindDown() von scriptaculous:

Plain Text
JavaScript:
  1. Funktion init () (
  2. ; UTS = new USimpleTabStrip ();
  3. ; UTS. Init ();
  4. ( e ) { UTS. OnShow = function (e) (
  5. ( e ) ; neuen Effekt. BlindDown (e);
  6. )
  7. ( e ) { UTS. OnHide = function (e) (
  8. ( e ) ; neuen Effekt. BlindUp (e);
  9. )
  10. )

E Neupositionierung des HTML (HTML):

Plain Text
HTML:
  1. > <div class = "accordion">
  2. > Accordion 1 </a> <a href = "#acc1"> Akkordeon 1 </ a>
  3. > </a> <a name = "acc1"> </ a>
  5. <h1> Inhalt # 1 </ h1>
  6. <p> Bla bla bla .... </ p>
  7. </ Div>
  9. > Accordion 2 </a> <a href = "#acc2"> Akkordeon 2 </ a>
  10. > </a> <a name = "acc2"> </ a>
  12. <h1> Inhalt # 2 </ h1>
  13. <p> Bla bla bla .... </ p>
  14. </ Div>
  16. > Accordion 3 </a> <a href = "#acc3"> Akkordeon 3 </ a>
  17. > </a> <a name = "acc3"> </ a>
  19. <h1> Inhalt # 3 </ h1>
  20. <p> Bla bla bla .... </ p>
  21. </ Div>
  23. </ Div>

Das Ergebnis ist ein einfaches Menü Akkordeon, die verwendet werden können in einer Art und Weise sehr schnell.

Verwandte Post

Schlagwörter:
Im Internet veröffentlicht, Javascript, Entwicklung, Tutorials | Kein Kommentar »

Einfache unaufdringlich TabStrip

Donnerstag, 14. August 2008

USimpleTabStrip ist ein unaufdringlich JavaScript, um die klassischen Sprungnavigation (noch) innerhalb einer HTML-Seite. Diese Quelle ist eine Verbesserung der Funktion, die in dezenten TabStrip. In dieser Version auch, um den Code zu Release 1.6 von prototype.js hat eine echte Klasse für die Verwaltung der TabStrip. Die Freigabe ist sehr einfach und unkompliziert. Seine wichtigste Arbeit liegt in der Zugabe einer Veranstaltung klicken Sie auf den normalen Link Anker. Sind auch nicht CSS-Stile, nur um die maximale Freiheit des Handelns, aber Sie können sich eine effektive TabStrip mit wenigen Zeilen CSS hinzufügen, finden Sie unter Hinzufügen CSS unten.

HTML-Code

Die Klasse USimpleTabStrip auf eine sehr einfache HTML-, Anker sftuttando <a name></a>

Plain Text
HTML:
  1. <! - Einfache Liste von Links auf der Seite ->
  3. > Link 1 </a> </li> <a href = "#tbs1"> Link 1 </ a> </ li>
  4. > Link 2 </a> </li> <a href = "#tbs2"> Link 2 </ a> </ li>
  5. > Link 3 </a> </li> <a href = "#tbs3"> Link 3 </ a> </ li>
  6. </ Ul>
  8. <! - Blocks / Tabs ->
  10. > </a> <a name = "tbs1"> </ a>
  12. <h1> Card # 1 </ h1>
  13. <p> Bla bla bla .... </ p>
  14. </ Div>
  16. > </a> <a name = "tbs2"> </ a>
  18. <h1> Card # 2 </ h1>
  19. <p> Bla bla bla .... </ p>
  20. </ Div>
  22. > </a> <a name = "tbs3"> </ a>
  24. <h1> Card # 3 </ h1>
  25. <p> Bla bla bla .... </ p>
  26. </ Div>

Das Tag div knapp unter den Anker a arbeiten aus dem Behälter.

Lesen Sie weiter ... "

Verwandte Post

Tags:
Im Internet veröffentlicht, Javascript, Entwicklung, Tutorials | 1 Kommentar »