![]() ![]() ![]() |
![]() |
Ogledali si bomo sodelovanje JavaScripta in okvirjev. Za pravilen prikaz
okvirjev potrebujete Netscape Navigator ali pa Internet Explorer 3.0, ki
hkrati podpirata tudi JavaScript.
Najprej se bomo seznanili z samimi okvirji. Z uporabo okvirjev lahko
okno v brskalniku razdelite na ve� delov, ki so med seboj neodvisni. V
njih lahko tudi nalo�ite posamezne strani. Dobra stran okvirjev je, da
lahko sodelujejo - med seboj izmenjujejo informacije. Lahko bi npr. naredili
dva okvirja - v enem bi bila va�a prava stran, v drugem pa menu z ikonami.
Menu bi bil vedno viden, v drugem okvirju pa bi se nalagale strani, ki
bi jih izbrali s klikom na ikone.
�e si �elite okvirje ogledati, pritisnite gumb:
Zgornji primer:
<HTML> <HEAD> <title>Okvirji</title> </HEAD> <FRAMESET ROWS="50%,50%"> <FRAME SRC="frtest1.html" name="fr1"> <FRAME SRC="frtest2.html" name="fr2"> </FRAMESET> </HTML>Najprej z <frameset...> tagom podate brskalniku koliko okvirjev �elite. �e napi�ete rows, boste dobili vrstice, �e pa napi�ete cols boste dobili stolpce. Hkrati lahko uporabite tudi vec <frameset...> tag-ov. Spodaj je primer iz Netscapeove dokumentacije:
<FRAMESET COLS="50%,50%"> <FRAMESET ROWS="50%,50%"> <FRAME SRC="cell.html"> <FRAME SRC="cell.html"> </FRAMESET> <FRAMESET ROWS="33%,33%,33%"> <FRAME SRC="cell.html"> <FRAME SRC="cell.html"> <FRAME SRC="cell.html"> </FRAMESET> </FRAMESET>
Najprej naredimo dva stolpca. Prvega razdelimo na dva dela - vsak je
velik 50%, drugega pa na tri vrstice - 33%. Okvirjem lahko damo tudi imena,
da jih bomo lahko pozneje iz JavaScripta klicali. V prvem primeru smo imena
nastavili na fr1 in fr2.
Osnove okvirjev smo na hitro preleteli. Oglejmo si naslednji primer:
Odprlo se bo okno, kjer boste s kliki na gumbe lahko spreminjali tekst
v drugem okvirju.
Izvorna koda:
Najprej boste rabili frames.html, ki bo naredil okvirje:
<HTML> <HEAD> <title>Okvirji</title> </HEAD> <FRAMESET ROWS="50%,50%"> <FRAME SRC="frame1.html" name="fr1" noresize> <FRAME SRC="frame2.html" name="fr2"> </FRAMESET> </HTML>frame1.html:
<HTML> <HEAD> <script language="JavaScript"> <!-- Hiding function hi() { document.write("Zdravo!<br>"); } function yo() { document.write("Ziv!<br>"); } function bla() { document.write("bla bla bla<br>"); } // --> </script> </HEAD> <BODY> To je na� prvi okvir! </BODY> </HTML>frame2.html:
<HTML> <body> To je na� drugi okvir! <p> <FORM NAME="Orodjarna"> <INPUT TYPE="button" VALUE="Zdravo" onClick="parent.fr1.hi()"> <INPUT TYPE="button" VALUE="Ziv" onClick="parent.fr1.yo()"> <INPUT TYPE="button" VALUE="Bla" onCLick="parent.fr1.bla()"> </FORM> </BODY> </HTML>Kaj se zgodi? Brskalnik nalo�i prvi html (frames.html), ki kreira okvirje in odpre frame1.html v prvi okvir (ki ima ime 'fr1') ter frame2.html v drugi okvir ('fr2'). V frame1.html so definirane nekatere funkcije, ki pa jih kli�emo iz drugega dokumenta. V drugem dokumentu naredimo skripto in gumbe, ki se navezujejo na funkcije prvega dokumenta. parent.fr1 se navezuje na objektno programiranje. Kot se iz zgornjega primera vidi, frames.html klice frame1.html in frame2.html. frames.html je star� (ang. parent), ostala dva okvirja pa sta otroka. Med okvirji obstaja nekak�na hierarhija. Mogo�e boste la�je razumeli s pomo�jo spodnje skice:
frames.html parent - star� / \ / \ / \ fr1(frame1.html) fr2(frame2.html) children - otrociOtroci imajo lahko seveda svoje otroke. Ti so nato vnuki ...
frames.html star� / \ / \ / \ fr1(frame1.html) fr2(frame2.html) otrok / \ / \ / \ vnuk1 vnuk2 vnuk�e ho�ete ozna�iti karkoli v osnovnem parent okvirju iz frame2.html, samo vstavite parent pred funkcijo. Za klicanje funkcij iz frame1.html pa morate zato vstaviti �e fr1 - parent.fr1.
�e ste naredili nekaj okvirjev in nekdo klikne na link, ki je na njih, se tista stran nalo�i v okvir. To je pravilno, �e je tista stran va�a in �e zelite, da se �eljena stran nalo�i v okvir. �e pa ho�e uporabnik slediti povezavi, ki ka�e na neko tretjo stran, bi bilo to neza�eleno. Brskalnik bi za vedno ostal v nekem okvirju! Kako torej izbrisati okvirje?
Enostavno. K va�emu <a href...> tag-u dodajte TARGET="_top". Link nato izgleda takole:
<a href="goaway.html" TARGET="_top">hocem proc od tvojih strani</a>
avtor: �iga
Mahkovec
november, 1998