Dinamičko generiranje izbornika

Da ilustriramo snagu dinamičkih promjena na web stranicama pogledajmo kako napraviti izbornik koji se dinamički mijenja ovisno o korisnikovom izboru. Izbornik će prikazati korisnikov odabir tako što će promijeniti izgled odabranog linka.

Skripta će prikazati izbornik sa pet mogućih odabira. Podatak ćemo prenijeti preko URL adrese te ga pročitati i napraviti odgovarajuću akciju.



<script language="JavaScript">

var choice = 0;
var urlParts = document.URL.split("?");

if (urlParts.length > 1)
{
var parameterParts = urlParts[1].split("&");

for (i = 0; i < parameterParts.length; i++)
{

var pairParts = parameterParts[i].split("=");
var pairName = pairParts[0];
var pairValue = pairParts[1];

if (pairName == "choice")
{
choice = pairValue;
}
}
}

</script>



Gornji kod stavite u body dio web stranice. Pogledajmo detaljnije gornju funkciju.


var urlParts = document.URL.split(“?”);


U ovo polje smještamo dio URL adrese u kojem su zapisani podaci koje ćemo koristiti.


if (urlParts.length > 1)


Sa prvim IF provjeravamo da li stvarno postoje podaci koje treba pročitati.


var parameterParts = urlParts[1].split("&");


U polje parameterParts smještamo sve podatke koji se nalaze u adresi.


for (i = 0; i < parameterParts.length; i++)


Sa FOR petljom prolazimo kroz sve podatke i tražimo onaj koji nas zanima, a to je choice. Kada njega pronađemo, vrijednost smjestimo u JavaScript varijablu choice.

Na kraju još ostaje da napravimo izbornik koji će se dinamički mijenjati ovisno o upravo dobivenoj varijabli choice. Taj dio ćemo jednostavno napraviti preko IF funkcije.



<script>

if (choice == 1)
{
document.write("<strong>Izbornik 1</strong><br>");
}
else
{
document.write("<a href='index.php?choice=1'>Izbornik 1</a><br>");
}

if (choice == 2)
{
document.write("<strong>Izbornik 2</strong><br>");
}
else
{
document.write("<a href='index.php?choice=2'>Izbornik 2</a><br>");
}


if (choice == 3)
{
document.write("<strong>Izbornik 3</strong><br>");
}
else
{
document.write("<a href='index.php?choice=3'>Izbornik 3</a><br>");
}

if (choice == 4)
{
document.write("<strong>Izbornik 4</strong><br>");
}
else
{
document.write("<a href='index.php?choice=4'>Izbornik 4</a><br>");
}

if (choice == 5)
{
document.write("<strong>Izbornik 5</strong><br>");
}
else
{
document.write("<a href='index.php?choice=5'>Izbornik 5</a><br>");
}


</script>



Gornji kod postavite u body dio web stranice na poziciju gdje će se izbornik prikazivati. Pogledajmo pobliže gornji kod. Za svaki link postoji jedna if-else petlja. Ako je choice varijabla postavljena baš na taj broj linka onda će se naziv linka podebljati i više neće biti link nego obični tekst. Ako varijabla nije od toga broja onda će prikazati link izbornika. I tako ide za svaku stavku izbornika. U ovom slučaju promjena je samo podebljanje slova. Vi možete napraviti bilo kakvu promjenu koristeći HTML tagove. Pogledajmo na kraju cjelokupan kod koji ćete staviti u body dio HTML-a.