dialog-optie van de page.dialog-extensie van de pagina-widget kunt u een pagina als een dialoogvenster vormgeven, maar de speciale navigatieafhandeling zal worden verwijderd. U kunt ook overwegen om dialogen te implementeren met behulp van popup-widgets.Elke pagina kan worden gepresenteerd als een modale dialoog door het data-rel="dialog" attribuut toe te voegen aan de pagina anker link. Wanneer het “dialog”-attribuut wordt toegepast, voegt het framework stijlen toe om afgeronde hoeken, marges rond de pagina en een donkere achtergrond toe te voegen, zodat het lijkt alsof het “dialog” boven de pagina hangt.
|
1
|
|
U kunt een dialog programmatisch openen door de opdracht $.mobile.changePage-methode op te roepen:
|
1
2
3
4
5
|
|
Overgangen
Aangezien van de standaardinstelling, wordt het dialoogvenster geopend met een ‘pop’-overgang. Net als op alle pagina’s kunt u op het dialoogvenster elke gewenste pagina-overgang instellen door het data-transition-attribuut aan de link toe te voegen. Om het meer dialoog-achtig te maken, raden we aan een overgang van “pop”, “slidedown” of “flip” te specificeren.
Mogelijke waarden zijn: fade, pop, flip, turn, flow, slidefade, slide, slideup, slidedown, none.
|
1
|
|
Dialogen sluiten
Wanneer in een dialoogvenster op een link wordt geklikt, sluit het framework het dialoogvenster automatisch en gaat naar de opgevraagde pagina, net alsof het dialoogvenster een normale pagina is. Dialogen kunnen echter ook aaneengeschakeld worden, zoals hieronder wordt uitgelegd onder “Dialogen aaneenschakelen”. Op dezelfde manier zal een link die een popup opent ook het dialoogvenster laten staan.
Als het dialoogvenster een koptekst heeft, zal het framework een sluit-knop toevoegen aan de linkerkant van de koptekst. Je kunt de positie veranderen door data-close-btn="right" toe te voegen aan de container van het dialoogvenster. Als je geen sluitknop in de header wilt of een eigen sluitknop wilt toevoegen, kun je data-close-btn="none".
Om een “cancel” knop in een dialoog te maken, hoef je alleen maar te linken naar de pagina die de dialoog triggerde om te openen en het data-rel="back" attribuut aan je link toe te voegen. Dit patroon van linken naar de vorige pagina is ook bruikbaar in niet-JS apparaten.
Voor JavaScript-gegenereerde links, kun je gewoon het href-attribuut op “#” zetten en het data-rel="back" attribuut gebruiken. U kunt ook de close()-methode van het dialoogvenster aanroepen om dialoogvensters programmatisch te sluiten, bijvoorbeeld: $( ".ui-dialog" ).dialog( "close" ).
De tekst van de sluitknop instellen
Net als bij de pagina-plugin kunt u de tekst van de sluitknop van een dialoogvenster instellen via een optie of een data-attribuut. De optie kan worden geconfigureerd voor alle dialogs door te binden aan de mobileinit event en de $.mobile.dialog.prototype.options.closeBtnText property in te stellen op een string naar keuze, of u kunt het data attribuut data-close-btn-text plaatsen om de tekst te configureren vanuit uw markup.
Historie & Terug knop gedrag
Omdat dialogs typisch worden gebruikt om acties binnen een pagina te ondersteunen, neemt het framework dialogs niet op in de hash state geschiedenis tracking. Dit betekent dat dialogen niet verschijnen in de chronologie van de browsegeschiedenis als op de Terug-knop wordt geklikt. Als u bijvoorbeeld op een pagina bent, op een link klikt om een dialoogvenster te openen, het dialoogvenster sluit en vervolgens naar een andere pagina navigeert, zult u, als u op dat moment op de Terug-knop van de browser klikt, teruggaan naar de eerste pagina, niet naar het dialoogvenster.
Chaining Dialogs
Let op: Als een dialoogvenster een ander dialoogvenster opent (chaining), zal het sluiten van het laatste dialoogvenster met een link van het type data-rel="back" altijd naar het vorige dialoogvenster navigeren totdat de root-pagina van het type data-role="page" is bereikt. Dit garandeert een consistente navigatie tussen dialogs.
Styling & theming
Dialogs kunnen worden gestyled met verschillende theme swatches, net als elke pagina door data-theme attributen toe te voegen aan de header, content, of footer containers.
Dialogs hebben standaard afgeronde hoeken. De optie hoeken kan op vals worden gezet door data-corners="false" aan de dialoog container toe te voegen:
Dialogen lijken te zweven boven een overlay laag. Deze overlay neemt standaard de swatch ‘a’ inhoudskleur aan, maar het data-overlay-theme attribuut kan aan de page wrapper worden toegevoegd om de overlay op elke swatch letter in te stellen.
Dialogen kunnen ook meer als een control sheet worden gebruikt om meerdere knoppen aan te bieden, als je eenvoudig de bovenmarge verwijdert van het binnenste container element van het dialoogvenster. Bijvoorbeeld, als je dialoog pagina een class heeft van my-dialog, zou je deze CSS kunnen toevoegen om dat dialoog bovenaan vast te pinnen: .ui-dialog.my-dialog .ui-dialog-contain { margin-top: 0 }, of u zou die stijl kunnen toepassen op alle dialogen met .ui-dialog .ui-dialog-contain { margin-top: 0 }.
Dialoogbreedte en marges
Omwille van de leesbaarheid hebben dialogen een standaard width van 92,5% en een max-width van 500 pixels. Er is ook een 10% top margin om dialogen een grotere bovenmarge te geven op grotere schermen, maar in te klappen tot een kleine marge op smartphones. De binnencontainer van het dialoogvenster wordt met 15px naar de top verschoven om de hoekstyling te verbergen als een dialoogvenster als control sheet wordt gebruikt (zie boven). Om deze stijlen te overschrijven, voeg de volgende CSS overschrijfregel toe aan je stylesheet en pas aan waar nodig:
|
1
2
3
4
5
6
7
8
|
|