Co je dialog?
Důležité je si uvědomit, co to vůbec dialog ve webové aplikaci je. Je to ohraničená oblast okna (případně i samostatné okno, nezávislé na okně, kde je otevřena stránka), která se zobrazí a umožňuje interakci s uživatelem. Pro dialog je typické, že se zobrazuje jen po omezený čas, kdy je potřeba.
Dialog může mít modální charakter (neumožnit interakci se zbytkem aplikace, dokud je otevřen), též může mít – a často mívá – horní lištu s ovládacími tlačítky (nejčastěji se zavíracím tlačítkem, může mít i minimalizační, maximalizační, případně nabídkové), může mít měnitelné rozměry, téměř vždy bývá posouvatelný.
Dialog může být připraven předem nebo konstruován dynamicky, může komunikovat jen se zbytkem aplikace nebo i přímo se serverem apod. Typicky dialog obsahuje různé formulářové komponenty (textová pole, zaškrtávátka, tlačítka…), může být ale tvořen třeba i obrázkovou plochou (například náhledovou mapou).
Dialog v jQuery UI
Widget Dialog v jQuery UI zajišťuje základní dialogovou funkcionalitu – tedy vytvoření okna na stránce. Okno má horní lištu (standardně se zavíracím tlačítkem), lze ho posouvat a měnit jeho rozměry. Lze také přidat dolní tlačítka. O zbývající obsah dialogu se ale už musíme postarat my.
Posouvání dialogu za horní lištu lze zakázat, změnu rozměrů lze také buď zcela zakázat nebo jen nastavit meze.
Element pro dialog může být připraven v HTML předem nebo vytvořen až později za běhu. Staticky připraveno to může vypadat třeba takto:
<div id="dialog"></div>
Nejjednodušší dialog se potom vytvoří prostým zavoláním:
$('#dialog').dialog();
Jak si můžete vyzkoušet, zobrazí se prázdný dialog, se kterým lze pracovat pomocí myši a zavřít ho kromě tlačítka křížku i klávesou Esc.
Nejjednodušší dialog
Jistě ale chceme víc, pro začátek třeba titulek na liště, nějaký text v dialogu a dole potvrzovací tlačítko. Nejdřív tedy HTML:
<div id="dialog">Toto je dialog.</div>
A teď JavaScript:
var props = {
title: 'Dialog',
buttons: [
{
text: "OK",
click: function() {
$(this).dialog('close');
}
}
]
};
$('#dialog').dialog(props);
Zprávu v dialogu zde definujeme opět staticky (lze ji ale přidat i programově), ostatní parametry potom při vytváření widgetu. Uvedenou metodou close() lze dialog samozřejmě zavřít i odjinud.
Dialog se zprávou
Pokročilé možnosti
V některých případech potřebujeme, aby byl dialog modální a nešla měnit jeho velikost. Aby to bylo zajímavější, přidáme si také animaci otevření a zavření dialogu.
var props = {
title: 'Dialog',
modal: true,
resizable: false,
show: 'fade',
hide: 'explode'
};
$('#dialog').dialog(props);
Na obrázku můžete vidět jeden okamžik animace zavírání dialogu efektem „explode“.
Zavírání dialogu – explode
Podobně lze nastavit i další parametry, například rozměry a jejich meze, podrobnosti najdete v dokumentaci.
Manipulace s dialogem
Zatím všechny příklady ukazovaly otevření dialogu zároveň s vytvořením widgetu. Operace lze ale rozdělit – pouze si widget připravit (otevření se potlačí nastavení autoOpen na hodnotu false) a otevřít ho až později.
$('#dialog').dialog({ autoOpen: false });
…
$('#dialog').dialog('open');
Metodu open() lze volat i poté, co byl dialog zavřen (opětovně se tím otevře). Prostředky pro dialog zůstávají alokované (ve formě objektů v DOM) až do chvíle, než se zavolá destroy(). Potom už samozřejmě dialog otevřít nelze a je potřeba ho znovu vytvořit.
Zda je dialog otevřen, lze snadno zjistit metodou isOpen().
Pokud máme dialogů na stránce více, může být užitečné poslat nějaký dialog nahoru, aby ho měl uživatel na očích. Zajistí se to snadno:
$('#dialog').dialog('moveToTop');
Události a styly
Widget Dialog umožňuje reagovat na celou škálu událostí. Při vytváření je to create, při otevírání open, před zavřením beforeClose a při zavření close. Událost beforeClose lze vetovat (vrátit false), dialog pak zůstane otevřený – to se velmi hodí jako ochrana proti ztrátě neuložených změn.
Dále jsou tu sady událostí souvisejících s posouváním dialogu (drag, dragStart, dragStop), změnou rozměrů (resize, resizeStart, resizeStop) a se získáním fokusu (focus). Hlavně poslední událost je užitečná, lze na ni „pověsit“ například aktualizaci dat.
Vzhled dialogu lze měnit pomocí CSS, k dispozici je řada tříd. Například ui-dialog představuje celý dialog, ui-dialog-titlebar titulkovou lištu, ui-dialog-titlebar-close zavírací tlačítko a ui-dialog-content kontejner pro obsah dialogu. Tedy kdo si chce kupříklad obarvit lištu na modrou barvu, může tak snadno učinit:
.ui-dialog-titlebar {
background-color: blue
}
Vlastní widget
Tímto je u konce procházka přes widgety, které jQuery UI nabízí. Příště si vytvoříme widget vlastní, protože je to občas potřeba a není to vůbec složité.