dialog-alternativet som tillhandahålls av page.dialog-tillägget till sidwidgeten kan du styla en sida som en dialogruta, men den speciella navigeringshanteringen kommer att tas bort. Du kan också överväga att implementera dialoger med hjälp av popup-widgets.Varje sida kan presenteras som en modal dialog genom att lägga till attributet data-rel="dialog" till sidans ankarlänk. När attributet ”dialog” tillämpas lägger ramverket till stilar för att lägga till rundade hörn, marginaler runt sidan och en mörk bakgrund för att få ”dialogen” att verka hängande ovanför sidan.
|
1
|
|
Du kan öppna en dialog programmatiskt genom att kalla $.mobil.changePage-metoden:
|
1
2
3
4
5
|
|
Transitioner
Som standard, öppnas dialogrutan med en ”pop”-övergång. Precis som på alla sidor kan du ange vilken sidövergång du vill ha i dialogrutan genom att lägga till attributet data-transition till länken. För att få den att kännas mer dialogliknande rekommenderar vi att du anger en övergång av typen ”pop”, ”slidedown” eller ”flip”.
Möjliga värden är: fade, pop, flip, turn, flow, slidefade, slide, slideup, slideup, slidedown, none.
|
1
|
|
Slutar dialoger
När någon länk klickas på i en dialog kommer ramverket automatiskt att stänga dialogrutan och övergå till den begärda sidan, precis som om dialogrutan vore en vanlig sida. Dialoger kan dock också kedjas, vilket förklaras nedan under ”Kedja dialoger”. På samma sätt kommer en länk som öppnar en popup att lämna dialogen på plats.
Om dialogen har en rubrik kommer ramverket att lägga till en stängningsknapp till vänster om rubriken. Du kan ändra positionen genom att lägga till data-close-btn="right" i dialogbehållaren. Om du inte vill ha en stängningsknapp i rubriken eller lägga till en egen stängningsknapp kan du använda data-close-btn="none".
För att skapa en ”avbryt”-knapp i en dialogruta är det bara att länka till den sida som utlöste öppnandet av dialogrutan och lägga till attributet data-rel="back" i länken. Det här mönstret med att länka till föregående sida kan också användas i enheter som inte är JS-enheter.
För JavaScript-genererade länkar kan du helt enkelt ställa in href-attributet till ”#” och använda data-rel="back"-attributet. Du kan också anropa dialogens close()-metod för att till exempel stänga dialoger programmatiskt: $( ".ui-dialog" ).dialog( "close" ).
Inställer stängningsknappens text
Som sidinsticksmodulen kan du ställa in en dialogs stängningsknappstext med hjälp av ett alternativ- eller dataattribut. Alternativet kan konfigureras för alla dialoger genom att binda till mobileinit-händelsen och ställa in $.mobile.dialog.prototype.options.closeBtnText-egenskapen till en sträng som du väljer, eller så kan du placera dataattributet data-close-btn-text för att konfigurera texten från din markering.
Historik & Beteende för bakåtknapp
Med tanke på att dialoger vanligtvis används som stöd för åtgärder på en sida, inkluderar ramverket inte dialoger i hash-state-historikspårningen. Detta innebär att dialoger inte kommer att visas i kronologin för webbläsarhistoriken när du klickar på knappen Tillbaka. Om du till exempel befinner dig på en sida, klickar på en länk för att öppna en dialog, stänger dialogen och sedan navigerar till en annan sida, kommer du att navigera tillbaka till den första sidan, inte till dialogen, om du klickar på webbläsarens Tillbaka-knapp vid det tillfället.
Kedjebildning av dialoger
Observera att om en dialog öppnar en annan dialog (kedjebildning), så kommer stängningen av den sista dialogen med en länk av typen data-rel="back" alltid att navigera till den föregående dialogen tills rotsidan av typen data-role="page" är nådd. Detta garanterar en konsekvent navigering mellan dialoger.
Styling & theming
Dialoger kan stylas med olika teman, precis som vilken sida som helst, genom att lägga till data-theme-attribut till behållarna för rubrik, innehåll eller sidfot.
Dialoger har som standard rundade hörn. Alternativet hörn kan ställas in på falskt genom att lägga till data-corners="false" till dialogbehållaren:
Dialoger ser ut att sväva ovanför ett överlagrat lager. Det här överlagret antar som standard innehållsfärgen ”a”, men attributet data-overlay-theme kan läggas till i sidomslaget för att ställa in överlagret på vilken färg som helst.
Dialoger kan också användas mer som ett kontrollblad för att erbjuda flera knappar om man helt enkelt tar bort den övre marginalen från dialogens inre containerelement. Om din dialogsida till exempel har klassen my-dialog kan du lägga till den här CSS:en för att fästa dialogrutan högst upp: .ui-dialog.my-dialog .ui-dialog-contain { margin-top: 0 }, eller så kan du bara tillämpa den stilen på alla dialoger med .ui-dialog .ui-dialog-contain { margin-top: 0 }.
Breddning och marginaler för dialoger
För läsbarhetens skull har dialoger som standard en width på 92,5 % och en max-width på 500 pixlar. Det finns också en 10 % övre margin för att ge dialoger större övre marginal på större skärmar, men som kollapsar till en liten marginal på smartphones. Dialogens inre behållare förskjuts mot top med 15px för att dölja hörnstyling om en dialog används som ett kontrollblad (se ovan). Om du vill åsidosätta dessa stilar lägger du till följande CSS-överstigningsregel i stilarket och justerar efter behov:
|
1
2
3
4
5
6
7
8
|
|