Vytváříme nová efektní okna prohlížeče 1.

11. října 2001

•

Chtěli jste někdy do svého webového návrhu začlenit nové okno prohlížeče s osobitým barevným laděním? Rádi byste si definovali okno s vlastními navigačními prvky okna, ale nevíte jak na to? Dnes takovou užitečnou knihovnu v JavaScriptu začneme vytvářet.

Většina webových tvůrců se již setkala s případem, kdy je potřeba otevřít dokument do nového okna prohlížeče. Ať už z nutnosti zachovat informace z původní stránky, nebo z čistě designerských důvodů. K této proceduře využíváme většinou Javascript resp. metodu open objektu window, jež umožňuje nastavit několik základních vlastností vytvářeného okna. Budeme-li ovšem hledat pokročilejší atributy jako například barvu, pozadí a velikost vrchní lišty, barvu okraje apod., budeme neúspěšní. Proto je nutné najít náhradní řešení, jehož základní myšlenky si v tomto seriálu objasníme. Výsledkem našeho snažení bude knihovna, která umožní otevřít speciální okna.

Pravděpodobně již tušíte, že výše zmíněné atributy nepůjde klasickým způsobem modifikovat. Proto je nutné vytvořit si vlastní ekvivalenty s námi vyžadovanými vlastnostmi. To ovšem předpokládá odstranění objektů implicitních (toolbar, statusbar apod). A zde narazíme na první problém. Přestože je v posledních verzích prohlížečů implementován atribut fullscreen, jeho standardní použití není konečným řešením‚ neboť nelze nastavit velikost takto otevřeného okna. Existuje ovšem obecně známý trik, užívájící metodu resize objektu window, která změní velikost jakéhokoliv okna (viz. příklad1). Takto vytvoříme okno zcela oproštěné od všech ovládacích prvků. Bohužel postup má dvě nevýhody. Jednak jej lze aplikovat pouze na prohlížeče Internet Explorer 5 a vyšší, neboť ostatní prohlížeče atribut fullscreen interpretují rozdílným způsobem. Dále pak zmíněnou sekvencí příkazů vzniká mírné bliknutí, protože okno je nejprve zobrazeno maximalizované, a až poté je zmenšeno na požadovanou velikost.

// přiklad 1
s = window.open(“,“,’fullscreen=1′);
s.resizeTo(300,300);

Víme tedy, jak otevřít „prázdné“ okno, avšak jak přidat vlastní toolbar, status bar, okraje okna a apod.? Nejjednodušší možností je nahrazení pomocí tabulek a IFRAME objektu. S tímto řešením bychom si vystačili v případě, kdybychom vynechali funkci změny pozice okna, která by nám nefungovala korektně (proč o tom se zmíním později). V našem případě použijeme alternativu rozdělení okna do rámců (viz. obrázek). Každý FRAME je jakýmsi modulem, jež spolu s ostatními tvoří celou strukturu okna. Díky rámcům tak můžeme jednoduše moduly zobrazovat nebo volitelně přidávat další, aniž bychom výrazněji zasahovali do základní knihovny.

Modulem míníme samostatnou HTML stránku s vlastními funkcemi, jehož chování je závislé na parametrech se kterými je volán. Jednoduchý příklad: do FRAMESET struktury vložím modul topBar s parametrem barvy pozadí. Modul jej při inicializaci přijme a nastaví příslušnou barvu pozadí dokumentu (topBaru). Nyní ovšem vyvstane otázka jak modulu předat pouze pomocí JS jednotlivé parametry. Možností je několik, např. cookies. Není ovšem 100% zaručeno, že uživatel cookies používá, proto použijeme metodu GET, kterou jistě znáte z PHP či ASP. S tím rozdílem, že parametry budeme číst opět prostřednictvím JS a to tak, že nejprve zjistíme URL dané stránky, odřízneme data vyskytující se za otazníkem a vložíme do proměnné, kterou poté funkcí split rozdělíme na jednotlivé části – výsledné atributy:

// Priklad volani modulu s dvema parametry
document.location =“http://neco.cz/modul.html?paramentr1″+|+“paramentr1″;

Procedura získání parametrů:

url = „“+document.location;
url = url.substring(url.indexOf(‚?‘)+1,url.length);
param = url.split(‚|‘);

Na tuto proceduru získání parametrů budeme při popisu modulů několikrát odkazovat. Základní informace máme za sebou, přejděme tedy k metodám hlavní knihovny.

/// Zacatek kodu hlavi knihovny
/// Soubor: winlib.js
/// Funkce k otevreni okna
function otevriOkno(url,sirka, bar1, bar2, bar3, title, fontCol, fontSiz, fontTyp, sirkaOk, vyskaOk, x, y, resize, status, bar4, fontCol1)

{
if (navigator.appName == „Microsoft Internet Explorer“ && parseInt(navigator.appVersion)>=4)

{
var s = window.open(“, “, ‚fullscreen=1, toolbar=0, location=0, directories=0,status=0, menubar=0, scrollbars=0, resizable=’+resize)
s.resizeTo(sirkaOk,vyskaOk);
s.moveTo(2000,2000);
s.document.open();
s.document.write(‚<frameset border=0 framespacing=0 frameborder=0 rows=“‚+sirka+‘,100%,14″>‘);
s.document.write(‚<frame name=topBar src=“topBar.htm?’+bar1+’|’+bar2+’|’+bar3+’|’+title+’|‘ +fontCol+’|’+fontSiz+’|’+fontTyp+'“ scrolling=no noresize>‘);
s.document.write(‚<frame name=winBar src=“winBar.htm?’+bar3+’|’+url+'“ scrolling=no noresize>‘);
s.document.write(‚<frame name=statusBar src=“statusBar.htm?’+bar4+’|’+bar3+’|’+fontCol1+’|‘ +fontTyp+'“ scrolling=no noresize></frameset>‘);
s.document.close();
s.moveTo(x,y);
}

else
{
var s = window.open(url,“,’width=’+sirkaOk+‘, height=’+vyskaOk+‘, toolbar=0, location=0, directories=0, status=0, menubar=0, scrollbars=0, resizable=0′)
}

}

Jak vidíme, otevření probíhá pomocí funkce otevřiOkno() s množinou vstupních hodnot, jež definují vlastnosti okna. Tento postup je narozdíl od statického stanovení atributů přehlednější a vhodný v případě, že budeme chtít otvírat oken více, každé s různými vlastnostmi. Jaké parametry budeme používat a předávat jednotlivým modulům záleží čistě na invenci a kreativitě programátora jak moduly naprogramoval. Nejprve je ale nutné zjistit typ browseru, neboť knihovna je z již zmíněných důvodů určena pro IE5+. Možností je mnoho, záleží na vašem zvyku. Je-li podmínka vhodného prohlížeče splněna, použijeme fullscreen trik k otevření okna. Není-li splněna, otevře se klasické okno. Celá FRAMESET struktura modulů, je poté dynamicky „vepsána“ do okna. Díky tomu lze volat moduly s vlastními parametry a již na úrovni volání funkce stanovit např. šířku topBaru, či použití/zakázání statusBaru. Ještě je třeba dodat, že v uvedeném kódu napevno otevíráme tři moduly, čímž případnou volitelnost znemožníme. Zapsaní všech podmínek by však bylo zbytečně zdlouhavé. Věřím, že si je doplníte sami, či zkopírujete z kompletního zdrojového kódu knihovny, který bude k dispozici na konci seriálu, kde mimo jiné také naleznete detailní popis jednotlivých parametrů.

/// Funkce k zavreni puvodni okna
function zavriPuvodni()
{
self.opener=“puvodni“;
self.close();
}
/// Konec kodu hlavni knihovny
/// Soubor: winlib.js

Druhou metodou, kterou budeme využívat je funkce zavriPuvodni(). Jejím smyslem je zavřít původní okno tak, aby nebyla zobrazena varovná hláška. Mnozí z vás asi namítnou, že to z bezpečnostních důvodu prohlížeč nepovolí, avšak tento zápis to ve verzích IE5.5 a IE6 umožní.

To je pro dnešek vše, příště se podíváme na modul topBar.