Vyšperkujte svoje webovské stránky VI. - Grafika.cz - vše o počítačové grafice

Fotosoutěže
Fotogalerie
Rubriky
Odběr fotomagazínu

Fotografický magazín "iZIN IDIF" každý týden ve Vašem e-mailu.
Co nového ve světě fotografie!

 

Zadejte Vaši e-mailovou adresu:

Kamarád fotí rád?

Přihlas ho k odběru fotomagazínu!

 

Zadejte e-mailovou adresu kamaráda:

Nabídka práce


Webdesign

Vyšperkujte svoje webovské stránky VI.

17. srpna 2000, 00.00 | Tipy, fígly a postupy kterak vylepšit své stránky. Tentokráte se především podíváme, jak pomocí javascriptu změnit jedním kliknutím obsah více rámů (frames) současně...

Vítejte u dalšího dílu našeho "webdesignérského seriálu". Jak jsem minule slíbil, v dnešním dílu se opět vrátíme k javascriptovému objektu location, pomocí nějž můžeme  realizovat změnu obsahu oken či jednotlivých rámů. Podíváme se speciálně na způsob, kterak načíst obsah do dvou rámů současně jedním kliknutím.

17) Změna obsahu dvou (a více rámů) zároveň

Pokud bychom chtěli pomocí odkazu změnit obsah určitého rámu, můžeme použít běžného HTML odkazu s cílením (target) do daného rámu. Problém nastane, když bychom chtěli jedním kliknutím změnit naráz obsah dvou či více rámů. Tento problém řeší javascript velmi elegantně a to dokonce dvěma způsoby (možná i více). První způsob je systémovější, nicméně pro zápis složitější.

a) ... pomocí definování funkce

Stejně tak jako jsme v minulém díle vyvolali událost (onmouseover, onclick...) a ta byla spojena s určitou akcí (např. změnou obsahu okna), můžeme vytvořením funkce definovat více akcí, které se provedou na základě vyvolání události. 

Nejdříve však musím uvést obecný zápis pro změnu obsahu daného rámu:

událost="parent.nazev_ramu.location=' http://www.xxx.cz';"

Tímto způsobem bychom mohli kliknutím (událost onclick) nebo třeba najetím myší nad objekt (událost onmouseover) změnit obsah rámu s názvem nazev_ramu - do rámu by se načetla URL  http://www.xxx.cz. 
Pozn.: Pokud nevíte, kam začlenit výše uvedený zápis (událost="p...) přečtěte si minulý díl.

Nyní se můžeme vrátit k našemu původnímu cíli, tj. vytvoření funkce, která bude obsahovat dva příkazy. V našem případě prvním příkazem se změní obsah prvního rámu, druhým příkazem obsah druhého rámu. Když vytvoříme příslušnou funkci, nebudeme volat konkrétní příkazy, ale námi vytvořenou a pojmenovanou funkci. Vyvoláním této funkce se provedou všechny příkazy v ní obsažené. 

Výše uvedené si ukážeme na příkladu (viz obr.):

Popis k obrázku:
A, B, C - jména (name) rámů
modré názvy  - původní obsah rámů
červené názvy - nově načtený obsah rámů

Naším cílem je, aby se po kliknutí na odkaz v rámu A změnil zároveň obsah rámu (stránka) B i C. 
KROK 1: Do hlavičky (HEAD) (!) a.htm musíme vložit definici naší funkce pojmenované Nacteni. POZOR - zde ohraničují URL uvozovky nikoli apostrofy jako ve výše uvedeném obecném příkladě!.

<!--
function Nacteni()
{
parent.b.location="new_b.htm";
parent.c.location="new_c.htm" 
}
// -->

KROK 2: Nyní definujeme událost která vyvolá funkci (např. pro objekt <p>):

<p onclick="Nacteni()">Klikni</p>

Pokud bychom chtěli mít v a.htm více odkazů, které by měnily obsah rámů B i C, musíme mít pro každý odkaz vytvořenou zvláštní funkci definovanou v HEAD stránky a.htm. 

Shrnutí postupu a):
  • Po kliknutí na odkaz v a.htm se vyvolá funkce Nacteni, která změní obsah rámů B a C

b) ... pomocí události onLoad

Druhý způsob, jak dosáhnout změny obsahu rámů současně kombinuje klasický způsob odkazování do rámu (<a href="nova_str.htm" target="mujram">odkaz</a>) a javascriptový způsob. Pro vysvětlení použijeme opět výše uvedeného obrázku a v něm uvedených názvů souborů. 
Do souboru a.htm umístíme klasický odkaz pro načtení souboru new_b.htm do rámu B (<a href="new_b.htm" target="b">odkaz</a>. Do souboru new_b.htm musíme nyní umístit javascript, který zařídí změnu obsahu rámu C a to hned jakmile se načte soubor new_b.htm.
Vzhledem k tomu, že již umíme vytvářet funkci použijeme ji i pro tento účel (a vyhneme se tak komplikovanému zápisu, kde jsou apostrofy vnořeny uvozovkám - viz minulý díl).

KROK 1: Do HEAD new_b.htm vložíme:
 <!--
function Nacteni2()
{
parent.c.location="new_c.htm" 
}
// -->

KROK 2: K vyvolání funkce Nacteni2 použijeme událost onload aplikovanou na přímo na objekt BODY. Do tagu BODY new_b.htm tedy vložíme onLoad="Nacteni2()", celý tag BODY může pak vypadat např.:
<body bgcolor="#ffffff" link="#fafafa" alink="#ffff00" onLoad="Nacteni2()">

Shrnutí postupu b):
  • Načtení new_b.htm do rámu B je realizováno klasickým odkazem umístěným v a.htm
  • Načtení new_c.htm do rámu C je realizováno javascriptem umístěným v new_b.htm, který se spustí hned po načtení new_b.htm

Uff... A máme to za sebou. Dnešní postup se někomu mohl zdát komplikovaný  (vězte: mohlo by to být i horší :-)), přesto věřím, že Vás od "vyšperkovávání" Vašich webů neodradil  i přesto, že vzhledem k rozsáhlosti jde pro tento díl o postup jediný (resp. dva). 

Příště se můžete opět těšit na několik kratších tipů a postupů (identifikace prohlížeče návštěvníka, automatická informace o aktualizaci webu atd...)

Předchozí díly seriálu: 1. díl, 2. díl, 3. díl, 4. díl, 5. díl

Tématické zařazení:

 » Rubriky  » Webdesign  

Poslat článek Diskuse (0) Tisk Přečteno: 392x

www.grafika.cz/rubriky/webdesign/vysperkujte-svoje-webovske-stranky-vi--128155cz

 

 

 

Nejčtenější články
Nejlépe hodnocené články
Nabídka bazar

 

Přihlášení k mému účtu

Uživatelské jméno:

Heslo: