Widget pro vyrobení modálního okna. Okno může být v jednu chvíli otevřeno pouze jedno. Všechna vytvořená okna sdílí jeden prvek overlay (překrytí stránky). Použití je jednoduché, okno přijímá pouze dva parametry: obsah okna (string nebo element) a nepovinný objekt s konfigurací. HTML okna a překrytí se tvoří co nejpozději - až při prvním otevření okna.
Okno kromě toho, že fakt dobře vypadá, je chytré a umí se dobře zobrazovat a pozicovat i na menších displejích. Není problém, když se fixně pozicované okno nevejde celé do viditelné části dokumentu - vytvoří se scrollbary kolem jeho obsahu. Doporučuji tuhle featuru vyzkoušet s tímto demem. Pro starší androidy (< 4), které mají často problém s fixním pozicováním, je vynuceno absolutní pozicování (i pro overlay).
//defaultni conf:
var conf = {
winId: '', //id okna
winClass: [], //string || array - trida okna
overlayClass: [], //string || array - trida overlay
closeContent: '', //string || element - obsah zaviraciho prvku
winFixed: true, //fixed nebo absolute pozicovani okna
closeActions: true, //pridat defaultni zaviraci akce (ESC, klik overlay, klik zaviraci prvek)
bordersImgSupport: 'never', //'never', 'always', 'dumb' - pridat podporu pro obrazkove okraje? (tabulka kolem)
bordersImg: '', //sprite obrazek, vyuzije se pouze pri pouziti obrazkovych okraju
bordersWidth: [0,0,0,0] //number || array - sirka okraju tvorenych sprite obrazkem [horni,pravy,dolni,levy okraj]
};
Poznámka: proměnná html je v ukázce kódu uvedena pouze u prvních 2 příkladů.
var conf = {winId: 'window1', closeContent: 'X'};
var html = '<span class="title">Nejtrapnější jednoduché okno</span>' + conf2html(conf);
var mw_ex1 = new JAK.ModalWindow(html, conf);
mw_ex1.addOpenElements( JAK.query('.opensMwBasic') );
V prohlížečích podporujících CSS3 (border-radius, box-shadow) je rámeček okna vykreslen pomocí CSS. V hloupých prohlížečích je html okna obaleno do tabulky, díky které se dá pěkný rámeček vytvořit pomocí sprite obrázku. Pokud je zadán obrázek a šířka okrajů (což je tento případ), celé se to magicky nastyluje samo. Okno samotné má v tomto případě navíc třídu "mw-imgBorders". Vyzkoušejte v IE8- !
zobrazit okno
var conf = {
winClass: 'bordersOrange',
bordersImgSupport: 'dumb', //zapnout podporu pro obrazkove okraje jen pro hloupe prohlizece
bordersImg: 'img/mw_sprite_orange.png',
bordersWidth: 70
};
var mw_ex2 = new JAK.ModalWindow('', conf); //zatim prazdne okno
var css3 = !mw_ex2._bordersImgSupport(); //z pouziti teto metody takhle si neberte priklad
var html =
'<span class="title">Všude pěkné základní okno</span>' +
'<p>Dostatečná podpora CSS3: ' +
(css3? '<span class="yes">ANO</span>' : '<span class="no">NE</span> (okno je obaleno tabulkou)') +
'</p>' + conf2html(conf);
mw_ex2.setContent(html);
mw_ex2.addOpenElements('mwPrettyLink');
Okno je pozicováno absolutně. Na rozdíl od fixně pozicovaného okna, pokud se nevejde do viditelné části dokumentu, neupravují se rozměry obsahu a neobjevují se scrollbary. Tento příklad navíc ukazuje možnost nastavit vlastní třídu pro overlay a alternativní textový vzhled zavíracího prvku. Vzhled okna je definován pouze pomocí CSS, ve starých prohlížečích je to poněkud hranaté.
zobrazit okno
var conf = {
winClass: 'bordersOrange textCloseButton', //vice trid okna se dá definovat i takto
overlayClass: 'turquoise',
closeContent: 'zavřít',
winFixed: false //absolutne pozicovane okno
};
var mw_ex3 = new JAK.ModalWindow(html, conf);
var openElm = JAK.gel('mwAbsoluteLink');
mw_ex3.addOpenElements(openElm);
var conf = {
winClass: 'bordersOrange2',
bordersImgSupport: 'always', //okno bude vzdy obaleno v tabulce
bordersImg: 'img/mw_sprite_orange2.png',
bordersWidth: [15, 42, 66, 26] //ruzne sirky okraju
};
var mw_ex4 = new JAK.ModalWindow(html, conf);
mw_ex4.addOpenElements('mwImgBordersLink');
var example4_addContentEvents = function(signal) {
var mw = signal.target;
example4_updEscStatus(mw);
//prvky v okne, ktere neco alertuji
var alerts = mw.getContainer().querySelectorAll('.alert');
for (var i = 0; i < alerts.length; i++) {
JAK.Events.addListener(alerts[i], 'click', function(e,elm) {
JAK.Events.cancelDef(e);
alert(elm.tagName + ": jupí!!");
});
}
//vypinani esc
JAK.Events.addListener(mw.getContainer().querySelector('.disableEsc'), 'click', function(e,elm) {
JAK.Events.cancelDef(e);
mw.disableEsc();
example4_updEscStatus(mw);
});
//zapinani esc
JAK.Events.addListener(mw.getContainer().querySelector('.enableEsc'), 'click', function(e,elm) {
JAK.Events.cancelDef(e);
mw.enableEsc();
example4_updEscStatus(mw);
});
}
/* naveseni udalosti se vykona hned po vybuildeni okna */
JAK.signals.addListener(window, 'mw-built', 'example4_addContentEvents', mw_ex4);
Okno a overlay mají zakázány defaultní zavírací akce, okno jde zavřít pouze nějakým vlastním zavíracím prvkem.
zobrazit okno
var conf = {
winClass: 'bordersOrange noClose',
closeActions: false
};
var mw_ex5 = new JAK.ModalWindow(html, conf);
mw_ex5.addOpenElements(['mwSubmitLink1', 'mwSubmitLink2']);
/* vlastni zavirani */
var example5_addContentEvents = function(signal) {
var mw = signal.target;
JAK.Events.addListener(JAK.gel('ex5_submit'), 'click', function(e) {
JAK.Events.cancelDef(e);
mw.close();
});
}
/* naveseni udalosti se vykona hned po vybuildeni okna */
JAK.signals.addListener(window, 'mw-built', 'example5_addContentEvents', mw_ex5);
Demonstruje chování fixed okna, pokud nemá obsah zadanou pevnou šířku.
zobrazit okno
var conf = {
winClass: 'bordersOrange autoWidth'
};
var mw_ex6 = new JAK.ModalWindow(html, conf);
mw_ex6.addOpenElements('mwLink6');