Dialogové okno pomocí JavaScriptu

Ať už se nám to líbí nebo ne, uživatelské rozhraní systému Windows má většina uživatelů Internetu už dobře zažité, a tak i na mnoha WWW stránkách vznikají – více či méně zdařilé – pokusy o jeho napodobení, zejména při zadávání nejrůznějších údajů, nastavení atp. V tomto článku si zkusíme jednoduchou simulaci nejpoužívanějšího prvku rozhraní Windows – dialogového okna.

Pro jistotu několik termínů na začátek – znáte-li terminologii Windows, můžete tento odstavec klidně přeskočit. Dialogové okno – někdy také dialogový box – je samostatné okno, sloužící především ke vstupu údajů od uživatele. Většinou se ukončuje tlačítky jako „OK“, „Cancel“, potažmo „Storno“. Obvykle se neobjevuje jako samostatné okno v TaskBaru – tj. v liště na spodním okraji pracovní plochy, a obvykle je modální, tj. chceme-li aktivovat jeho mateřské okno ležící pod ním, nepodaří se nám to.

Některé z uvedených vlastností jdou pomocí JavaScriptu napodobit lépe, některé hůře. Do hry také jako obvykle vstupuje rivalita nejpoužívanějších prohlížečů, takže výsledek je maličko odlišný v MSIE a v NN. Výsledkem toho všeho je tedy kompromis: vytvoříme si dialogové okno, které bude se chovat hodně jako dialogové okno, ale ne zcela.

Konec diplomacie, přejděme k ukázce. Kliknutím zde otevřete samostatné okno z ukázkou. Z něj můžete kliknutím na příslušný odkaz otevřít dialogové okno, zkusit v něm zadat údaje a uzavřít dialogové okno stisknutím OK nebo Cancel. Rovněž si vyzkoušejte přepnutí na nadřízené okno bez uzavírání dialogového okna.

Hlavní odlišnosti proti klasickým dialogovým oknům Windows jsou dvě: za prvé funkční změna: pokud přepneme na nadřízené okno, místo toho, aby nám to systém nepovolil, je automaticky zavřeno dialogové okno (jako bychom stiskli tlačítko Cancel). Druhá změna je víceméně estetická: v Internet Exploreru se dialogový box zobrazuje i v task-baru – což by neměl.

Celou práci zajišťuje několik drobných JavaScriptů. Nejprve ale potřebujeme v rodičovském okně místo, do nějž budeme přepisovat hodnoty z dialogového okna. V ukázce je to formulář, pojmenovaný main, v němž je textové pole se jménem popis. Do tohoto pole pro účely ukázky kombinujeme celý výstup z dialogového okna; v praxi bychom patrně použili více samostatných formulářových polí, případně skrytých. HTML kód formuláře z ukázky vypadá takto:

Po kliknutí na příslušný odkaz otvíráme dialogové okno nikoliv přímo odkazem, ale (přes událost onclick) voláním funkce ShowDialog(), jejíž kód vypadá takto:

Funkce nejprve „vyčistí“ cílové pole formuláře, abychom dobře viděli změny v něm provedené, a poté pomocí window.open otevře dialogové okno ze zdrojového souboru dialog.htm. Hromada parametrů ve window.open nastavuje vzhled a chování okna – zajímavý je parametr dependent=yes, který by měl způsobit, že nově otevřené okno se nezobrazí v taskbaru. Říkám měl by, protože ve skutečnosti trucuje – kupodivu – Internet Explorer: nejen že nereaguje na dependent, ani jej nezajímají parametry screenX a screenY, udávající pozici nového okna na obrazovce.

Poznámka: pokud znáte někdo lék na tento drobný problém, uvítám jeho radu.

Nyní plynule přejdeme z kódu nadřízeného okna do kódu dialogového okna. Pohybujeme se tedy v kódu již zmíněného souboru dialog.htm.

Uzavření okna na tlačítko Cancel je úkol banální – postačí nám k tomu obsloužit událost onclick:

Při události onclick na tlačítku OK voláme funkci closeit(), která toho má na práci trochu víc: zjistí zadané hodnoty z formuláře v okně dialog.htm, přepíše je do formuláře v nadřízeném okně – a nakonec dialogové okno zavře. Tuto část kódu budeme tedy při konkrétní aplikaci nejvíce modifikovat, zde je příklad, jak je napsán v ukázce (HTML kód formuláře v dialogovém okně neuvádím, je jednoduchý a patrný ze souvislostí):

Takže to by bylo téměř vše. Okno se otevírá, zavírá po stisku Cancel, zavírá a přepisuje hodnoty po stisku OK. K dokonalému chování dialogového okna nám chybí ještě modálnost – tedy to, aby v době otevření dialogového okna nebyla povolena aktivace nadřízeného okna, ležícího pod ním. Bohužel, tuto vlastnost se mi nepodařilo nasimulovat tak, aby fungovala uspokojivě na všech prohlížečích, pomohl jsem si tedy jistou modifikací – po aktivaci nadřízeného okna automaticky uzavřeme dialogové okno, jako bychom stiskli tlačítko Cancel. Pomůžeme tím alespoň tomu, aby v systému nezůstávaly „viset“ neuzavřená dialogová okna.

Jsme tedy zpátky v kódu nadřízeného okna a doplníme jeho skript o dvě náležitosti. Za prvé, proměnnou dialogWindow, kterou jsme tak lajdácky plnili v kódu funkce ShowDialog, řádně nadeklarujeme a naplníme výchozí hodnotou…

…a za druhé, vytvoříme funkci HideDialog(), která se bude starat o násilné uzavření dialogového okna v případě, že uživatel aktivuje omylem okno nadřízené. Tato funkce, aby se vůbec mohla uplatnit, musí být volána z handleru události onFocus v tagu BODY; její kód vypadá takto:

První podmínka ve funkci HideDialog ošetřuje případ, kdy ještě žádné dialogové okno nebylo vytvořeno, tedy první získání focusu po otevření nadřízeného okna, druhá podmínka ošetřuje případ, kdy dialogové okno bylo jak řádně vytvořeno, tak i řádně uzavřeno pomocí tlačítek OK nebo Cancel. Pro zájemce – princip fungování této druhé podmínky je vysvětlen v článku „Reklama ve vyskakovacím okně trochu jinak„.

To je pro tentokrát vše, přeji vám příjemný den.

Starší komentáře ke článku

Pokud máte zájem o starší komentáře k tomuto článku, naleznete je zde.