jQuery Mobile - Diálogos de cierre

Descripción

El botón de cierre se puede establecer en el lado derecho agregando data-close-btn = "right" al contenedor de diálogo. De forma predeterminada, el botón de cierre está presente a la izquierda en el cuadro de diálogo, cuando se incluye el cuadro de diálogo de atributos . Si no necesita el botón de cierre en el cuadro de diálogo, puede agregar data-close-btn = "none" al contenedor de diálogo.

Configurar el texto del botón de cierre

A través del atributo de datos del cuadro de diálogo, se puede configurar el texto del botón de cierre.
Es una característica de accesibilidad importante, ya que el texto del botón de cierre se puede modificar para traducir a diferentes idiomas.
De forma predeterminada, muestra un botón de solo icono.
El texto es invisible en la pantalla pero el lector de pantalla puede leerlo.
El atributo de datos data-close-btn-text está configurado para configurar el texto de su marcado.
La propiedad $.mobile.dialog.prototype.options.closeBtnText se puede establecer en una cadena en particular y se puede configurar para todos los cuadros de diálogo vinculando al evento mobileinit.

Ejemplo

El siguiente ejemplo demuestra el uso de cerrar cuadros de diálogo en 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>

Salida

Realicemos los siguientes pasos para ver cómo funciona el código anterior:

Guarde el código html anterior como closing_dialogs.html archivo en la carpeta raíz de su servidor.
Abra este archivo HTML como http: //localhost/closing_dialogs.html y se mostrará el siguiente resultado.

↰ Previous page