Enkelt trekkspill med klassen USimpleTabStrip

Onsdag 20 august 2008

Klassen USimpleTabStrip fyller Enkelt unobtrusive TabStrip, kan også brukes til å lage en enkel meny trekkspill.
Bruke effekter av BlindUp() og BlindDown() tilbudt av scriptaculous:

Plain Text
JavaScript:
  1. funksjonen init () (
  2. ; UTS = ny USimpleTabStrip ();
  3. ; UTS. Init ();
  4. ( e ) { UTS. OnShow = funksjonen (e) (
  5. ( e ) ; nye Effect. BlindDown (e);
  6. )
  7. ( e ) { UTS. OnHide = funksjonen (e) (
  8. ( e ) ; nye Effect. BlindUp (e);
  9. )
  10. )

E repositioning HTML (HTML-kilde):

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

Resultatet er en enkel meny trekkspill som kan brukes på en måte veldig fort.

Relaterte Innlegg

Tags:
Publisert på Internett, Javascript, Utvikling, Guider | Ingen kommentar »

Enkelt unobtrusive TabStrip

Torsdag, 14. august 2008

USimpleTabStrip er et lite påtrengende JavaScript for å forbedre klassiske anker linken (ennå) i en HTML-side. Denne kilden er en forbedring av funksjon presentert i unobtrusive TabStrip. I denne versjonen, i tillegg til å rette inn koden for å frigi 1.6 av prototype.js har skapt en virkelig klasse for å administrere TabStrip. Utgivelsen her er meget enkel og grei. Dens viktigste arbeidet ligger i å legge til en hendelse klikker vanlig link anker. Er heller ikke presentert CSS stiler, bare å la det maksimale handlefrihet, men du kan få en effektiv TabStrip med få linjer med CSS legge til, se Legge til CSS stil under.

HTML code

Klassen USimpleTabStrip arbeider med en svært enkel HTML, ankeret sftuttando <a name></a>

Plain Text
HTML:
  1. <! - Enkel liste over linker 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. <! - Blokkerer / kategorier ->
  10. > </a> <a name = "tbs1"> </ a>
  12. <h1> Card # 1 </ h1>
  13. <p> Blå bla bla .... </ p>
  14. </ Div>
  16. > </a> <a name = "tbs2"> </ a>
  18. <h1> Card # 2 </ h1>
  19. <p> Blå bla bla .... </ p>
  20. </ Div>
  22. > </a> <a name = "tbs3"> </ a>
  24. <h1> Card # 3 </ h1>
  25. <p> Blå bla bla .... </ p>
  26. </ Div>

Koden div like nedenfor ankeret a arbeide fra beholderen.

Fortsett å lese ... "

Relaterte Innlegg

Tags:
Publisert på Internett, Javascript, Utvikling, Guider | 1 Comment »