jQuery Mobile - Fermeture des boîtes de dialogue

La description

Le bouton de fermeture peut être défini sur le côté droit en ajoutant data-close-btn = "right" au conteneur de dialogue. Par défaut, le bouton de fermeture est présent à gauche dans la boîte de dialogue, lorsque la boîte de dialogue d' attribut est incluse. Si vous n'avez pas besoin du bouton de fermeture dans la boîte de dialogue, vous pouvez ajouter data-close-btn = "none" au conteneur de dialogue.

Définition du texte du bouton de fermeture

  • Grâce à l'attribut de données de la boîte de dialogue, le texte du bouton de fermeture peut être défini.

  • Il s'agit d'une fonction d'accessibilité importante car le texte du bouton de fermeture peut être modifié pour être traduit dans différentes langues.

  • Par défaut, il affiche un bouton contenant uniquement des icônes.

  • Le texte est invisible à l'écran mais le lecteur d'écran peut le lire.

  • L'attribut de données data-close-btn-text est défini pour configurer le texte à partir de votre balisage.

  • La propriété $.mobile.dialog.prototype.options.closeBtnText peut être défini sur une chaîne particulière et vous pouvez configurer pour toutes les boîtes de dialogue en vous liant à l'événement mobileinit.

Exemple

L'exemple suivant illustre l'utilisation de la fermeture des boîtes de dialogue dans jQuery Mobile.

<!DOCTYPE html>
<html>
   <head>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel = "stylesheet" href = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
      <script src = "https://code.jquery.com/jquery-1.11.3.min.js"></script>
      <script src = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
   </head>

   <body>
      <div data-role = "page" id = "page1">
         <div data-role = "header">
            <h2>Header</h2>
         </div>

         <div role = "main" class = "ui-content">
            <a href = "#page2" class = "ui-shadow ui-btn ui-corner-all ui-btn-inline">
               Close Button</a>
            <a href = "#page3" class = "ui-shadow ui-btn ui-corner-all ui-btn-inline">
               No Close Button</a>
         </div>

         <div data-role = "footer">
            <h4>Footer</h4>
         </div>
      </div>

      <div data-role = "page" data-dialog = "true" data-close-btn = "right" id = "page2">
         <div data-role = "header">
            <h1>Dialogs</h1>
         </div>

         <div role = "main" class = "ui-content">
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
            Lorem Ipsum has been the industry's standard dummy text ever since the 
            1500s.</p>
            
            <p><a href = "#page1" class = "ui-btn ui-corner-all">Back</a></p>
         </div>
      </div>

      <div data-role = "page" data-dialog = "true" data-close-btn = "none" id = "page3">
         <div data-role = "header">
            <h1>Dialogs</h1>
         </div>

         <div role = "main" class = "ui-content">
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
            Lorem Ipsum has been the industry's standard dummy text ever since the 
            1500s.</p>
            
            <p><a href = "#page1" class = "ui-btn ui-corner-all">Back</a></p>
         </div>
      </div>
   </body>
</html>

Production

Exécutons les étapes suivantes pour voir comment fonctionne le code ci-dessus -

  • Enregistrez le code html ci-dessus sous closing_dialogs.html fichier dans le dossier racine de votre serveur.

  • Ouvrez ce fichier HTML en tant que http: //localhost/closing_dialogs.html et la sortie suivante sera affichée.