Tabber

Basisløsning

Prinsippet er at vi bygger opp en HTML-struktur og lar Javascriptet introdusere dynamikken.

Selve HTML-koden er svært enkel:

<div class="tabber" style="width:300px">
     <div class="tabbertab">
      <h3>Tab1</h3>
      <p><img src="https://borres.hiof.no/resources/images/self/bs1.png" alt="bs1"/></p>
     </div>
     <div class="tabbertab">
      <h3>Tab2</h3>
      <p><img src="https://borres.hiof.no/resources/images/self/bs2.png" alt="bs1"/></p>
     </div>
     <div class="tabbertab">
      <h3>Tab3</h3>
      <p><img src="https://borres.hiof.no/resources/images/self/bs3.png" alt="bs3"/></p>
     </div>
</div>

Ved hjelp av class tabber og tabbertab greier Javascriptet å introdusere den nødvendige dynamikken.

Merk også at tabber introduserer to stilsett, ett for screen og ett for print. Stilsettet for print ordner de tre tabenes innhold under hverandre. Prøv "print preview" eller "print" i webleseren.

Du kan inspisere dette eksempelet isolert på en egen side. Der kan du også se hvordan DOM en endres.

Hierarkisk løsning

Vi kan også ha "tabber inne i tabber". Inspiser kildekoden på dette eksempelet.

Løsning med hukommelse

Vi kan bruke cookies til å huske hvilken tab som var åpnet sist.

Ajax løsning

Det er nærliggende å tenke seg muligheten av å laste opp innholdet id de forskjellige fanene (tabbene) etter behov

Denne løsningen bruker jquery [2] som ajax-bibliotek.