dialog-indstillingen, der leveres af page.dialog-udvidelsen af side-widgetten, kan du style en side som en dialog, men den særlige navigationshåndtering vil blive fjernet. Du kan også overveje at implementere dialoger ved hjælp af popup-widgets.En hvilken som helst side kan præsenteres som en modal dialog ved at tilføje data-rel="dialog"-attributten til sidens ankerlink. Når “dialog”-attributten anvendes, tilføjer rammen stilarter for at tilføje afrundede hjørner, margener omkring siden og en mørk baggrund for at få “dialogen” til at se ud til at være ophængt over siden.
|
1
|
|
Du kan åbne en dialog programmatisk ved at kalde funktionen $.mobil.changePage-metoden:
|
1
2
3
4
4
5
|
|
Transitioner
Som standard, åbnes dialogen med en “pop”-overgang. Som på alle sider kan du angive enhver sideovergang, du ønsker i dialogen, ved at tilføje attributten data-transition til linket. For at få den til at virke mere dialoglignende anbefaler vi, at du angiver en overgang af typen “pop”, “slidedown” eller “flip”.
Mulige værdier omfatter: fade, pop, flip, turn, flow, slidefade, slide, slideup, slideup, slidedown, none.
|
1
|
|
Slutter dialoger
Når der klikkes på et link i en dialog, vil rammen automatisk lukke dialogen og gå over til den ønskede side, ligesom hvis dialogen var en normal side. Ikke desto mindre kan dialoger også kædes sammen, som forklaret nedenfor under “Kædning af dialoger”. På samme måde vil et link, der åbner et popup-vindue, også efterlade dialogen på plads.
Hvis dialogen har en overskrift, vil rammen tilføje en lukkeknap i venstre side af overskriften. Du kan ændre positionen ved at tilføje data-close-btn="right" til dialogcontaineren. Hvis du ikke ønsker en lukkeknap i overskriften eller tilføjer en brugerdefineret lukkeknap, kan du bruge data-close-btn="none".
For at oprette en “annullér”-knap i en dialog skal du blot linke til den side, der udløste, at dialogen blev åbnet, og tilføje data-rel="back"-attributten til dit link. Dette mønster med at linke til den foregående side kan også bruges på enheder uden for JavaScript.
For JavaScript-genererede links kan du blot indstille href-attributten til “#” og bruge data-rel="back"-attributten. Du kan også kalde dialogens close() metode for f.eks. at lukke dialoger programmatisk: $( ".ui-dialog" ).dialog( "close" ).
Indstilling af lukkeknappens tekst
Som sideplugin’et kan du indstille en dialogs lukkeknappens tekst via en indstilling eller dataattribut. Indstillingen kan konfigureres for alle dialoger ved at binde til mobileinit-hændelsen og indstille $.mobile.dialog.prototype.options.closeBtnText-egenskaben til en streng efter eget valg, eller du kan placere dataattributten data-close-btn-text for at konfigurere teksten fra din markup.
Historik & Adfærd for Tilbage-knappen
Da dialoger typisk bruges til at understøtte handlinger inden for en side, omfatter rammen ikke dialoger i hash-tilstandshistoriksporing. Det betyder, at dialoger ikke vises i kronologien for browsinghistorikken, når der klikkes på Tilbage-knappen. Hvis du f.eks. er på en side, klikker på et link for at åbne en dialog, lukker dialogen og derefter navigerer til en anden side, vil du, hvis du klikker på browserens Tilbage-knap på det tidspunkt, navigere tilbage til den første side og ikke til dialogen.
Kædning af dialoger
Bemærk: Hvis en dialog åbner en anden dialog (kæde), vil lukning af den sidste dialog med et link af typen data-rel="back" altid navigere til den foregående dialog, indtil rod-siden af typen data-role="page" er nået. Dette garanterer en konsistent navigation mellem dialoger.
Styling & tematisering
Dialoger kan styles med forskellige tema-swatches, ligesom enhver anden side, ved at tilføje data-theme-attributter til header-, indholds- eller footer-containere.
Dialoger har som standard afrundede hjørner. Indstillingen hjørner kan indstilles til falsk ved at tilføje data-corners="false" til dialogcontaineren:
Dialoger ser ud til at svæve over et overlejringslag. Dette overlay antager som standard indholdsfarven swatch ‘a’, men attributten data-overlay-theme kan tilføjes til sideomslaget for at indstille overlayet til et hvilket som helst swatchbogstav.
Dialoger kan også bruges mere som et kontrolark til at tilbyde flere knapper, hvis du blot fjerner den øverste margen fra dialogens indre containerelement. Hvis din dialogside f.eks. havde en klasse my-dialog, kunne du tilføje denne CSS for at fastgøre denne dialog øverst: .ui-dialog.my-dialog .ui-dialog-contain { margin-top: 0 }, eller du kunne bare anvende denne stil på alle dialoger med .ui-dialog .ui-dialog-contain { margin-top: 0 }.
Dialogbredde og marginer
For at sikre læsbarheden har dialoger en standard width på 92,5 % og en max-width på 500 pixel. Der er også en 10 % øverste margin for at give dialoger større øverste margen på større skærme, men kollapse til en lille margen på smartphones. Dialogens indre container er forskudt mod top med 15px for at skjule hjørnestilen, hvis en dialog bruges som kontrolark (se ovenfor). Hvis du vil tilsidesætte disse stilarter, skal du tilføje følgende CSS-override-regel til dit stilark og justere efter behov:
|
1
2
3
4
5
6
7
8
|
|