page.dialog kiterjesztése által biztosított dialog opció lehetővé teszi, hogy egy oldalt párbeszédpanelként stilizáljon, azonban a speciális navigációs kezelés megszűnik. Megfontolandó a párbeszédek megvalósítása felugró widgetek használatával is.Minden oldal megjeleníthető modális párbeszédként az oldal horgonykapcsolatához hozzáadott data-rel="dialog" attribútummal. A “párbeszéd” attribútum alkalmazásakor a keretrendszer stílusokat ad hozzá, hogy lekerekített sarkokat, margókat adjon az oldal köré és sötét hátteret, hogy a “párbeszéd” úgy tűnjön, mintha az oldal fölött lebegne.
|
1
|
|
Programszerűen is megnyithat egy párbeszédpanelt a $.mobil.changePage metódust:
|
1
2
3
4
5
|
|
Transitions
Az alapértelm, a párbeszédpanel egy ‘pop’ átmenettel nyílik meg. Mint minden oldalon, a párbeszédpanelen is megadhat bármilyen átmenetet, ha a data-transition attribútumot hozzáadja a hivatkozáshoz. Ahhoz, hogy még inkább párbeszédesnek tűnjön, javasoljuk, hogy a “pop”, “slidedown” vagy “flip” átmenetet adja meg.
A lehetséges értékek: fade, pop, flip, turn, flow, slidefade, slide, slideup, slidedown, none.
|
1
|
|
Párbeszédek bezárása
Amikor egy párbeszédpanelen belül bármely linkre kattintunk, a keretrendszer automatikusan bezárja a párbeszédpanelt és átvált a kért oldalra, mintha a párbeszédpanel egy normál oldal lenne. Mindazonáltal a párbeszédpanelek láncolhatók is, amint azt alább a “Dialógusok láncolása” című fejezetben kifejtjük. Hasonlóképpen, egy felugró ablakot megnyitó link is a helyén hagyja a párbeszédpanelt.
Ha a párbeszédpanelnek van fejléce, a keretrendszer a fejléc bal oldalán egy bezárás gombot ad hozzá. A pozíció megváltoztatható a párbeszédpanel konténerének data-close-btn="right" hozzáadásával. Ha nem szeretne bezárógombot a fejlécben, vagy egyéni bezárógombot ad hozzá, akkor használhatja a data-close-btn="none"-t.
A párbeszédpanelben lévő “cancel” gomb létrehozásához csak hivatkozzon a párbeszédpanel megnyitását kiváltó oldalra, és adja hozzá a data-rel="back" attribútumot a hivatkozáshoz. Az előző oldalra való hivatkozásnak ez a mintája a nem-JS eszközökön is használható.
A JavaScript által generált linkek esetében egyszerűen beállíthatja a href attribútumot “#”-re, és használhatja a data-rel="back" attribútumot. A párbeszédpanel close() metódusát is meghívhatjuk például a párbeszédpanelek programozott bezárásához: $( ".ui-dialog" ).dialog( "close" ).
A bezárógomb szövegének beállítása
Az oldalbővítményhez hasonlóan a párbeszédpanel bezárógombjának szövegét is beállíthatja egy opció vagy adatattribútum segítségével. Az opció az összes párbeszédpanelre konfigurálható a mobileinit eseményhez való kötéssel és a $.mobile.dialog.prototype.options.closeBtnText tulajdonság egy szabadon választott karakterláncra való beállításával, vagy a data-close-btn-text adatattribútumot is elhelyezheti, hogy a szöveget a jelöléséből konfigurálja.
História & Vissza gomb viselkedése
Mivel a párbeszédpaneleket általában az oldalon belüli műveletek támogatására használják, a keretrendszer nem tartalmazza a párbeszédpaneleket a hash-állapotok történetének követésében. Ez azt jelenti, hogy a párbeszédpanelek nem jelennek meg a böngészési előzmények kronológiájában, amikor a Vissza gombra kattint. Ha például egy oldalon van, rákattint egy linkre egy párbeszédpanel megnyitásához, bezárja a párbeszédpanelt, majd egy másik oldalra navigál, ha ekkor a böngésző Vissza gombjára kattint, akkor az első oldalra navigál vissza, nem a párbeszédpanelre.
Párbeszédek láncolása
Figyelem: Ha egy párbeszédpanel egy másik párbeszédpanelt nyit (láncolás), az utolsó párbeszédpanel bezárása egy data-rel="back" típusú linkkel mindig az előző párbeszédpanelre navigál, amíg a data-role="page" típusú gyökéroldalra nem érkezik. Ez garantálja a párbeszédpanelek közötti konzisztens navigációt.
Stilizálás & tematizálás
A párbeszédpaneleket különböző témaváltozatokkal lehet stilizálni, akárcsak bármelyik oldalt, a fejléc, tartalom vagy lábléc konténerekhez data-theme attribútumok hozzáadásával.
A párbeszédpanelek alapértelmezés szerint lekerekített sarkokkal rendelkeznek. Az opciós sarkok hamisra állíthatók a párbeszédpanel-konténerhez data-corners="false" hozzáadásával:
A párbeszédpanelek úgy tűnnek, mintha lebegnének egy overlay réteg felett. Ez a fedőréteg alapértelmezés szerint az ‘a’ színű swatch tartalmi színt veszi fel, de a data-overlay-theme attribútum hozzáadható az oldalburkolathoz, hogy a fedőréteget bármely swatch betűre állítsa be.
A párbeszédpanelek több gomb felkínálására is használhatóak inkább vezérlő lapként, ha egyszerűen eltávolítjuk a párbeszédpanel belső konténerelemének felső margóját. Ha például a párbeszédpanel oldalának my-dialog osztálya lenne, akkor ezt a CSS-t hozzáadhatná, hogy a párbeszédpanelt a tetejére tűzze: .ui-dialog.my-dialog .ui-dialog-contain { margin-top: 0 }, vagy egyszerűen alkalmazhatná ezt a stílust az összes párbeszédpanelre .ui-dialog .ui-dialog-contain { margin-top: 0 }.
Dialógus szélessége és margói
Az olvashatóság érdekében a párbeszédpanelek alapértelmezett width értéke 92,5% és max-width értéke 500 pixel. Van egy 10%-os felső margin is, hogy a párbeszédpanelek nagyobb felső margót kapjanak nagyobb képernyőkön, de okostelefonokon kis margóra essenek össze. A párbeszédpanel belső konténere a top felé 15px-rel eltolódik, hogy elrejtse a sarokformázást, ha a párbeszédpanelt vezérlőlapként használja (lásd fentebb). Ezen stílusok felülbírálásához adja hozzá a következő CSS felülbírálási szabályt a stíluslapjához, és szükség szerint módosítsa:
|
1
2
3
4
5
6
7
8
|
|