Ako na to  |  Príručka JavaScript  |  Navigačné prvky

Ani sme sa nenazdali a máme tu už v poradí 8. časť seriálu o JavaScripte. Pomaly, ale isto sa blížíme ku koncu, a preto ak máte nejaké námety, prípadne ak by ste chceli, aby bola nejaká tématika JavaScriptu rozobratá podrobnejšie, pošlite mi prosím mail.
A o čom bude dnes reč? Keďže máme tu leto - čas dovoleniek a relaxu, dnešná časť seriálu bude oddychová. Predstavíme si niekoľko jednoduchých navigačných prvkov, ktoré sa pri tvorbe webovských stránok môžu zíjsť nejednému z vás.

Navigačné tlačítka

Každý kto pracuje s webovskými formulármi sa s týmito prvkami často stretáva. V dobe, keď ešte JavaScript neexistoval, funkcia týchto tlačítok bola úzko spojená s konkrétnym formulárom. Rozoznávali sme 2 typy tlačítok. TlačítkoSubmit, ktoré zasielalo formulárové dáta na server a tlačítko Reset, ktoré inicializovalo formulár. S príchodom JavaScriptu sa nám otvorili nové možnosti a tieto tlačítka teraz môžeme využiť i na iné účely (napr. na navigáciu medzi stránkami).

PRÍKLAD 8.1 - Navigačné tlačítka

<html>
<head>
<title>Navigacne tlacitka</title>
<script language="JavaScript">
<!--
function skoc(adresa)
{
window.open(adresa,"_top");
}
// -->
</script>
</head>
<body>
<form>
<input type="button" value="AltaVista" onClick="skoc('http://av.com');">
<input type="button" value="HotBot" onClick="skoc('http://hotbot.com');">
<input type="button" value="Yahoo" onClick="skoc('http://yahoo.com');">
</form>
</body>
</html>

V tomto príklade, ako môžete vidieť, nejde o nič zložitého. Každému tlačítku priradíme udalosť onClick. Po jej výskyte sa spustí funkcia skoc(), ktorá nahrá požadovanú stránku. Nahratie požadovanej stránky sa realizuje funkciou window.open(). Túto funkciu používame preto, aby sme zabezpečili bezproblémovú prevádzku tohto skriptu i na stránkach, ktoré obsahujú rámce.

Navigačný volič

V našom ďalšom príklade využijeme ďalší prvok formulára, a to kruhový volič (radio button). Tento príklad je takmer identický s predchádzajúcim, a preto sa nebudeme zaoberať bližším popisom jeho činnosti.

PRÍKLAD 8.2 - Navigačný volič

<html>
<head>
<title>Navigacny volic</title>
<script language="JavaScript">
<!--
function skoc(adresa)
{
window.open(adresa,"_top");
}
// -->
</script>
</head>
<body>
<form>
<input type="radio" name="1" onClick="skoc('http://av.com');">
AltaVista<br>
<input type="radio" name="1" onClick="skoc('http://hotbot.com');">
HotBot<br>
<input type="radio" name="1" onClick="skoc('http://yahoo.com');">
Yahoo<br>
</form>
</body>
</html>

Výberové menu (pull-down)

I výberové (pull-down) menu môžeme použiť za účelmi navigácie medzi webstránkami. Takáto aplikácia výberového menu sa často vyskytuje na weboch vo svojich rôznych verziách. My si ukážeme verziu, ktorá nevyžaduje od návštevníka stránky aby svoju voľbu potvrdil tlačítkom.

PRÍKLAD 8.3 - Výberové menu

<HTML>
<HEAD>
<TITLE>Vyberove menu</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!--
adresa=new Array("http://av.com",
"http://hotbot.com",
"http://yahoo.com");

function skoc(form)
{
x=form.menu.selectedIndex;
if (x>1) window.open(adresa[x-2],"_top");
}
// -->
</SCRIPT>
</HEAD>
<BODY>
<FORM>
<SELECT NAME="menu" onChange="skoc(this.form)">
<OPTION>VYBEROVE MENU --></OPTION>
<OPTION></OPTION>
<OPTION>AltaVista</OPTION>
<OPTION>Hotbot</OPTION>
<OPTION>Yahoo</OPTION>
</SELECT>
</FORM>
</BODY>
</HTML>

Po načítaní stránky sa na obrazovke objaví sľúbené výberové menu. Po vybratí položky, nastane udalosť onChange, ktorá následne vyvolá funkciu skoc(). Táto funkcia zistí, ktorú voľbu v poradí sme si zvolili a na jej základe otvorí požadovanú stránku.
Pole adresa obsahuje zoznam stránok, ktoré pripadajú jednotlivým voľbám. Premenná x udáva poradové číslo voľby. Prvé 2 voľby - nultá a prvá - ("VYBEROVE MENU -->" a prázdny riadok) majú čisto len informačný význam, preto pri ich vybratí nenechávame nahrávať žiadnu stránku.
Tento typ výberového menu patrí medzi elegantné riešenia navigácie - o čom svedčí aj fakt, že tento skript patrí do prvej trojky najviac sťahovaných javaskriptov z www.javascript.sk.

Výberové menu (pull down) - dvojité

Na záver si naprogramujeme kombinované dvojité výberové menu. Po nahratí skriptu sa nám na obrazovke tentokrát objavia až 2 výberové menu naraz. Budú medzi sebou previazané, čo v praxi znamená, že obsah druhého sa bude dynamicky meniť v závislosti od toho ako sa zmenilo prvé.

PRÍKLAD 8.4 - Výberové menu - dvojité

<html>
<head>
<title>Vyberove menu - dvojite</title>
<script language="JavaScript">
<!--
slovensko=new Array("('Vyhladavac',' ',true,true)",
"('http://superzoznam.sk')","('http://zoznam.sk')");
cesko=new Array("('Vyhladavac',' ',true,true)",
"('http://seznam.cz')","('http://atlas.cz')");

function skoc()
{
with (document.formular)
{
adresa=vyhladavac.options[vyhladavac.selectedIndex].text;
if (adresa!="<--------------------" && adresa!="Vyhladavac")
window.open(adresa,"_top");
}
}

function zmen_krajina(krajina_v)
{
with (document.formular)
{
krajina=eval(krajina_v);
while (krajina.length<vyhladavac.options.length)
vyhladavac.options[(vyhladavac.options.length-1)]=null;
for (i=0; i<krajina.length; i++)
eval("vyhladavac.options[i]=new Option"+krajina[i]);
if (stat.options[0].value=="") stat.options[0]=null;
}
}
// -->
</script>
</head>
<body>
<form name="formular">
<select name="stat"
onChange="zmen_krajina(formular.stat.options[formular.stat.selectedIndex].value);">
<option selected value="">Vyber si krajinu</option>
<option value="slovensko">Slovensko</option>
<option value="cesko">Cesko</option>
</select>
<select name="vyhladavac">
<option value=""><--------------------</option>
<option value=""></option>
<option value=""></option>
</select>
<input type="button" name="button" value="Skoc" onClick="skoc();">
</form>
</body>
</html>

Medzi prvok JavaScriptu, s ktorým sa stretávame v našom seriáli po 1. krát je konštrukciawith (...){ }. Túto konštrukcia využívame všade tam, kde sa nám nechce mnohokrát vypisovať celý odkaz na objekt dokument. Konkrétne sa v našom prípade dosť často odvolávame na document.formular.bla1.bla2.bla3. My si zavedieme with (document.formular) a do vnútra jeho hranatých zátvoriek vložíme javascriptový kód. Teraz stačí ak sa odvoláme na daný dokument už iba pomocou bla1.bla2.bla3. Naš zdrojový text sa tým značne skráti a sprehľadní.

   








Home | Ako na to | Na stiahnutie | Tipy a triky | Diskusné fórum | Profesionálny webdesign | Kontakt
 
 




ISTUDIO webdesign & programming