page.dialog-laajennuksen tarjoaman dialog-vaihtoehdon avulla voit tyylitellä sivun dialogiksi, mutta erityinen navigoinnin käsittely poistetaan. Voit myös harkita dialogien toteuttamista ponnahdusikkunavidgettien avulla.Mikä tahansa sivu voidaan esittää modaalisena dialogina lisäämällä data-rel="dialog"-attribuutti sivun ankkurilinkkiin. Kun ”dialogi”-attribuuttia käytetään, kehys lisää tyylejä, jotka lisäävät pyöristetyt kulmat, marginaalit sivun ympärille ja tumman taustan, jotta ”dialogi” näyttäisi riippuvan sivun yläpuolella.
|
1
|
|
Dialogin voi avata ohjelmallisesti kutsumalla komentokehystä $.mobiili.changePage-metodia:
|
1
2
3
4
4
5
|
|
Muutokset
Vakiintuneesti, valintaikkuna aukeaa ’pop’-siirtymällä. Kuten kaikilla sivuilla, voit määrittää minkä tahansa haluamasi sivusiirtymän dialogiin lisäämällä linkkiin data-transition-attribuutin. Jotta se tuntuisi enemmän dialogin kaltaiselta, suosittelemme määrittämään siirtymäksi ”pop”, ”slidedown” tai ”flip”.
Vaihtoehtoisia arvoja ovat: fade, pop, flip, turn, flow, slidefade, slide, slideup, slidedown, none.
|
1
|
|
Valintaikkunoiden sulkeminen
Kun jotakin linkkiä napsautetaan valintaikkunan sisällä, kehys sulkee valintaikkunan automaattisesti ja siirtyy pyydetylle sivulle aivan kuin valintaikkuna olisi normaali sivu. Dialogeja voidaan kuitenkin myös ketjuttaa, kuten jäljempänä kohdassa ”Dialogien ketjuttaminen” selitetään. Vastaavasti linkki, joka avaa ponnahdusikkunan, jättää myös dialogin paikalleen.
Jos dialogilla on otsikko, kehys lisää sulkemispainikkeen otsikon vasemmalle puolelle. Voit muuttaa sijaintia lisäämällä data-close-btn="right" dialogin säiliöön. Jos et halua sulkeutumispainiketta otsikkoon tai lisäät mukautetun sulkeutumispainikkeen, voit käyttää data-close-btn="none".
Luoaksesi ”peruuta”-painikkeen dialogiin, linkitä vain sivulle, joka käynnisti dialogin avautumisen ja lisää data-rel="back"-attribuutti linkkiin. Tätä edelliselle sivulle linkittämisen mallia voidaan käyttää myös muissa kuin JS-laitteissa.
Javaskriptin avulla luotujen linkkien kohdalla voit yksinkertaisesti asettaa href-attribuutin arvoksi ”#” ja käyttää data-rel="back"-attribuuttia. Voit myös kutsua dialogin close()-metodia esimerkiksi dialogien ohjelmalliseen sulkemiseen: $( ".ui-dialog" ).dialog( "close" ).
Sulkemispainikkeen tekstin asettaminen
Aivan kuten sivuliitännäisessä, voit asettaa dialogin sulkemispainikkeen tekstin option tai data-attribuutin avulla. Vaihtoehto voidaan määrittää kaikille valintaikkunoille sitomalla mobileinit-tapahtumaan ja asettamalla $.mobile.dialog.prototype.options.closeBtnText-ominaisuus haluamaasi merkkijonoon, tai voit sijoittaa data-attribuutin data-close-btn-text määrittääksesi tekstin markupistasi.
Historia & Takaisin-painikkeen käyttäytyminen
Koska valintaikkunoita käytetään tyypillisesti tukemaan sivun sisällä tapahtuvia toimintoja, puitekehys ei sisällytä valintaikkunoita hash-tilan historian seurantaan. Tämä tarkoittaa, että dialogit eivät näy selaushistorian kronologiassa, kun Takaisin-painiketta napsautetaan. Jos esimerkiksi olet sivulla, napsautat linkkiä avataksesi dialogin, suljet dialogin ja siirryt sitten toiselle sivulle, jos napsautat selaimen Takaisin-painiketta tässä vaiheessa, siirryt takaisin ensimmäiselle sivulle, et dialogiin.
Dialogien ketjuttaminen
Huomaa: Jos dialogi avaa toisen dialogin (ketjuttaminen), edellisen sulkeminen tyypin data-rel="back" linkillä navigoi aina edelliseen dialogiin, kunnes saavutetaan tyypin data-role="page" juurisivu. Tämä takaa johdonmukaisen navigoinnin dialogien välillä.
Styling & theming
Dialogit voidaan tyylitellä erilaisilla teemavaihtoehdoilla, aivan kuten mikä tahansa sivu lisäämällä data-theme-attribuutteja otsikko-, sisältö- tai alatunnisteen säiliöihin.
Oletusarvoisesti dialogeilla on pyöristetyt kulmat. Vaihtoehto kulmat voidaan asettaa vääräksi lisäämällä data-corners="false" dialogisäiliöön:
Dialogit näyttävät leijuvan päällekkäiskerroksen yläpuolella. Tämä päällekkäiskerros ottaa oletusarvoisesti sisällön värin ’a’, mutta data-overlay-theme-attribuutti voidaan lisätä page wrapperiin asettaakseen päällekkäiskerroksen mille tahansa värikirjaimelle.
Dialogeja voidaan myös käyttää enemmän kuin ohjausarkkia tarjoamaan useita painikkeita, jos yksinkertaisesti poistetaan yläreuna dialogin sisäisestä container-elementistä. Jos esimerkiksi dialogisivulla olisi luokka my-dialog, voisit lisätä tämän CSS:n kiinnittääksesi kyseisen dialogin yläreunaan: .ui-dialog.my-dialog .ui-dialog-contain { margin-top: 0 }, tai voisit vain soveltaa tätä tyyliä kaikkiin dialogeihin, joissa on .ui-dialog .ui-dialog-contain { margin-top: 0 }.
Dialogin leveys ja marginaalit
Lukemisen vuoksi dialogien oletusarvo width on 92,5 % ja max-width 500 pikseliä. Käytössä on myös 10 %:n ylämarginaali margin, jotta dialogit saisivat suuremman ylämarginaalin suuremmilla näytöillä, mutta romahtaisivat pieneen marginaaliin älypuhelimissa. Dialogin sisäistä säiliötä siirretään kohti top 15px:llä, jotta kulmien muotoilu voidaan piilottaa, jos dialogia käytetään ohjausarkkina (ks. yllä). Voit ohittaa nämä tyylit lisäämällä seuraavan CSS:n ohitussäännön tyylitaulukkoon ja säätämällä sitä tarpeen mukaan:
|
1
2
3
4
|