Simpelt Accordeon med klassen USimpleTabStrip

Onsdag, august 20, 2008

Klassen USimpleTabStrip forelagt Simple diskret TabStrip, kan også bruges til at oprette en simpel menu Accordeon.
Brug af virkningerne af BlindUp() og BlindDown() tilbydes af scriptaculous:

Almindelig tekst
JavaScript:
  1. funktionen init () (
  2. ; UTS = new USimpleTabStrip ();
  3. ; UTS. Init ();
  4. ( e ) { UTS. OnShow = funktion (e) (
  5. ( e ) ; nye Effect. BlindDown (e);
  6. )
  7. ( e ) { UTS. OnHide = funktion (e) (
  8. ( e ) ; nye Effect. BlindUp (e);
  9. )
  10. )

E Repositionering HTML (HTML kilde):

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

Resultatet er en enkel menu Accordeon, der kan bruges på en måde meget hurtigt.

Related Post

Tags:
Offentliggøres på internettet, Javascript, Udvikling, Tutorials | Ingen kommentarer »

Simple diskret TabStrip

Torsdag den 14. august 2008

USimpleTabStrip er en diskret JavaScript for at forbedre den klassiske anker link (endnu) i et HTML-side. Denne kilde er en forbedring af funktionen præsenteres i diskret TabStrip. I denne version såvel at tilpasse koden til release 1.6 af prototype.js har skabt et reelt klasse til at forvalte TabStrip. Frigivelsen her er meget enkel og ligetil. Dets vigtigste arbejde ligger i at tilføje en begivenhed, skal du klikke på den normale link anker. Er heller ikke fremlagt CSS stilarter, lige til at forlade den maksimale frihed til, men du kan få en effektiv TabStrip med par linjer af CSS tilføje, se Tilføjelse CSS stil nedenfor.

HTML-kode

Klassen USimpleTabStrip arbejder på en meget simpel HTML, ankeret sftuttando <a name></a>

Almindelig tekst
HTML:
  1. <! - Simple liste over links på siden ->
  3. > Link 1 </a> </li> <li> <a href = "#tbs1"> Link 1 </ a> </ li>
  4. > Link 2 </a> </li> <li> <a href = "#tbs2"> Link 2 </ a> </ li>
  5. > Link 3 </a> </li> <li> <a href = "#tbs3"> Link 3 </ a> </ li>
  6. </ Ul>
  8. <! - Blokke / faner ->
  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>

Koden div lige under ankeret a arbejde fra beholderen.

Fortsæt læsning ... "

Related Post

Tags:
Offentliggøres på internettet, Javascript, Udvikling, Tutorials | 1 Kommentar »