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.
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.