Promena 2 ili više frejmova - JavaScript metod
Pre svega, trebaće nam nekoliko ciljnih dokumenata. Prekopirajte sve fajlove iz donje tabele u Vaš radni folder.
Uzgred, svi ovi fajlovi počinju sa z, kako bi ostali zajedno u folderu, i kako bi ih bilo lako sve prekopirati odjednom.
Prvo ćemo napraviti jedan manji primer. Trebaće nam jedna master strana, koja će govoriti šta ide gde. Snimite ovo što sledi kao master.html...
<HTML>
<HEAD>
<TITLE>Jovini i Sanjini projatelji</TITLE>
</HEAD>
<FRAMESET COLS="25%,75%">
<FRAME SRC="dir.html">
<FRAMESET ROWS="50%,50%">
<FRAME SRC="zjova_boban.html" NAME="desno_gore">
<FRAME SRC="zjova_sale.html" NAME="desno_dole">
</FRAMESET>
</FRAMESET>
</HTML>
Očigledno, ovo je samo običan HTML frejm za sad. Obratite pažnju na imena frejmova. (Još nismo napravili dir.html).
OK. Sada ovo snimite kao dir.html...
<HTML> <HEAD> <TITLE></TITLE> </HEAD> <BODY BGCOLOR="#FFFFFF"> </BODY> </HTML>
Dodajmo malo JavaScripta u glavu (<head>) dokumenta...
<HTML>
<HEAD>
<TITLE></TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!-- Hiding
function multiLoad2(doc1,doc2) {
parent.desno_gore.location.href=doc1;
parent.desno_dole.location.href=doc2;
}
// -->
</SCRIPT>
</HEAD>
<BODY BGCOLOR="#FFFFFF">
</BODY>
</HTML>
Iako Vam verovatno nije jasno šta sve ovo znači, to sad i onako nije važno...
Dodajte tekst linka i sidro. Za sad nemojte popunjavati HREF deo.
<HTML>
<HEAD>
<TITLE></TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!-- Hiding
function multiLoad2(doc1,doc2) {
parent.desno_gore.location.href=doc1;
parent.desno_dole.location.href=doc2;
}
// -->
</SCRIPT>
</HEAD>
<BODY BGCOLOR="#FFFFFF">
<P><A HREF="">Jovini prijatelji</A>
<P><A HREF="">Sanjini prijatelji</A>
</BODY>
</HTML>
Sada ćemo da kompletiramo link-tag, tj. njegov HREF deo...
<HTML>
<HEAD>
<TITLE></TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!-- Hiding
function multiLoad2(doc1,doc2) {
parent.desno_gore.location.href=doc1;
parent.desno_dole.location.href=doc2;
}
// -->
</SCRIPT>
</HEAD>
<BODY BGCOLOR="#FFFFFF">
<P><A HREF="javascript:multiLoad2('zjova_boban.html', 'zjova_sale.html')">Jovini prijatelji</A>
<P><A HREF="javascript:multiLoad2('zsanja_nena.html', 'zsanja_mira.html')">Sanjini prijatelji</A>
</BODY>
</HTML>
Učitajte sada svoju master.html stranu; primer bi trebao da funkcioniše besprekorno!
Dobro. Pravo pitanje je: "A šta smo to sad zapravo uradili? Kako to u stvari funkcioniše?"
U osnovi, napravili smo funkciju - multiLoad2(). Dodali smo argumente toj funkciji - zjova_boban.html i zjova_sale.html. Zatim je funkcija izvršila te argumente.
function multiLoad2(doc1,doc2) {
Ovde se dva argumenta dodaju funkciji. Čim
argumenti dođu u dodir sa funkcijom, oni postaju promenljive doc1 i doc2,
kojima se može manipulisati.
parent.desno_gore.location.href=doc1;
Ovo stavlja ono što je u doc1 u
gornji, desni frejm.
parent.desno_dole.location.href=doc2;
Ovo stavlja ono što je u doc2 u donji,
desni frejm.
Naravno, nije nikakakav problem da se ovo preuredi tako da se menja više frejmova odjednom. Dodajte ovo u dokument master.html, pa ga snimite kao master2.html...
<HTML>
<HEAD>
<TITLE>Jovini i Sanjini prijatelji</TITLE>
</HEAD>
<FRAMESET COLS="25%,75%">
<FRAME SRC="dir2.html">
<FRAMESET ROWS="25%,25%,25%,25%">
<FRAME SRC="zjova_boban.html" NAME="desno1">
<FRAME SRC="zjova_sale.html" NAME="desno2">
<FRAME SRC="zjova_dejan.html" NAME="desno3">
<FRAME SRC="zjova_toma.html" NAME="desno4">
</FRAMESET>
</FRAMESET>
</HTML>
(Nemojte da zaboravite, da promenite dir.html u dir2.html)
Sad ćemo dodati neke sitnice u originalni dir.html, pa ćemo ga snimiti kao dir2.html...
<HTML>
<HEAD>
<TITLE></TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!-- Krije od starih browsera
function multiLoad4(doc1,doc2,doc3,doc4) {
parent.desno1.location.href=doc1;
parent.desno2.location.href=doc2;
parent.desno3.location.href=doc3;
parent.desno4.location.href=doc4;
}
// -->
</SCRIPT>
</HEAD>
<BODY BGCOLOR="#FFFFFF">
<P><A HREF="javascript:multiLoad4('zjova_boban.html', 'zjova_sale.html', 'zjova_dejan.html', 'zjova_toma.html' )">Jovini prijatelji</A>
<P><A HREF="javascript:multiLoad4('zsanja_nena.html', 'zsanja_mira.html', 'zsanja_ivana.html', 'zsanja_toni.html' )">Sanjini prijatelji</A>
<P><A HREF="javascript:multiLoad4('zjoca_aca.html', 'zjoca_nesa.html', 'zjoca_djordje.html', 'zjoca_riki.html' )">Jocini prijatelji</A>
<P><A HREF="javascript:multiLoad4('zbilja_tamara.html', 'zbilja_tanja.html', 'zbilja_jelena.html', 'zbilja_sneza.html')">Biljini prijatelji</A>
</BODY>
</HTML>
Učitajte sada master2.html, pa ga istestirajte.
Sa malo dodatnog vežbanja, lako ćete doći do savršenstva; tada ćete videti svu moć manipulacije frejmovima pomoću JavaScripta. (Što se tiče slučajnog izbora frejma pri učitavanju, to već prevazilazi ovaj nivo web dizajna. To je stavljeno ovde samo kao pokazatelj potencijala JavaScripta...)
Dobro. Završili smo i drugi metod promene 2 ili više frejmova jednim klikom. Kao što je već rečeno, ukoliko je to moguće, trebalo bi koristiti HTML metod uvek pre nego JS metod.
| ||||||||