|
III. Otvárame okná... Dnešná časť seriálu bude venovaná, ako sa dá už aj z nadpisu usúdiť, oknám a ich manipulácii pomocou JavaScriptu. Pri surfovaní po Internete sa veľmi často stretávame s takými webovskými stránkami, ktoré po svojom načítaní otvárajú nové okná nášho prehliadača stránok a do nich nahrávajú iné stránky. Tento prvok - otváranie nových okien - sa dá použiť napr. na zjednodušenie navigácie medzi stránkami a pod. Okná v HTMLPredtým než sa naučíme používať JavaScript na otváranie okien, si ukážeme ako je možné otvoriť okno s použitím bežných príkazov jazyka HTML. Párovú značku (tag) <A HREF=""></A> už určite dobre poznáte. Ak do tohto tagu pridáme aj parameter TARGET="meno_okna", po odkliknutí na takýto odkaz sa otvorí nové okno a nahrá sa do neho určená stránka. PRÍKLAD 3.1 - ukážka otvorenia jednoduchého okna <html> <body> Klikni <a href="file:///C:/" target="nove_okno">tu</a> a otvori sa nove okno. </body> </html> V prípade, že už máme otvorené okno s daným menom a odklikneme na takýto odkaz, k otvoreniu nového okna nedôjde, len sa zamení obsah pôvodného okna. Iná situácia môže nastať v prípade, ak naša stránka obsahuje rámce (frames). Ak sa niektorý z našich rámcov volá rovnako ako naše okno, tak potom sa stanovená stránka nahrá do neho... Okná v JavaScripte Určíte uznáte, že i keď práca s oknami
v HTML je veľmi ľahká, prináša so sebou niekoľko obmedzení. Jedno z
hlavných obmedzení je, že nemáme možnosť definovať vzhľad a veľkosť
okna, ktoré chceme, aby sa otvorilo. Našťastie je tu JavaScript pomocou
ktorého sa to dá... window.open("URL","meno_okna","parametre_okna"); URL (napr. http://internet.tlp.cz) meno_okna (napr. okienko) parametre okna (napr.
toolbar=no,directories=no,menubar=no)
PRÍKLAD 3.2 - otvorenie okna o veľkosti 300x100 <html>
<head>
<title>Okna v JavaScripte</title>
<script>
<!--
window.open("file:///C:/","druhe_okno","width=300,height=100,menubar=yes");
// -->
</script>
</head>
<body>
</body>
</html>
V tomto príklade hádam nie je nič ťažké na pochopenie. Po načítaní skriptu, prehliadač stránok otvorí nové okno, do ktorého zobrazí obsah stránky, ktorá sa nachádza na adrese: file:///C:/. Keďže sa jedná o lokálnu adresu, zobrazí sa v okne výpis hlavného adresára disku C. Fotoalbum alebo prezentačné okná v praxi Ako je už pomaly zvykom, i na záver tejto časti seriálu si uvedieme jeden praktický príklad, na ktorom je možné demonštrovať otváranie okien. V tomto príklade pôjde o zobrazenie fotografie v plnej veľkosti po odkliknutí na jej zmenšenú podobu. Môžete si všimnúť, že novootvorené okno má presne stanovené rozmery a naviac obrázok je v ňom vycentrovaný... PRÍKLAD 3.3 - Fotoalbum s jednou zväčšovacou fotografiou pr3-3.html <html>
<head>
<title>Fotoalbum</title>
<script>
<!--
function otvor_okno()
{
window.open("pr3-3-1.html","okienko","width=386,height=274,top=10,left=10");
}
// -->
</script>
</head>
<body>
<a href="#" onClick="otvor_okno();">
<img src="fotkamala.jpg" border="0" alt="" width="100" height="70"></a>
</body>
</html>
pr3-3-1.html <html> <head> <title>Fotografia</title> </head> <body bgcolor="white" topmargin="8" leftmargin="8"> <img src="fotkavelka.jpg" border="1" alt="" width="368" height="257"> </body> </html> V uvedenom príklade sa vyskytuje nový
prvok. Je ním parameter onClick, ktorý sa
nachádza v súbore pr3-3.html vo vnútri tagu <A
HREF=""></a>. Tento parameter nazývame
tiež definíciou udalosti (zoznam ostatných udalostí
uvedieme nabudúce). Udáva, aká funkcia má byť vykonaná, ak dôjde ku
kliknutiu na daný odkaz. V našom prípade sa vyvolá funkcia otvor_okno().
Táto funkcia vyvolá už spomenutú funkciu window.open(),
ktorá na základe vstupných parametrov otvorí nové okno a do neho načíta
stránku pr3-3-1.html. Close the windows, close the gates Dosť často sa stáva, že tvorca stránok to s otváraním nových okien preženie a potom to na návštevníkovi zanecháva negatívny dojem. Ako príklad uvediem tzv. čierne stránky, stránky s warez náplňou a pod., ktoré ostošesť otvárajú nové okná s reklamou na svojich sponzorov. Po nejakom tom čase to dokáže ísť poriadne na nervy (veď komu sa chce prepínať medzi toľkými oknami a zatvárať tie prebytočné?!). Preto je pri navrhovaní stránok potrebné si vždy dobre zvážiť, že či prípadné otvorenie nového okna nebude na návštevníka našej stránky pôsobiť skôr rušivo...
POZNÁMKA: Všetky skripty, ktoré boli, sú a budú v seriáli o JavaScripte uverejňované, boli poriadne odskúšané pod štvorkovými verziami prehliadačov stránok Netscape Navigatorom a Microsoft Internet Explorerom. Pod nižšími verziami prehliadačov skripty nemusia pracovať správne!
NAHORU
|