• Création de boites de dialogues
• Transitions
• Fermeture de dialogue
  • Réglage du texte du bouton de fermeture
• Historique & Comportement du bouton Précédent
• Style & Thème
• Marges et Largeur de la boîte de dialogue

Création de boites de dialogues

Toute page peut être présentée comme une boite de dialogue modale en ajoutant l'attribut data-rel="dialog" à l'ancre de la page. Quand l'attribut "dialog" est appliqué, le framework ajoute du style pour arrondir les coins, des marges autour de la page et un fond sombre pour que le "dialog" apparaissent comme suspendu au-dessus de la page.

<a href="foo.html" data-rel="dialog">Ouvrir une boite de dialogue</a>

Voir le résultat : Ouvrir une boite de dialogue

Transitions

Par défaut, la boite de dialogue sera ouverte à l'aide d'une transition de type 'pop'. Comme toutes les pages, vous pouvez spécifier le type de transition que vous souhaitez voir appliquer sur la boite de dialoque en ajoutant l'attribut data-transition au lien. Pour que la ressemblance avec une boite de dialoque soit encore plus marquée, nous vous recommandons de spécifier une transition de type "pop", "slideup" ou "flip".

<a href="foo.html" data-rel="dialog" data-transition="pop">Ouvrir une boite de dialogue</a>

Attention : Pour avoir un excellent rendu de l'effet de transition sur un ordinateur de bureau privilégiez le navigateur Safari.

Transition de type 'pop'

<a href="foo.html" data-rel="dialog" data-transition="pop">Ouvrir une boite de dialogue</a>

Voir le résultat : data-transition="pop"

Transition de type 'slidedown'

<a href="foo.html" data-rel="dialog" data-transition="slidedown">Ouvrir une boite de dialogue</a>

Voir le résultat : data-transition="slidedown"

Transition de type 'flip'

<a href="foo.html" data-rel="dialog" data-transition="flip">Ouvrir une boite de dialogue</a>

Voir le résultat : data-transition="flip"

Fermeture de dialogue

Quand n'importe quel lien est cliqué dans une boîte de dialogue, le framework fermera automatiquement la boite de dialogue et la transition vers la page demandée s'effectuera comme si la boite de dialogue était une page normale. Pour créer un bouton "Annuler" dans une boite de dialogue, il suffit de faire un lien vers la page qui a déclenché l'ouverture de la boite de dialogue et d'ajouter l'attribut data-rel="back" dans votre lien. Ce schéma de liaison vers la page précédente est également utilisable tel quel dans des dispositifs non JavaScript.

Pour les liens générés par JavaScript, vous pouvez simplement définir l'attribut href avec "#" et utiliser l'attribut data-rel="back". Vous pouvez également appeler la méthode close() de la boite de dialoque pour fermer la boite de dialogue par programmation, par exemple : $('.ui-dialog').dialog('close').

Réglage du texte du bouton de fermeture

Tout comme le plugin page, vous pouvez définir le texte du bouton de fermeture de la boite de dialogue grâce à une option ou l'attribut data. L'option peut être configurée pour toutes les boites de dialogues en se liant à l'événement mobileinit et définissant la propriété $.Mobile.dialog.prototype.options.closeBtnText à l'aide d'une chaîne de votre choix, ou vous pouvez placer l'attribut de données data-close-btn-text pour configurer le texte de votre balise.

Historique & Comportement du bouton Précédent

Comme les dialogues sont typiquement utilisés pour effectuer des actions au sein d'une page, le framework n'inclut pas les boites de dialogues dans le suivi de l'historique d'état du hash. Cela signifie que les boites de dialogues n'apparaîtront pas dans la chronologie de votre historique de navigation lorsque le bouton "Précédent" sera cliqué. Par exemple, si vous êtes sur une page, cliquez sur un lien pour ouvrir une boite de dialogue, ensuite fermez la, puis naviguez vers une autre page, si vous deviez cliquer sur le bouton "Précédent" de votre navigateur, à ce stade, vous reviendriez sur la première page, et non sur la boîte de dialogue.

Style & Thème

Les boites de dialogues peuvent être stylisées avec des thèmes différents, tout comme n'importe quelle page. Voici un design différent de boite de dialogue :

Les boîtes de dialogue semblent être flottant au-dessus d'une couche de superposition. Cette superposition adopte l'échantillon A, couleur de contenu par défaut, mais l'attribut data-overlay-theme peut être ajouté à l'emballage de la page pour définir la superposition de toute lettre de swatch. Voici un exemple d'une boîte de dialogue avec la superposition définie sur la valeur de l'échantillon e :

Les boîtes de dialogue peuvent également servir plus comme une feuille de contrôle afin d'offrir de multiples boutons en supprimant l'en-tête :

Marges et Largeur de la boîte de dialogue

Par souci de lisibilité, les boites de dialogues ont, par défaut, une largeur maximale max-width de 500 pixels (plus 15px padding de chaque côté). Il y a également une marge supérieure de 10 % pour donner aux boîtes de dialogue une plus grande marge supérieure sur des écrans plus grands, mais qui se réduit à une toute petite marge sur les smartphones. Pour ignorer ces styles, ajoutez le code CSS suivant à votre feuille de style et modifier le au besoin :

.ui-dialog .ui-header, 
.ui-dialog .ui-content, 
.ui-dialog .ui-footer { 
	max-width: 500px; 
	margin: 10% auto 15px auto;
}