JavaScript – Kreiranje navigacione linije

  –  

Kada imate sajt koji se sastoji od ogromnog broja stranica, problem za posetioca sajta može biti navigacija. U tom slučaju kao jedno od rešenja možemo koristiti navigacionu liniju u obliku drop down menija. Kao primer ćemo navesti sajt neke firme koja se bavi prodajom prehrambenih artikala. Te, da bi se posetilac lakše snalazio, proizvode smo podelili u grupe, a o svakoj grupi proizvoda imamo recimo tri različite stranice sa različitim sadržajem. Uzmimo da imamo sledeće grupe proizvoda, i svakoj od njih ćemo radi olakšavanja programskog dela dodeliti po jedno latinično slovo:

  • Žitarice – slovo „z“
  • Mlečni proizvodi – slovo „m“
  • Hemija – slovo „h“
Nakon ovoga definisaćemo i tri različite vrste informacija o grupama proizvoda, za svaku stranicu sa njihovim šiframa:
  • Lista proizvoda – šifra „lista“
  • Cene – šifra „cene“
  • Podrška – šifra „podrska“
Pre nego što napišete funkciju za navigaciju, potrebno je kreirate formu za navigaciju koja će se sastojati od dva padajuća menija i jednog dugmeta. U prvoj listi će se izlistati grupe proizvoda, a u drugoj detaljnije informacije za određenu grupu proizvoda. Ovo ćemo uraditi preko jedne forme, ubacite sledeći kod na stranicu: 



<FORM name="navform">

<SELECT name="grupe">

<OPTION VALUE="x" SELECTED>Izaberite grupu

<OPTION VALUE="z">Zitarice

<OPTION VALUE="m">Mlecni proizvodi

<OPTION VALUE="h">Hemija

</SELECT>

<SELECT name="kategorija">

<OPTION VALUE="x" SELECTED>Izaberite info

<OPTION VALUE="lista">Lista proizvoda

<OPTION VALUE="cene">Cene

<OPTION VALUE="podrska">Podrska

</SELECT>

<INPUT TYPE="button" NAME="start" VALUE="Start"

onClick="Navigate();">

</FORM>

Šta dešava kada posetilac dođe na stranicu? Prvo, sa prve padajuće liste bira grupu proizvoda, a zatim sa druge liste željeni tip informacije. Kada napravi izbor, klikne dugme „Start“. Kada je kliknuo dugme, događa se događaj „onClick“ koji izaziva pokretanje funkcije „Navigate“. Evo i same funkcije „Navigate“, koju treba da postavite između „HEAD“ tagova stranice: 



function Navigate() {

   grp = document.navform.grupe.selectedIndex;

   kat = document.navform.kategorija.selectedIndex;

   vredgrp = document.navform.grupe.options[grp].value;

   vredkat = document.navform.category.options[kat].value;

   if (vredgrp == "x" || vredkat == "x") return;

   window.location = vredgrp + "_" + vredkat + ".htm";

}

Šta radi ova funkcija? Prvo se očitaju indeksi izabranih opcija i smeštaju u promenljive, a zatim se u druge promenljive smešta string podatak iz osobine „VALUE“. Kombinacijom dve vrednosti „VALUE“ dobijamo naziv same stranice koja sadrži detaljnu informaciju o određenoj grupi proizvoda. Na primer, grupa proizvoda „Hemija“ (sa šifrom h) i informacija o cenama (sa šifrom „cene“) grade string: 



„h_cene.htm“

Na ovaj način smo odveli posetioca na stranicu „h_cene.htm“. Izuzetak je kada se funkciji proslede dve „x“ šifre, koje se proveravaju u pretposlednjoj liniji. Na ovaj način smo se obezbedili od toga da kada posetilac ne izabere ni jednu grupu, ni vrstu informacija, a klikne dugme „Start“. Tada se ništa ne dešava.

Pratite Krstaricu na www.krstarica.com