Site links

mhaListTree

Generelt  |   Arkitektur  |   Features  |   Kompatibel  |   Demo/download  |   Dokumentation  |   Opret en HTML-fil  |   Opsætning  |   CSS-filen (Option)

Generelt

mhaListTree er et clientside javascript som emulere et træ der kan udvides/kollapses ala Microsofts stifinderen. Den nedgraderes pænt (degrades gracefully) i ældre browsere eller når css/javascript er slået fra. Se en demo her.

Top

Arkitektur

Data for træet ligger i HTML-dokumentet som en uordnet liste vha. <ul> og <li>. Hvis JavaScript, CSS og DOM er tilstede på clienten, vises træet som en dynamisk udvide/kollapse hiraki - ellers vises træet som en statisk liste, hvor alle noder er åbne.

Top

Features

mhaListTree holder styr på træets status på tværs af sider, tillader brugerdefinerede ikoner for de generelle noder, nedgradere pænt til HTML 2.0, overholder W3C-standarerne for XHTML1.0 / CSS - og er robust nok til at understøtte flere hundrede noder.

Top

Kompatibel

mhaListTree 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 (Netscape 6, m.fl.). 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 M18+
Virker umidelbart
Internet Explorer 4.x, Win32/Mac
Nedgradere pænt
Opera 5
Nedgradere pænt
Netscape 4.x
Nedgradere pænt
Other DOM2 browsers
Virker umidelbart
Other DOM1/0 browsers
Nedgradere pænt
HTML 2- 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 demostration af mhaListTree:

Download mhaListTree her:

Top

Dokumentation

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

Top

Opret en HTML-fil

Det første du gør er at oprette et HTML-dokument med en gyldig DOCTYPE. Her i indsætter du en liste af nested <ul> og <li> elementer som udgør strukturen af dit træ.

Her er et eksempel:

<ul id="navigation" class="listmenu">
	<li><a href="menu1.htm">Menu 1</a>
		<ul>
			<li><a href="menu11.htm">Menu 1.1</a>
				<ul>
					<li><a href="menu111.htm">Menu 1.1.1</a></li>
					<li><a href="menu112.htm">Menu 1.1.2</a></li>
				</ul>
			</li>
			<li><a href="menu11.htm">Menu 1.1</a></li>
		</ul>
	</li>
</ul>

Som du kan se, kan hver <li> list-element indeholde et <a> anker med en href til en fil.

Top

Opsætning

I javascript-filen gør eventen window.onload at funktionen init() bliver kørt lige så snart at HTML-dokumentet er færdig indlæst. Funktion init() starter med at teste på de DOM-metoder som skal bruges til mhaListTree, hvis browseren forstår dem køres mhaListTree ellers gøres intet og listen vises som en almindelige list. I variablen mhaListTree (mhaListTree.js linie 21) opsættes default ikonerne for menupunkter der kan udvides/kollapses samt almindelige punkter.

Top

CSS-filen (Option)

Som med alle andre HTML-dokumenter, kan du via CSS ændre præsentationen af HTML-koden. Udover HTML-elementerne har mhaListTree også en CLASS og ID attribut så du nemt kan ændre udseendet af dit mhaListTree.

Top