Site links

Generelt

Eksempel på faneblade mhaTabPane er et clientside javascript som emulere faneblade ala dem Microsofts benytter i diverse opsætningsvinduer i kontrolpanelet. Den nedgraderes pænt (degrades gracefully) i ældre browsere eller når css/javascript er slået fra. Se en demo her.

Top

2002.11.14

Der er lavet en ændring så mhaTabPane nu også virker i Opera 7. Browseren understøtter ikke window.addEventListener, så den er ændret til document.addEventListener.

Top

Arkitektur

Data for fanebladene ligger direkte i HTML-dokumentet som div elementer omkring resten af HTML-koden. Hvis JavaScript, CSS og DOM er tilstede på klienten, vises fanebladet som et dynamisk panel man kan klikke på - ellers vises siden som en statisk side, med overskrifter for hver enkel faneblad.

Top

Features

mhaTabPane holder styr på fanebladets status på tværs af sider, nedgradere pænt i gamle browsere og overholder W3C-standarerne for XHTML1.0 / CSS.

Top

Kompatibel

mhaTabPane er designet til nutidens browsere, som understøtter W3C-standarderne. Den er fuldt funktionsdygtig Explorer 5+ på Windows eller Macintosh, eller til en hvilken som helst Mozilla baseret browser såsom Netscape 6. Yderligere vil den være brugbar (dog ikke interaktiv) på ældre eller mindre standardiseret browsere såsom Netscape 4, Explorer 4 og Opera.

Internet Explorer 5+, Win32/Mac
Virker umidelbart
Mozilla
Virker umidelbart
Internet Explorer 4.x, Win32/Mac
Nedgradere pænt
Opera 5
Nedgradere pænt
Netscape 4.x
Nedgradere pænt
Andre DOM2 browsers
Virker umidelbart
Andre DOM1/0 browsers
Nedgradere pænt

Note:Har du en browser, hvor scriptet afviger fra ovenstående, så send mig venligst en e-mail med browser, version samt OS (evt. om du har javascript/cookies slået til/fra).

Top

Demo/download

Se en demonstration af mhaTabPane:

Download mhaTabPane her:

Top

Opsætning

For at bygge din mhaTabPane skal du bruge følgende filer: En javascript-fil (mhaTabPane.js) og et HTML-dokument (mhaTabPane.html) med selve data for fanebladene, som du selv laver. Der udover vil du sikkert også gerne have et stylesheet (mhaTabPane.css) for at refinere designet af fanebladene.

For hver gruppe af faneblade man ønsker på sin side skal man indsætte et div element med class'en mhaTabPane med et unikt id.

En gruppe af faneblad skal indeholde et div element med class'en tabpanel (fanepanel). Det er her at selve knapperne på fanebladet bliver generet dynamisk, når siden loades.

Derudover skal en gruppe af faneblade bestå af x-antal div elementer med class'en tabpage (faneside). Dette er selve fanebladets indhold.
På hvert enkelt faneblad skal der også være et element med class'en tabname (fanenavn), som indikere det navn knappen på fanebladet får. Elementet behøves ikke at være h3 som i eksemplet nedenfor.

Her er et eksempel på HTML-koden til en simpel gruppe af faneblade.


	
	<div class="mhaTabPane" id="test">
		<div class="tabpanel">
		</div>
		<div class="tabpage">
			<h3 class="tabname">Tab 1</h3>
			<p>
				Tabpage 1
			</p>
		</div>
	
		<div class="tabpage">
			<h3 class="tabname">Tab 2</h3>
			<p>
				Tabpage 2
			</p>
		</div>
	</div>

Top

Dokumentation

Koden benytter namespaces (ex. tp.buildTabPane) som du kan læse mere om i artiklen Designing for portability: 1 ved kapitlet "Isolating your code through Namespaces"

Ved eventen onload bliver funktionen tp.findTabPanes kørt. Den benytter tp.getElementsWithClassName til at finde alle de elementer med class'en mhaTabPane (grupper af faneblade) og kører funktionen tp.buildTabPane på dem.

tp.buildTabPane bruger også tp.getElementsWithClassName til at finde alle elementer inden for den aktuelle gruppe af faneblade med class'erne tabpage (faneside), tabname (fanenavn) og tabpanel (fanepanel).

For hver faneblad bliver fanenavnet og fanesiden skjult, samtidig gives et unikt ID.

Dernæst bliver fanepanelet sat op, bestående af hyperlink som køre funktionen showtab, når der bliver klikket på dem.

Hvis man har sat variablen mhaTabPaneChoosen bliver denne sat til at være vist når siden loades ellers er default første faneblad.

Top