|
VIII. Navigačné prvky
Navigačné tlačítka 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. 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štrukcia with (...){ }. 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í. Záverom... Veľa úspechov s JavaScriptom vám želá, Rastislav Škultéty
NAHORU
|