DHTML

En dynamisk meny

Med DHTML går det att sätta om ett element ska visas eller inte med attributet style.display och vi ska med hjälp av detta låta användaren bestämma vilka länkar som ska visas i menyn.

Först skapar vi ytterligare en meny till vänster om den riktiga menyn. Denna extrameny är ett formulär som låter användaren välja de länkar som ska synas eller inte synas. Det finns tre olika alternativ för användaren att välja. Alternativen är Alla länkar, Bara egna länkar eller Bara utomstående länkar. När användaren klickar på något av valen anropas en funktion som sköter om att utföra anpassningen av menyn. För att inte få alltför avancerad kod har vi valt att ha en funktion för varje val. Varje funktion har på det här sättet inte så mycket funktionalitet och koden blir inte fullt så svår att förstå. För att lättare kunna förstå tar vi en titt på slutresultatet.

Slutmålet

Här visas alltså bara de egna länkarna, länken till Google är borttagen. Genom att välja de olika alternativen till vänster får menyn ett annorlunda utseende.

Formuläret lägger vi i en tabellcell (TD) bredvid den riktiga menyn :


<TD>

<FORM>



<B>Modifiera menyn</B><BR>	

	<SELECT onchange="changeMenu(this.options[this.selectedIndex].value)">

		<OPTION selected>--Välj länkar--</OPTION >

		<OPTION value="showOwn">Bara egna länkar</OPTION >

		<OPTION value="showOther">Bara utomstående länkar</OPTION >

		<OPTION value="showAll">Alla länkar</OPTION >

	</SELECT>



</FORM>

</TD>

Strukturen på tabellen som utgör menyn får nu följande struktur (där koden för själva menyvalen är ersatt med en enkel text).

Kod

Vi har ersatt den föregående tabellen med en nästlad tabell. Detta betyder att vi ytterst har en tabell med en rad och två celler i.

Hjälpmeny Huvudmenyn + rubrik

Den vänstra cellen ska innehålla hjälpmenyn och i den högra ska menyn som vi tidigare hade ligga. Hela koden för hjälpmenyn hittar du lite längre upp på sidan och den består av ett formulär.

För att hela den tidigare menyn ska kunna ligga i den form som den gjorde innan måste den ligga kvar i sin tabell. Alltså flyttar vi in hela tabellen in i den aktuella tabellcellen och får följande struktur.

Hjälpmeny
Rubrik
Huvudmenyn

Det som heter Rubrik oven är alltså en egen rad i en tabell. Likaså gäller för Huvudmenyn som i sin tur består av fyra celler. Krångligt? Det är inget som du måste kunna till 100% för tillfället, men titta lite på tabellkoden här och försök förstå huvuddragen. Snart kommer du att få se koden i sin helhet. Just nu går vi istället vidare med mer centrala delar av det här avsnittet : Dynamisk HTML.

Vi vill fånga upp en händelse och gör det via ett event. Det event vi ska fånga heter onChange och betyder att användaren ändrar något i listan med val. Dvs, anävändaren väljer ett alternativ. Att fånga ett event betyder att man tar kontrollen och kan t ex anropa funktioner när användaren gör ett speciellt moment på webbsidan. Vi tar kontrollen över vad som ska hända på sidan genom att anropa funktionen changeMenu som vi snart ska skriva. För att komma åt de olika elementen i menyn ska vi dessutom id-märka dem med respektive start, bilder, leksaker och google. Utseendet på den första menycellen blir nu:

<TD id="start" onMouseOver="changeBackground(this, 'green')" onMouseOut="changeBackground(this, 'lightgrey')"> <A HREF="start.html" TARGET="innehåll">Startsidan</A></TD>

Innan vi går vidare id-märker vi även övriga menyalternativ med respektive namn.


<TR>

	<TD id="start" ... > Startsidan </TD>

				

	<TD id="leksaker" ...> Nikes leksaker </TD>

				

	<TD id="bilder" ...> Foton </TD>

				

	<TD id="google" ... > Sök med google </TD>

</TR>

Funktionen som anropas från formuläret heter changeMenu och har som uppgift att ta reda på vad användaren vill göra och i sin tur anropa den funktion som passar. Eftersom formuläret skickar med namnet på det val som användaren har gjort är det bara att titta på detta värde och skicka vidare till den funktion som anges. Det finns andra och snyggare sätt att göra detta på men för att hålla det enkelt gör vi på detta sätt.


function changeMenu(value){

	if (value == "showOwn"){

		showOwn();

	}

	else if (value == "showAll"){

		showAll();

	}

	else if (value == "showOther"){

		showOther();

	}

}

Funktionen showOwn är skriven i JavaScript och ska alltså göra så att bara de länkar som är våra egna visas i menyn. Det här betyder att länken till Google inte ska visas. Koden ser ut såhär:


function showOwn(){

	showAll();

	document.getElementById('google').style.display = "none";

} 

ShowOwn tar inga argument och är inte speciellt avancerad. Först använder den sig av funktionen showAll som vi ska titta på snart. Eftersom vi har märkt upp den TD som länken till Google ligger i kan vi nu nå den via DOMs huvudelement document med hjälp av metoden getElementById. Resultatet som vi får från detta ska göras osynligt, vilket görs genom att sätta stilen display till "ingen". I kod ser det ut som :

style.display = "none"

Vi hade lika gärna kunnat skriva all kod som ligger i funktionen på platsen för funktionsanropet, men för att få snyggare och mer lättläst kod använder vi oss av funktioner. Ytterligare två funktioner ska skapas och koden ser ut såhär:

function showAll(){

	document.getElementById('start').style.display = "";

	document.getElementById('leksaker').style.display = "";

	document.getElementById('bilder').style.display = "";

	document.getElementById('google').style.display = "";

}



function showOther(){

	document.getElementById('start').style.display = "none";

	document.getElementById('leksaker').style.display = "none";

	document.getElementById('bilder').style.display = "none";

	document.getElementById('google').style.display = "";

}

Först är den nyss nämnda showAll som tar fram alla TD-element som har länkar i och sätter dess style.display till "". Den tomma strängen som display lämnar beslutet till webbläsaren hur den ska visa elementet. Det finns ett annat sätt att försöka göra samma sak på genom att sätta style till inline. Det här fungerar bra i t ex Internet Explorer med inte alltid i t ex Mozilla. Resultatet av funktionen vi skrivit är alltså att hela menyn blir synlig.

Funktionen showOther har som uppgift att bara visa den länk som går till Google. Tillvägagångssättet är att dölja de andra länkarna och visa Google-länken på enklast möjliga sätt, alltså genom att återigen använda style.display på elementen. Se resultatet och prova att klicka i menyn till vänster för att se vad som händer.

Resultat

Och hur koden för filen meny.html ser ut går finns också här.

Kod