dialog poskytovaná rozšířením page.dialog widgetu stránky umožňuje stylizovat stránku jako dialog, speciální navigační obsluha však bude odstraněna. Můžete také zvážit implementaci dialogů pomocí vyskakovacích widgetů.Každou stránku lze prezentovat jako modální dialog přidáním atributu data-rel="dialog" k odkazu kotvy stránky. Po použití atributu „dialog“ framework přidá styly, které přidají zaoblené rohy, okraje kolem stránky a tmavé pozadí, aby „dialog“ vypadal jako zavěšený nad stránkou.
|
1
|
|
Dialog můžete otevřít programově voláním příkazu $.Mobile.changePage:
|
1
2
3
4
5
|
|
Přechody
Samozřejmě, se dialogové okno otevře s přechodem „pop“. Stejně jako u všech stránek můžete v dialogu určit libovolný přechod stránky přidáním atributu data-transition k odkazu. Aby dialog působil více jako dialog, doporučujeme zadat přechod „pop“, „slidedown“ nebo „flip“.
Možné hodnoty zahrnují: fade, pop, flip, turn, flow, slidefade, slide, slideup, slidedown, none.
|
1
|
|
Zavírání dialogů
Pokud v dialogu kliknete na jakýkoli odkaz, framework automaticky zavře dialog a přejde na požadovanou stránku, stejně jako kdyby byl dialog normální stránkou. Nicméně dialogy lze také řetězit, jak je vysvětleno níže v části „Řetězení dialogů“. Podobně odkaz, který otevře vyskakovací okno, také ponechá dialog na místě.
Pokud má dialog záhlaví, přidá framework na levou stranu záhlaví tlačítko pro zavření. Pozici můžete změnit přidáním data-close-btn="right" do kontejneru dialogu. Pokud nechcete mít zavírací tlačítko v záhlaví nebo přidat vlastní zavírací tlačítko, můžete použít data-close-btn="none".
Chcete-li v dialogu vytvořit tlačítko „zrušit“, stačí odkázat na stránku, která vyvolala otevření dialogu, a přidat k odkazu atribut data-rel="back". Tento vzor odkazu na předchozí stránku je použitelný i v zařízeních, která nejsou součástí JS.
Pro odkazy vytvořené v JavaScriptu můžete jednoduše nastavit atribut href na „#“ a použít atribut data-rel="back". Můžete také zavolat metodu close() dialogu, abyste například programově zavřeli dialogy: $( ".ui-dialog" ).dialog( "close" ).
Nastavení textu zavíracího tlačítka
Stejně jako u zásuvného modulu stránky můžete text zavíracího tlačítka dialogu nastavit prostřednictvím atributu volby nebo dat. Volbu lze nakonfigurovat pro všechny dialogy vazbou na událost mobileinit a nastavením vlastnosti $.mobile.dialog.prototype.options.closeBtnText na vámi zvolený řetězec, nebo můžete umístit datový atribut data-close-btn-text pro konfiguraci textu ze značky.
Historie & Chování tlačítka Zpět
Protože se dialogy obvykle používají pro podporu akcí v rámci stránky, rámec nezahrnuje dialogy do sledování historie stavu hash. To znamená, že po kliknutí na tlačítko Zpět se dialogy nezobrazí v chronologii historie prohlížení. Pokud jste například na stránce, kliknete na odkaz pro otevření dialogu, dialog zavřete a poté přejdete na jinou stránku, pokud byste v tomto okamžiku klikli na tlačítko Zpět v prohlížeči, přejdete zpět na první stránku, nikoli na dialog.
Řetězení dialogů
Upozornění: Pokud dialog otevře další dialog (řetězení), zavření posledního dialogu pomocí odkazu typu data-rel="back" vždy přejde na předchozí dialog, dokud není dosaženo kořenové stránky typu data-role="page". Tím je zaručena konzistentní navigace mezi dialogy.
Stylování &témat
Dialogy lze stylizovat různými vzorníky témat stejně jako jakoukoli jinou stránku přidáním atributů data-theme do kontejnerů záhlaví, obsahu nebo zápatí.
Ve výchozím nastavení mají dialogy zaoblené rohy. Volitelné rohy lze nastavit na hodnotu false přidáním atributu data-corners="false" do kontejneru dialogu:
Dialogy se jeví jako plovoucí nad překryvnou vrstvou. Toto překrytí přebírá ve výchozím nastavení barvu obsahu vzorníku „a“, ale atribut data-overlay-theme lze přidat do obalu stránky a nastavit překrytí na libovolné písmeno vzorníku.
Dialogy lze také použít spíše jako ovládací listy a nabídnout více tlačítek, pokud jednoduše odstraníte horní okraj z vnitřního kontejnerového prvku dialogu. Pokud by například vaše dialogová stránka měla třídu my-dialog, mohli byste přidat toto CSS, abyste tento dialog připnuli nahoru: .ui-dialog.my-dialog .ui-dialog-contain { margin-top: 0 }, nebo byste mohli tento styl prostě použít na všechny dialogy s .ui-dialog .ui-dialog-contain { margin-top: 0 }.
Šířka a okraje dialogů
V zájmu čitelnosti mají dialogy výchozí width 92,5 % a max-width 500 pixelů. K dispozici je také horní okraj margin o 10 %, aby dialogy měly větší horní okraj na větších obrazovkách, ale na chytrých telefonech se srazily na malý okraj. Vnitřní kontejner dialogu je posunut směrem k top o 15px, aby se skryl rohový styl, pokud je dialog použit jako kontrolní list (viz výše). Chcete-li tyto styly přepsat, přidejte do svého souboru stylů následující přepisovací pravidlo CSS a upravte je podle potřeby:
|
1
2
3
4
5
6
7
8
|
|