jQuery Mobile Pop
Ist eine sehr beliebte Pop-Dialog Pop-ups können auf der Seitenanzeige überlagert werden.
Pop-ups können einen Text, Bilder, Karten oder andere Inhalte angezeigt werden.
Erstellen Sie ein Pop, und die Notwendigkeit zu verwenden <a> <div> Element. Hinzufügen von Daten-rel = "Popup" Eigenschaft auf <a> Element, <div> Element-Daten-role = "Popup" Attribut hinzufügen. Dann geben wir id für das <div>, und stellen Sie dann den href-Wert <a> <div> angegebenen id. <Div> Der Inhalt ist Inhalt Pop-Display.
Hinweis: <div> Pop und klicken Sie auf <a> einen Link auf der gleichen Seite sein muss.
Beispiele
<Div data-role = "Popup " id = "myPopup">
<P> Dies ist ein einfaches Pop </ p>
</ Div>
Versuchen »
Wenn Sie Polsterung nach außen hinzufügen und aus dem Pop hinzufügen können "ui-content" Kategorie in der <div> in:
Pop-up schließen
Standardmäßig klicken Pop Außenbereich oder drücken Sie die Taste "Esc" das Popup zu schließen. Wenn Sie nicht den Bereich außerhalb des Pop Pop-up schließen zu tippen möchten, können Daten-dismissible = "false" Attribut in der zusätzlichen (nicht empfohlen) hinzuzufügen. Sie können auch auf die Schaltfläche Schließen Pop hinzufügen, unter Verwendung von Daten-rel = "Zurück" -Taste auf dem Grundstück, und durch die Art der Position der Taste zu steuern.
| Beschreibung | Beispiele |
|---|---|
| Schließen-Schaltfläche auf der rechten Seite | versuchen |
| Schließen-Taste auf der linken Seite | versuchen |
| Mit den Daten-dismissible Eigenschaft | versuchen |
Positionierung Pop
Standardmäßig wird die Popup-Box direkt über Klick auf das Element angezeigt werden, wenn Sie die Position von Pop steuern müssen, können Sie die Daten-Position zu verwenden Attribut für Pop-Klicks auf den Link zu öffnen.
-Pop-Standorten auf drei Arten:
| Eigenschaft Wert | Beschreibung |
|---|---|
| Daten-Position-to = "Fenster" | Popups in der Fenstermitte angezeigt |
| Daten-Position-to = "# myid" | Popups auf den bekannten Elementen angezeigt #id |
| Daten-Position-to = "Ursprung" | Default. Klicken Sie auf die Pop-Anzeigeelemente. |
Beispiele
<a href="#myPopup2" data-rel="popup" class="ui-btn" data-position-to="#demo"> id = " Demo" </a>
<a href="#myPopup3" data-rel="popup" class="ui-btn" data-position-to="origin"> Herkunft </a>
Versuchen »
Übergang
Standardmäßig ist der Pop kein Übergangseffekt. Wenn Sie möchten , dass Sie Übergangseffekte hinzufügen können (über Daten-Übergang = "Wert" Attribut jQuery Mobile Transition ):
Alle Instanzen von Übergangseffekten
Versuchen »
Pop Richtung kleine Grenz
Wenn Sie ein wenig Pop Richtung der Grenze zu addieren müssen, können Sie die Daten-Pfeil-Eigenschaft und den Wert "l" (links) angeben, "t" (oben), "r" (rechts) oder "b" (unten):
Beispiele
<Div data-role = "Popup " id = "myPopup" class = "ui-content" Daten-Pfeil = "l">
<P> linken Rand Richtung. </ P>
</ Div>
Versuchen »
Pop-Dialog
Sie können Pop als ein Standard-Dialogfeld (den Kopf, und der Inhalt der unteren Markierung) hergestellt:
Beispiele
<Div data-role = "Popup" id = "myPopupDialog">
<Div Daten-role = "header"> <h1> Überschrift .. </ h1> </ div>
<Div Daten-role = "main" class = "ui-content"> <p> Ein Text .. </ p> <a href="#"> Links .. </a>
<Div data-role = "footer"> <h1> am unteren Rand des Textes .. </ h1> </ div>
</ Div>
Versuchen »
Bild pop
Sie können das Bild in der Pop-Anzeige:Beispiele
<Img src = "/ wp-content / uploads / 2015/10 / w3big.jpeg" alt = "w3big" style = "width: 200px;"> </a>
<Div data-role = "Popup" id = "myPopup">
<Img src = "/ wp-content / uploads / 2015/10 / w3big.jpeg" style = "width: 800px; height: 400px;" alt = "w3big">
</ Div>
Versuchen »
Hintergrund Pop-Abdeckung
Sie können die Daten-Overlay-Thema Eigenschaften verwenden, nachdem Pop eine Hintergrundfarbe hinzufügen.
In der Standardeinstellung Abdeckung der Hintergrundfarbe transparent. Mit Hilfe von Daten-Overlay-theme = "a" einen hellen Hintergrund, verwenden Daten-Overlay-theme = "b" hinzufügen dunkle Hülle um den Hintergrund zu addieren:
Beispiele
<Div data-role = "Popup " id = "myPopup" Daten-Overlay-theme = "b">
<P> Hinter mir gibt es einen dunklen Hintergrund. </ P>
</ Div>
Versuchen »
Allgemeine Hintergrundbild Popups häufig überlagern:
Beispiele
<Img src = "/ wp-content / uploads / 2015/10 / w3big.jpeg" alt = "w3big" style = "width: 200px;"> </a>
<Div data-role = "Popup " id = "myPopup" Daten-Overlay-theme = "b">
<Img src = "/ wp-content / uploads / 2015/10 / w3big.jpeg" style = "width: 800px; height: 400px;" alt = "w3big">
</ Div>
Versuchen »
Hinweis: Im nächsten Kapitel erfahren Sie , wie die Formulare im Pop zu verwenden.