přejít na obsah přejít na navigaci

Linux E X P R E S, jQuery (31) – dialogy v jQuery UI

jQuery (31) – dialogy v jQuery UI

jquery.png

Dialogy bývají pro někoho důvod, proč vůbec používat jQuery UI. Jejich implementace „na vlastní pěst“ je hodně pracná a přitom stačí jen vzít a použít to, co je připraveno.


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 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 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 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é.

Nahoru

Přidat téma diskuse

Nejsou podporovány žádné značky, komentáře jsou jen čistě textové. Více o diskuzích a pravidlech najdete v nápovědě.
Diskuzi můžete sledovat pomocí RSS kanálu rss



 
 

Top články z OpenOffice.cz

Lukáš Jelínek

Lukáš Jelínek

Dlouholetý člen autorského týmu LinuxEXPRESu a OpenOffice.cz. Vystudoval FEL ČVUT v oboru Výpočetní technika. Žije v Kutné Hoře, podniká v oblasti IT a zároveň pracuje v týmu projektu Turris. Ve volném čase rád fotografuje, natáčí a stříhá video, občas se věnuje powerkitingu a na prahu čtyřicítky začal hrát tenis.


  • Distribuce: Debian, Kubuntu, Linux Mint
  • Grafické prostředí: KDE

| proč linux | blog