pop jQuery Mobile
Est très populaire popups de dialogue pop peuvent être superposées sur l'écran de la page.
Pop-ups peuvent être utilisés pour afficher un texte, des images, des cartes ou d'autres contenus.
Créer un pop, et la nécessité d'utiliser <a> élément <div>. Ajout de données rel = "popup" propriété sur <a> élément, élément <div> pour ajouter data-role = attribut "popup". Ensuite, nous spécifions id pour le <div>, puis définissez la valeur href <a> <div> id spécifié. <Div> Le contenu est le contenu d'affichage de pop.
Remarque: <div> pop et cliquez sur <a> un lien doit être sur la même page.
Exemples
<Div data-role = "pop - up " id = "MyPopup">
<P> est un simple pop </ p>
</ Div>
Essayez »
Si vous avez besoin d'ajouter un rembourrage à l'extérieur et de la pop peut ajouter la catégorie "ui-content" dans le <div> dans:
Fermez le popup
Par défaut, en cliquant pop espace extérieur ou appuyez sur la touche "Esc" pour fermer la fenêtre. Si vous ne voulez pas appuyez sur la zone en dehors de la pop Fermez le popup peut ajouter des données-révocable = attribut "false" dans la valeur ajoutée (non recommandé). Vous pouvez également ajouter le bouton Fermer sur la pop, en utilisant les données-rel = bouton "retour" sur la propriété, et par le style pour contrôler la position du bouton.
| description | Exemples |
|---|---|
| Fermer le bouton sur le côté droit | essayer |
| Fermer le bouton sur la gauche | essayer |
| Utilisation de la propriété des données-révocable | essayer |
Positionnement pop
Par défaut, les popups apparaissent directement au-dessus, cliquez sur l'élément, si vous avez besoin de contrôler la position de la pop, vous pouvez utiliser les données de position à attribuer pour l'ouverture de clics pop sur le lien.
Contrôle des emplacements pop de trois façons:
| Valeur de la propriété | description |
|---|---|
| données position-to = "fenêtre" | Popups affichées dans le centre de la fenêtre |
| données position-to = "# myId" | Popups affichés sur les éléments connus #id |
| données position-to = "origine" | Par défaut. Cliquez sur les éléments d'affichage de pop. |
Exemples
<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"> </a> d'origine
Essayez »
transition
Par défaut, la pop a pas d'effet de transition. Si vous le souhaitez , vous pouvez ajouter des effets de transition (via les données de transition = "valeur" attribut jQuery Mobile Transition ):
Tous les cas d'effets de transition
Essayez »
direction Pop petite frontière
Si vous avez besoin d'ajouter un peu de direction pop de la frontière, vous pouvez utiliser la propriété des données-flèche et spécifier la valeur "l" (à gauche), "t" (en haut), "r" (sur la droite) ou "b" (en bas):
Exemples
<Div data-role = "pop - up " id = "MyPopup" class = "ui-contenu" data-flèche = "l">
<P> gauche direction de la frontière. </ P>
</ Div>
Essayez »
dialogue Pop
Vous pouvez pop produit comme une boîte de dialogue standard (la tête, et le contenu de la marque en bas):
Exemples
<Div data-role = "popup" id = "myPopupDialog">
<Div data-role = "header"> <h1> en-tête du texte .. </ h1> </ div>
<div data-role = classe "principale" = "ui-content"> <p> Certains textes .. </ p> <a href="#"> liens .. </a>
<Div data-role = "footer"> <h1> au bas du texte .. </ h1> </ div>
</ Div>
Essayez »
image pop
Vous pouvez afficher l'image en pop:Exemples
<Img src = "/ wp-content / uploads / 2015/10 / w3big.jpeg" alt = style "w3big" = "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>
Essayez »
Contexte couverture pop
Vous pouvez utiliser les propriétés de données overlay-thème après pop ajouter une couleur d'arrière-plan.
Par défaut, couvrant la couleur d'arrière-plan transparent. En utilisant les données-overlay-theme = "a" pour ajouter un fond clair, l'utilisation des données-overlay-theme = "b" ajouter la couverture sombre du fond:
Exemples
<Div data-role = "pop - up " id = "MyPopup"-overlay-thème de données = "b">
<P> Derrière moi, il y a un fond sombre. </ P>
</ Div>
Essayez »
General popups background image se superposent fréquemment:
Exemples
<Img src = "/ wp-content / uploads / 2015/10 / w3big.jpeg" alt = style "w3big" = "width: 200px;"> </a>
<Div data-role = "pop - up " id = "MyPopup"-overlay-thème de données = "b">
<Img src = "/ wp-content / uploads / 2015/10 / w3big.jpeg" style = "width: 800px; height: 400px;" alt = "w3big">
</ Div>
Essayez »
Remarque: Dans le chapitre suivant, vous apprendrez à utiliser les formulaires dans la pop.