JavaScript – Kreiranje navigacione linije

 –  aลพurirano:  –  

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