Izbornik sa padajućim popisom

Mnogi veliki portali imaju padajući izbornik sa popisom najvažnijih stranica i usluga na portalu. Ovaj popis najčešće radi na način da vi odaberete naziv stranice i jednostavna JavaScript funkcija vas odvede na odabranu stranicu. Postoji i drugi način, a taj je da vi najprije odaberete željenu stranicu te kliknete na dugme koje se nalazi pokraj popisa. Vi odaberite onu koju najviše želite ili koja vam se slaže sa stranicom. Kao i svaki odabir i jedan i drugi imaju svoje prednosti i mane i ako se ne možete odlučiti koji odabrati mi vam preporučujemo rješenje sa dodatnim dugmetom.

Izbornik bez dodatnog dugmeta

Najprije trebamo napraviti HTML kod sa popisom stranica koristeći <select> tag. Ovaj kod stavite unutar body dijela HTML stranice.

Vidimo sada da select poziva funkciju OtvoriStranicu() čim se promijeni vrijednost polja odnosno čim kliknemo na neku vrijednost. Sada ide kod za ovu funkciju i ovaj kod naravno ide u head dio HTML stranice.

Izbornik sa dodatnim dugmetom

Sada moramo napraviti takvu formu da omogući odabir lokacije i onda sačeka klik na dugme da bi odvela korisnika na odabranu lokaciju. Za ovo ćemo koristiti istu funkciju u JavaScript-u, samo će forma imati dodatno dugme.

Vidimo da sada korisnik nakon odabira mora kliknuti na dugme Otvori koje poziva istu gornju funkciju OtvoriStranicu().
U primjeru bez dodatnog dugmeta lokacija se otvara nakon promjene vrijednosti polja i za to koristimo atribut onChange. Atribut se aktivira samo onda kada se promijeni vrijednost polja. U primjeru sa dodatnim dugmetom koristi se atribut onClick. Ovaj atribut se aktivira samo kada kliknemo na objekt, tj. na dugme. Ostaje nam još da objasnimo window.location.href. Location objekt je predifiniran u JavaScript-u i pomoću njega možemo pristupati vrijednosti location window objekta. Ustvari location predstavlja cijeli URL lokacije koja je otvorena u prozoru. Location ima i svoje vrijednosti i svaka od njih predstavlja dio URL-a:

• protocol – daje vrijednost protokola, tj. prvi dio URL-a
• host – daje vrijednost IP adrese klijenta
• port – daje port na serveru koji se koristi za komunikaciju
• pathname – predstavlja dio URL-a koji pokazuje putanju
• hash – predstavlja dijelove veza (anchor name) i uključuje znak #
• search – daje sve informacije o traženju uključujući i znak ?
• href – daje cijeli URL
• hostname – daje informaciju host:port