jQuery Mobile Popups
Popups sind ähnlich wie Dialoge, indem sie beide Overlay ein Teil einer Seite. Ein Popup-Fenster kann nützlich sein, wenn Sie kleine Fotos und Text angezeigt werden soll, Karten oder andere Inhalte.
Um ein Popup zu erstellen, beginnen mit einem <a> Element und einem <div> Element. Fügen Sie die data-rel="popup" Attribut <a> , und die data-role="popup" Attribut auf <div> . Dann eine ID angeben , für <div> , und stellen Sie die href von <a> der angegebenen ID übereinstimmen. Der Inhalt in <div> ist der eigentliche Inhalt , die Pop - up wird , wenn ein Benutzer auf den Link klickt.
Hinweis: Das Popup <div> muss innerhalb der gleichen Seite wie die Verbindung sein.
Beispiel
< a href="#myPopup" data-rel="popup" class="ui-btn ui-btn-inline
ui-corner-all">Show Popup</a>
< div data-role="popup" id="myPopup" >
<p>This
is a simple popup.</p>
</div> Versuch es selber " Wenn Sie einige zusätzliche Polsterung und Marge im Popup - Feld wollen, fügen Sie den "ui-content" Klasse <div> :
Schließen Popups
Standardmäßig können Popups geschlossen werden , indem entweder außerhalb des Popup - Fenster klicken , oder indem Sie die Taste "Esc" -Taste. Wenn Sie nicht das Popup wollen von außerhalb der Box klicken geschlossen werden kann, können Sie das Add - data-dismissible="false" -Attribut auf den Popup (nicht wirklich zu empfehlen). Sie können auch eine Schaltfläche zum Schließen Popup, platziert entweder rechts oder links hinzufügen. Geben Sie dazu eine Schaltfläche Verbindung mit dem data-rel="back" Attribut in den Popup - Container, und positionieren Sie den Button durch CSS - Klassen.
| Beschreibung | Beispiel |
|---|---|
| Rechts Schließen-Schaltfläche | Versuch es |
| Linke Schließen-Schaltfläche | Versuch es |
| Undismissible Popup | Versuch es |
Positionierung Popups
Standardmäßig wird Popups direkt über das Klickelement angezeigt. Um die Position des Popup-Steuerung verwenden, um die Daten-Position zu den Link-Attribut, das verwendet wird, um das Popup zu öffnen.
Es gibt drei Möglichkeiten, um das Popup-Positionierung:
| Attributwert | Beschreibung |
|---|---|
| data-position-to="window" | Popup wird innerhalb des Fensters erscheinen zentriert |
| data-position-to="#myId" | Popup wird über das Element mit einer spezifizierten #id positioniert |
| data-position-to="origin" | Standard. Popup wird direkt über das Klickelement positioniert |
Beispiel
<a href="#myPopup1" data-rel="popup" class="ui-btn" data-position-to="window" >Window</a>
<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" >Origin</a> Versuch es selber " Transitions
Standardmäßig haben Popups keine Übergangseffekte hinzugefügt werden. Sie können einen der Effekte nutzen, dass wir in der "Transitions" Kapitel eingeführt. Wenden Sie einfach die Daten-Übergang = "value" Attribut auf den Link, um das Popup öffnet sich :
Eine Demonstration aller verfügbaren Übergangseffekte
<a href="#myPopup" data-rel="popup" class="ui-btn" data-transition="fade" >Fade</a> Versuch es selber " Popup Arrows
So fügen Sie einen Pfeil , um das Popup - Grenze, verwenden Sie die Daten-Pfeil - Attribut, und geben Sie den Wert "l" (left), "t" (top), "r" (right) oder "b" (bottom) :
Beispiel
<a href="#myPopup" data-rel="popup" class="ui-btn">Open
Popup</a>
<div data-role="popup" id="myPopup" class="ui-content"
data-arrow="l" >
<p>There
is an arrow on my LEFT border.</p>
</div> Versuch es selber " Popup-Dialoge
Sie können Standard-Dialog-Markup in einem Popup (Header, Inhalt und Fußzeile Markup) hinzufügen:
Beispiel
<a href="#myPopupDialog" data-rel="popup" class="ui-btn">Open Dialog
Popup</a>
<div data-role="popup" id="myPopupDialog">
<div
data-role="header"><h1>Header Text..</h1></div>
<div
data-role="main" class="ui-content"><p>Some text..</p><a href="#">some
links..</a>
<div data-role="footer"><h1>Footer Text..</h1></div>
</div> Versuch es selber " Popup-Fotos
Sie können auch Bilder in einem Popup angezeigt werden:
Beispiel
<a href="#myPopup" data-rel="popup" data-position-to="window">
<img src="skaret.jpg"
alt="Skaret View" style="width:200px;"></a>
<div data-role="popup"
id="myPopup">
<img src="skaret.jpg"
style="width:800px;height:400px;" alt="Skaret View">
</div> Versuch es selber " Hinweis: Popups sind nicht ideal , wenn Sie eine ganze Reihe von Bildern, die Sie (wie ein Album mit 500 Bilder) angezeigt werden sollen. Doch für ein paar Bilder, die größer zu betrachten müssen - sie sind perfekt.
Popup-Overlay
Sie können die Hintergrundfarbe hinter dem Popup - Steuerelement (die Seite selbst) mit dem data-overlay-theme - Attribut.
Standardmäßig ist das Overlay transparent. Verwenden Sie data-overlay-theme="a" hinzufügen , um eine Licht - Overlay und Daten-Overlay-theme = "b" eine dunkle Overlay hinzuzufügen:
Beispiel
<a href="#myPopup" data-rel="popup">Show Popup</a>
<div data-role="popup" id="myPopup"
data-overlay-theme="b" >
<p>I
have a dark background behind me.</p>
</div> Versuch es selber " Die Overlay-Effekt wird häufig auf Popup-Fotos verwendet:
Beispiel
<a href="#myPopup" data-rel="popup" data-position-to="window">
<img src="skaret.jpg"
alt="Skaret View" style="width:200px;"></a>
<div data-role="popup"
id="myPopup"
data-overlay-theme="b" >
<img src="skaret.jpg"
style="width:800px;height:400px;" alt="Skaret View">
</div> Versuch es selber " Hinweis: Sie werden auch lernen , wie Pop - ups zu verwenden , in Formen und Listenansichten in späteren Kapiteln.