dialog fournie par l’extension page.dialog du widget de page vous permet de styliser une page comme un dialogue, cependant, la gestion spéciale de la navigation sera supprimée. Vous pouvez également envisager de mettre en œuvre des dialogues en utilisant des widgets popup.Toute page peut être présentée comme un dialogue modal en ajoutant l’attribut data-rel="dialog" au lien d’ancrage de la page. Lorsque l’attribut « dialog » est appliqué, le framework ajoute des styles pour ajouter des coins arrondis, des marges autour de la page et un fond sombre pour que le « dialog » semble être suspendu au-dessus de la page.
|
1
|
|
Vous pouvez ouvrir un dialogue de manière programmatique en appelant la fonction $.mobile.changePage :
|
1
2
3
4
5
|
|
Transitions
Par défaut, le dialogue s’ouvrira avec une transition ‘pop’. Comme toutes les pages, vous pouvez spécifier n’importe quelle transition de page que vous voulez sur le dialogue en ajoutant l’attribut data-transition au lien. Pour le rendre plus proche du dialogue, nous recommandons de spécifier une transition de « pop », « slidedown » ou « flip ».
Les valeurs possibles incluent : fade, pop, flip, turn, flow, slidefade, slide, slideup, slidedown, none.
|
1
|
|
Fermeture des dialogues
Lorsqu’un lien quelconque est cliqué dans un dialogue, le framework ferme automatiquement le dialogue et effectue une transition vers la page demandée, comme si le dialogue était une page normale. Néanmoins, les dialogues peuvent également être chaînés, comme expliqué ci-dessous dans la section « Chaînage de dialogues ». De même, un lien qui ouvre une popup laissera également le dialogue en place.
Si le dialogue a un en-tête, le framework ajoutera un bouton de fermeture à gauche de l’en-tête. Vous pouvez changer la position en ajoutant data-close-btn="right" au conteneur du dialogue. Si vous ne voulez pas de bouton de fermeture dans l’en-tête ou ajouter un bouton de fermeture personnalisé, vous pouvez utiliser data-close-btn="none".
Pour créer un bouton « annuler » dans un dialogue, il suffit de créer un lien vers la page qui a déclenché l’ouverture du dialogue et d’ajouter l’attribut data-rel="back" à votre lien. Ce modèle de lien vers la page précédente est également utilisable dans les périphériques non-JS.
Pour les liens générés par JavaScript, vous pouvez simplement définir l’attribut href à « # » et utiliser l’attribut data-rel="back". Vous pouvez également appeler la méthode close() de la boîte de dialogue pour fermer les boîtes de dialogue de manière programmatique, par exemple : $( ".ui-dialog" ).dialog( "close" ).
Définir le texte du bouton de fermeture
Comme pour le plugin de page, vous pouvez définir le texte du bouton de fermeture d’un dialogue par le biais d’une option ou d’un attribut de données. L’option peut être configurée pour tous les dialogues en se liant à l’événement mobileinit et en définissant la propriété $.mobile.dialog.prototype.options.closeBtnText à une chaîne de votre choix, ou vous pouvez placer l’attribut de données data-close-btn-text pour configurer le texte à partir de votre balisage.
Histoire &Comportement du bouton retour
Puisque les dialogues sont généralement utilisés pour soutenir des actions dans une page, le framework n’inclut pas les dialogues dans le suivi de l’historique de l’état de hachage. Cela signifie que les dialogues n’apparaîtront pas dans la chronologie de votre historique de navigation lorsque vous cliquez sur le bouton Précédent. Par exemple, si vous êtes sur une page, cliquez sur un lien pour ouvrir un dialogue, fermez le dialogue, puis naviguez vers une autre page, si vous deviez cliquer sur le bouton Précédent du navigateur à ce moment-là, vous naviguerez de nouveau vers la première page, et non vers le dialogue.
Chaînage de dialogues
Veuillez noter : Si un dialogue ouvre un autre dialogue (chaînage), la fermeture du dernier avec un lien de type data-rel="back" naviguera toujours vers le dialogue précédent jusqu’à ce que la page-racine de type data-role="page" soit atteinte. Cela garantit une navigation cohérente entre les dialogues.
Styling & theming
Les dialogues peuvent être stylisés avec différents swatches de thème, comme n’importe quelle page en ajoutant des attributs data-theme aux conteneurs d’en-tête, de contenu ou de pied de page.
Par défaut, les dialogues ont des coins arrondis. L’option coins peut être définie sur false en ajoutant data-corners="false" au conteneur de dialogue:
Les dialogues semblent flotter au-dessus d’une couche de recouvrement. Cette superposition adopte la couleur de contenu swatch ‘a’ par défaut, mais l’attribut data-overlay-theme peut être ajouté au wrapper de la page pour définir la superposition à n’importe quelle lettre swatch.
Les dialogues peuvent également être utilisés plus comme une feuille de contrôle pour offrir plusieurs boutons si vous supprimez simplement la marge supérieure de l’élément conteneur interne du dialogue. Par exemple, si votre page de dialogue avait une classe de my-dialog, vous pourriez ajouter cette CSS pour épingler ce dialogue en haut : .ui-dialog.my-dialog .ui-dialog-contain { margin-top: 0 }, ou vous pourriez simplement appliquer ce style à toutes les boîtes de dialogue avec .ui-dialog .ui-dialog-contain { margin-top: 0 }.
Largeur et marges des boîtes de dialogue
Pour des raisons de lisibilité, les boîtes de dialogue ont une width par défaut de 92,5 % et une max-width de 500 pixels. Il y a aussi une margin supérieure de 10% pour donner aux dialogues une plus grande marge supérieure sur les écrans plus grands, mais se réduisent à une petite marge sur les smartphones. Le conteneur interne du dialogue est décalé vers le top avec 15px pour masquer le style de coin si un dialogue est utilisé comme feuille de contrôle (voir ci-dessus). Pour remplacer ces styles, ajoutez la règle de remplacement CSS suivante à votre feuille de style et modifiez-la au besoin :
|
1
2
3
4
5
6
7
8
|
|