jQuery Mobile popups
Popups sont semblables à des boîtes de dialogue, en ce qu'elles une partie d'une page à la fois superposition. Une boîte de pop-up peut être utile lorsque vous souhaitez afficher un petit texte, des photos, des cartes ou d'autres contenus.
Pour créer un popup, commencer par un <a> élément et un <div> élément. Ajouter les data-rel="popup" attribut à <a> et le data-role="popup" attribuer à <div> . Spécifiez ensuite un identifiant pour <div> , et définir le href de <a> pour correspondre à l'identifiant spécifié. Le contenu à l' intérieur <div> est le contenu réel qui apparaîtra lorsque l'utilisateur clique sur le lien.
Remarque: Le popup <div> doit être dans la même page que le lien.
Exemple
< 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> Essayez - le vous - même » Si vous voulez un rembourrage supplémentaire et la marge dans votre boîte de pop - up, ajoutez le "ui-content" classe <div> :
Fermeture popups
Par défaut, les popups peuvent être fermées en cliquant en dehors de la fenêtre contextuelle ou en appuyant sur la "Esc" clé. Si vous ne voulez pas le popup pour être refermable en cliquant en dehors de la boîte, vous pouvez ajouter le data-dismissible="false" attribut à la fenêtre contextuelle (pas vraiment recommandé). Vous pouvez également ajouter un bouton près de la fenêtre, placée soit à droite ou à gauche. Pour ce faire, ajoutez un lien de bouton avec le data-rel="back" attribut dans le conteneur contextuel, et positionner le bouton par classes CSS.
| La description | Exemple |
|---|---|
| bouton de fermeture droite | Essayez - le |
| bouton de fermeture gauche | Essayez - le |
| Popup Undismissible | Essayez - le |
Positionnement des popups
Par défaut, les popups apparaissent directement sur l'élément cliqué. Pour contrôler la position de la fenêtre, utilisez les données-position à attribuer sur le lien qui est utilisé pour ouvrir le menu contextuel.
Il y a trois façons de positionner la fenêtre contextuelle:
| Valeur d'attribut | La description |
|---|---|
| data-position-to="window" | Popup apparaîtra centré dans la fenêtre |
| data-position-to="#myId" | Popup est positionné sur l'élément avec un #id spécifié |
| data-position-to="origin" | Défaut. Popup est positionné directement au-dessus de l'élément cliqué |
Exemple
<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> Essayez - le vous - même » Transitions
Par défaut, les popups ne sont pas des effets ajoutés à eux de transition. Vous pouvez utiliser l'un des effets que nous avons introduit dans le "Transitions" chapitre. Il suffit d' appliquer les données de transition = "valeur" attribut pour le lien qui ouvre le menu contextuel:
Une démonstration de tous les effets de transition disponibles
<a href="#myPopup" data-rel="popup" class="ui-btn" data-transition="fade" >Fade</a> Essayez - le vous - même » Arrows Popup
Pour ajouter une flèche à la frontière de la popup, utilisez l'attribut data-flèche, et spécifier la valeur "l" (left), "t" (top), "r" (right) à "b" (bottom) "l" (left), "t" (top), "r" (right) en "l" (left), "t" (top), "r" (right) à "l" (left), "t" (top), "r" (right) ou "b" (bottom) en "b" (bottom) :
Exemple
<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> Essayez - le vous - même » Popup Dialogs
Vous pouvez ajouter des balises de dialogue standard dans un popup (en-tête, le contenu et le pied de page balisage):
Exemple
<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> Essayez - le vous - même » Photos Popup
Vous pouvez également afficher des images dans une fenêtre contextuelle:
Exemple
<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> Essayez - le vous - même » Remarque: les popups ne sont pas idéales lorsque vous avez toute une série d'images que vous souhaitez afficher (comme un album avec 500 images). Cependant, pour un couple d'images qui doivent être vu plus grand - ils sont parfaits.
Popup Overlay
Vous pouvez contrôler la couleur de fond derrière la fenêtre contextuelle (la page elle - même) avec les data-overlay-theme attribut.
Par défaut, le recouvrement est transparent. Utilisez les data-overlay-theme="a" pour ajouter une superposition de lumière et des données-overlay-theme = "b" pour ajouter une superposition sombre:
Exemple
<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> Essayez - le vous - même » L'effet de superposition est souvent utilisé sur les photos popup:
Exemple
<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> Essayez - le vous - même » Remarque: Vous apprendrez également à utiliser des popups dans les formes et les vues de liste dans les chapitres suivants.