Strona główna kursu

JavaScript - ramki w JavaScript

DZIAŁANIE: Przykład : Click!
 

Kod:

Kurs JavaScript, Kurs Ajax, Kurs PHP

Ewentualne Objaśnienia:

Mam nadzieję, że skoro czytasz te objaśnienia do dokładnie sobie przeglądnąłeś przykład jaki dla Ciebie przygotowałem. Pokazałem kilka istotnych rzeczy związanych z ramkami w JS, chociaż fakt faktem, że ramki to już pewien przeżytek. Zobaczmy kod każdego z plików :

33ramki_index.html
Tutaj mamy po prostu deklarację struktury strony z ramkami.

33ramki_lewa.html
Tutaj mamy 2 funkcje służące do zmieniana zawartości ramki o nazwie zawartosc oraz do zmiany obrazka w tej ramce. Zmiany te generalnie wykonujemy prawie identycznie jak w przykładach z okienkami. Tutaj zamiast nazwy okna podajemy nazwę ramki, ale jeszcze przed tym podajemy słowo parent które odnosi się jakby do głównej struktury, tzw. ranki macierzystej. I tak mamy kilka łącz  wykorzystujących tą funkcję. Potem jest łącze zmiany zawartości w ramce zagnieżdżonej, wewnętrznej. Tutaj jak widzicie podajemy parent potem nazwę kolejnej ramki macierzystej (bo ramka zawartosc zawiera kolejne 2 ramki, oczywiście w momencie uruchomienia łącza nowych ramek) no i dalej wiadomo location itd. Potem mamy wstawiony obrazek, który będziemy zmieniać z poziomu innych ramek oraz łącze do strony, która nie jest wyświetlana w ramce.

33ramki_prawa.html
Tutaj jeśli chodzi o JS mamy zmianę obrazka w ramce o nazwie menu. Działanie oczywiście takie samo jak wyżej

33ramki_index2.html
Deklaracja kolejnych 2 ramek, które są wyświetlanie w ramce zawartosc po uruchomieniu łącza nowe ramki/

33ramki_lewa2.html
Tutaj znowu pojawia się funkcja zmiany zawartości - oczywiście jest to pewne marnotrawienie kodu, powinno się taką funkcję napisać raz z odpowiednimi parametrami i potem sobie ją dołączać do strony i wywoływać gdzie tylko się chce. Przez tą funkcję zmieniamy na takiej samej zasadzie zawartość ramki zawartosc2. Mamy również 3 łącza, które zmieniają zawartość ramki menu, która jest w ramce macierzystej najwyższej w hierarchii. Nie możemy tutaj odwołać się już poprzez parent.menu.location ponieważ jak mówiłem ramka ta leży jakby poziom wyżej. Dlatego jak widzicie jest użyte dwa razy słowo parent. Jednak w przypadku wielu wielu zagnieżdżeń pisanie kilka razy słowa parent jest bezsensowne, dlatego w 3 linku widzicie że zamiast parent.parent jest użyte słowo top które oznacza najwyższy poziom w hierarchii. Na podobnej zasadzie zmieniany jest obrazek w ramce menu.

33wylaczanie_ramek.html
Jeśli chcemy uruchomić ten plik w ramce widzicie, że nie da się tego zrobić. Jest to przydatne bo nie każdy sobie życzy tego, żeby jego strona miała być gdzieś przez jakiś inny mechanizm tak uruchamiana. Instrukcja warunkowa sprawdza nam czy strona znajduje się najwyżej w hierarchii (self oznacza daną stronę, a top najwyższy poziom). Jeśli tak nie jest (znak nierówności !=) przypisujemy dla top.location adres naszej sprawdzanej strony.