dialog-Option, die von der page.dialog-Erweiterung des Seiten-Widgets bereitgestellt wird, ermöglicht es Ihnen, eine Seite als Dialog zu gestalten, allerdings wird die spezielle Navigationsbehandlung entfernt. Sie können auch erwägen, Dialoge mit Popup-Widgets zu implementieren.Jede Seite kann als modaler Dialog dargestellt werden, indem das data-rel="dialog"-Attribut zum Seitenanker-Link hinzugefügt wird. Wenn das „dialog“-Attribut angewendet wird, fügt das Framework Stile hinzu, um abgerundete Ecken, Ränder um die Seite und einen dunklen Hintergrund hinzuzufügen, damit der „Dialog“ über der Seite zu schweben scheint.
|
1
|
|
Sie können einen Dialog programmatisch öffnen, indem Sie den $.mobile.changePage-Methode aufrufen:
|
1
2
3
4
5
|
|
Übergänge
Standardmäßig, wird das Dialogfeld mit einem „Pop“-Übergang geöffnet. Wie bei allen Seiten können Sie jeden gewünschten Seitenübergang für das Dialogfeld angeben, indem Sie das Attribut data-transition zum Link hinzufügen. Damit es sich mehr wie ein Dialog anfühlt, empfehlen wir, einen Übergang von „pop“, „slidedown“ oder „flip“ anzugeben.
Mögliche Werte sind: fade, pop, flip, turn, flow, slidefade, slide, slideup, slidedown, none.
|
1
|
|
Schließen von Dialogen
Wenn ein Link innerhalb eines Dialogs angeklickt wird, schließt das Framework automatisch den Dialog und wechselt auf die angeforderte Seite, so als wäre der Dialog eine normale Seite. Allerdings können Dialoge auch verkettet werden, wie weiter unten unter „Verkettung von Dialogen“ erläutert. Ebenso wird ein Link, der ein Popup öffnet, den Dialog an Ort und Stelle belassen.
Wenn der Dialog eine Kopfzeile hat, fügt das Framework eine Schaltfläche zum Schließen an der linken Seite der Kopfzeile hinzu. Sie können die Position ändern, indem Sie data-close-btn="right" zum Dialog-Container hinzufügen. Wenn Sie keine Schaltfläche zum Schließen in der Kopfzeile wünschen oder eine benutzerdefinierte Schaltfläche zum Schließen hinzufügen möchten, können Sie data-close-btn="none" verwenden.
Um eine Schaltfläche zum Abbrechen in einem Dialog zu erstellen, verlinken Sie einfach auf die Seite, die das Öffnen des Dialogs ausgelöst hat, und fügen Sie das Attribut data-rel="back" zu Ihrem Link hinzu. Dieses Muster der Verknüpfung mit der vorherigen Seite ist auch in Nicht-JS-Geräten verwendbar.
Für JavaScript-generierte Links können Sie einfach das href-Attribut auf „#“ setzen und das data-rel="back"-Attribut verwenden. Sie können auch die close()-Methode des Dialogs aufrufen, um z.B. Dialoge programmatisch zu schließen: $( ".ui-dialog" ).dialog( "close" ).
Schließen-Schaltflächen-Text einstellen
Gleich wie beim Seiten-Plugin können Sie den Schließen-Schaltflächen-Text eines Dialogs über eine Option oder ein Daten-Attribut einstellen. Die Option kann für alle Dialoge konfiguriert werden, indem man an das mobileinit-Ereignis bindet und die $.mobile.dialog.prototype.options.closeBtnText-Eigenschaft auf einen String Ihrer Wahl setzt, oder Sie können das Datenattribut data-close-btn-text platzieren, um den Text aus Ihrem Markup zu konfigurieren.
Da Dialoge typischerweise verwendet werden, um Aktionen innerhalb einer Seite zu unterstützen, schließt das Framework Dialoge nicht in die Hash-Status-History-Verfolgung ein. Das bedeutet, dass Dialoge nicht in der Chronologie des Browserverlaufs erscheinen, wenn die Schaltfläche „Zurück“ angeklickt wird. Wenn Sie sich beispielsweise auf einer Seite befinden, auf einen Link klicken, um einen Dialog zu öffnen, den Dialog schließen und dann zu einer anderen Seite navigieren, werden Sie, wenn Sie an diesem Punkt auf die Schaltfläche „Zurück“ des Browsers klicken, zurück zur ersten Seite navigieren, nicht zum Dialog.
Dialogverkettung
Bitte beachten Sie: Wenn ein Dialog einen anderen Dialog öffnet (Verkettung), wird beim Schließen des letzten Dialogs mit einem Link des Typs data-rel="back" immer zum vorherigen Dialog navigiert, bis die Stammseite des Typs data-role="page" erreicht ist. Dies garantiert eine konsistente Navigation zwischen den Dialogen.
Styling & theming
Dialoge können wie jede Seite mit verschiedenen Themen gestylt werden, indem data-theme Attribute zu den Kopf-, Inhalts- oder Fußcontainern hinzugefügt werden.
Standardmäßig haben Dialoge abgerundete Ecken. Die Option Ecken kann durch Hinzufügen von data-corners="false" zum Dialog-Container auf false gesetzt werden:
Dialoge scheinen über einer Überlagerungsebene zu schweben. Dieses Overlay nimmt standardmäßig die Farbe des Farbfeldes ‚a‘ an, aber das data-overlay-theme-Attribut kann dem Seiten-Wrapper hinzugefügt werden, um das Overlay auf einen beliebigen Farbfeld-Buchstaben einzustellen.
Dialoge können auch eher wie ein Kontrollblatt verwendet werden, um mehrere Schaltflächen anzubieten, wenn Sie einfach den oberen Rand des inneren Containerelements des Dialogs entfernen. Wenn Ihre Dialogseite beispielsweise die Klasse my-dialog hätte, könnten Sie dieses CSS hinzufügen, um den Dialog an den oberen Rand zu heften: .ui-dialog.my-dialog .ui-dialog-contain { margin-top: 0 }, oder Sie könnten diesen Stil einfach auf alle Dialoge mit .ui-dialog .ui-dialog-contain { margin-top: 0 } anwenden.
Dialogbreite und -ränder
Zur besseren Lesbarkeit haben Dialoge eine Standardbreite width von 92,5% und einen max-width von 500 Pixeln. Außerdem gibt es einen oberen margin von 10 %, damit die Dialoge auf größeren Bildschirmen einen größeren oberen Rand haben, aber auf Smartphones auf einen kleinen Rand zusammenfallen. Der innere Container des Dialogs wird um 15 Pixel in Richtung top verschoben, um das Eckenstyling zu verbergen, wenn ein Dialog als Kontrollblatt verwendet wird (siehe oben). Um diese Stile außer Kraft zu setzen, fügen Sie die folgende CSS-Überschreibungsregel zu Ihrem Stylesheet hinzu und passen Sie sie nach Bedarf an:
|
1
2
3
4
5
6
7
8
|
|