V posledním díle se zaměříme na zbývající moduly okna, vystvětlíme si syntaxi použití a celou knihovnu dokončíme – nejsložitější modul topBar totiž máme úspěšně za sebou, nyní se podíváme na další tři – winBar, statusBar a scroller. A zatímco v předešlých dílech jsme si ukázali nové postupy a kódy, v tomto posledním díle z nich pouze budeme čerpat a dle potřeby je modifikovat.
Důvodem proč nové okno vůbec otevíráme je samotný dokument. Jak jistě tušíte, řeč bude o winBar modulu. Ukážeme si tedy, jakým způsobem vložit do okna externí HTML stránku. Mnohé možná napadne souvislost se FRAME strukturou modulů a idea místo adresy modulu vložit přímo URL žádané stránky. Postup je to samozřejmě možný, avšak chceme-li vytvořit hraniční okraje okna, musíme vytvořit nový modul a zvolit podobný způsob okrajů jako tomu bylo např. u topBaru. Nejprve je třeba vložit proceduru k získání parametrů (uvedena je pouze hlavička):
/// Zacatek kodu modulu winBar
/// Soubor: winBar.htm
/// Procedura ziskani parametru |
|
Objekt vykreslíme opět pomocí tabulek, ovšem ne vnořenými, neboť spodní okraj topBaru je v podstatě vrchním okrajem winBaru. Tudíž nám postačí jediná tabulka s třemi sloupci, přičemž krajní dva budou plnit funkci bočních okrajů. Obsahem vnitřního sloupce bude IFRAME objekt, který zajistí samotné načtení žádaného dokumentu. Všimněme si také velikost IFRAME, která musí být 100% tabulky. To proto, aby v případě změny velikosti okna došlo k automatické změně velikosti také IFRAME objektu. Poslední řádek tabulky je pak okrajem spodním.
/// Vytvoreni winBaru
document.write(‚<body topmargin=0 leftmargin=0 scroll=“no“>‘);
document.write(‚<table cellpadding=0 cellspacing=0 height=100%><tr>‘);
document.write(‚<td width=1 bgcolor=“‚+param[0]+'“ height=100%><img width=1 height=100%></td>‘);
document.write(‚<td align=left width=100% height=100% valign=top align=top><iframe onLoad=“Javascript: nacteno(\’done\‘);“ width=100% height=100% frameborder=0 src=“‚+param[1]+'“></iframe></td>‘);
document.write(‚<td width=1 bgcolor=“‚+param[0]+'“ height=100%><img width=1 height=100%></td></tr>‘);
document.write(‚<tr><td colspan=3 width=100% bgcolor=“‚+param[0]+'“ height=1><img width=1 height=100%></td></tr></table>‘); |
|
Volitelnou funkcí, kterou můžeme v tomto modulu využít je oznámení o dokončení načítání stránky. Ta je volána ihned po načtení v IFRAME událostí onLoad a má za cíl změnu textu ve statusBaru.
/// Funkce pro zmenu status textu
function nacteno(what)
{
if(parent.frames[‚statusBar‘]) {parent.frames[‚statusBar‘].document.getElementById(‚statustext‘).innerHTML = ‚ ’+what;}
}
/// Konec kodu modulu winBar
/// Soubor: winBar.htm |
|
Plynule jsme tedy přešli k třetímu modulu. Systém tvorby je zcela identický s předchozími způsoby. Jedinou změnou je element s identifikací statustext, který je funkčně ekvivalentní s objektem window.status. S tím rozdílem, že změnit jej nelze běžným přiřazením, nýbrž prostřednictvím metody innerHTML, tak jak je patrné z výše uvedené funkce nacteno().
/// Zacatek kodu modulu statusBar
/// Soubor: statusBar.htm
/// Procedura ziskani parametru
/// Vytvoreni statusBaru
document.write(‚<body topmargin=0 leftmargin=0 scroll=“no“>‘);
document.write(‚<table width=100% height=100% bgcolor=“‚+param[1]+'“ cellpadding=1 cellspacing=0><tr><td>‘);
document.write(‚<table width=100% bgcolor=“‚+param[0]+'“ border=0 cellpadding=0 cellspacing=0><tr>‘);
document.write(‚<td align=left width=100%><span style=“color:’+param[2]+‘; font-family: ‚+param[3]+‘; font-size:7pt“ valign=top id=“statustext“> loading</span></td></tr></table></tr></table>‘);
/// Konec kodu modulu statusBar
/// Soubor: statusBar.htm |
|
Abychom své dílko dovedli k úplné dokonalosti, upravíme poslední prvek, kterému jsme se ještě nevěnovali – posuvníky IFRAME objektu. Pro ně napíšeme speciální modul, který se bude vkládat přímo do cílové stránky (nejedná-li se o cizí). Modul si z topBaru převezme parametry týkající se barev a změní barevné ladění posuvníků tak, aby bylo shodné s barvami topBaru a potažmo celého okna.
/// Zacatek kodu modulu scroll
/// Soubor: scroll.js
function scrll()
{
if(parent.parent.frames[‚topBar‘])
if(parent.parent.frames[‚topBar‘].param)
{
param = parent.parent.frames[‚topBar‘].param;
document.body.style.scrollbarFaceColor = „“+param[0]+““;
document.body.style.scrollbarTrackColor = „“+param[0]+““;
document.body.style.scrollbarArrowColor = „“+param[4]+““;
}
}
setTimeout(‚scrll();‘,50);
/// Konec kodu modulu scroll
/// Soubor: scroll.js |
|
A to je vše. Není ovšem řečeno, že výsledná podoba knihovny je konečná. Možností k úpravě je více než dost. Záleží na vaší kreativitě a osobních potřebách. Celý zdroj knihovny, včetně demo ukázek použití si můžete stáhnout zde.
Starší komentáře ke článku
Pokud máte zájem o starší komentáře k tomuto článku, naleznete je zde.
