Abrir Dialogs JQuery Mobile desde JavaScript

JQuery Mobile

Para esta ocasión estaremos hablando un poco de JQuery Mobile un sistema de Interfaz de usuario UI, que nos permite desarrollar aplicaciones Web Híbridas que se adapten casi a cualquier dispositivo, la funcionalidad en la cual nos centraremos será en poder abrir Dialogs o diálogos desde nuestro código JavaScript apoyándonos en JQuery para realizar dicha acción, veamos:

Como abrir dialogs JQuery Mobile

<div data-role="dialog" id="MyDialog" data-overlay-theme="a" data-theme="f">
 <div data-role="header" data-theme="f" class="ui-corner-top">
 <h1>Listado</h1>
 </div>
 <div data-role="content" data-theme="d" class="ui-corner-bottom ui-content">

 <!-- Contenido del dialogo -->

</div>
</div>

El código anterior nos  ayudaría a construir un dialogo como el siguiente.

Dialog

Hacer el llamado a nuestro dialog desde JavaScript

Para realizar el llamado de nuestro dialog (mostrar) debemos definir en que momento se realizará (Puede ser al pulsar un botón), veamos el código JavaScript.

<button id="BtnIniciar">Iniciar Sesión</button>
 $("#BtnIniciar").click(function() {
 $.mobile.changePage("#MyDialog",
 {role: "dialog",
 transition: "slidedown"
 }
 );
 });

Con el código anterior logramos mostrar nuestro dialog al hacer click en el botón iniciar sesión, también cabe recalcar que se pueden utilizar varios efectos o transiciones como:

Fade, Pop, Flip, Turn, Flow, SlideFade, Slide, SlideUp, SlideDown.

Si este post fue de ayuda para ti, no olvides dejar un comentario, también puedes contar tu experiencia o lo que estés haciendo. Nos ayuda a seguir creciendo. ¡Vamos!, solo te llevará 1 minuto.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *