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.

🌟 ¡Visita Nuestra Tienda para Programadores! 🌟

Descubre Códigos Fuente, Cursos, Software, Computadoras, Accesorios y Regalos Exclusivos. ¡Todo lo que necesitas para llevar tu programación al siguiente nivel!

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

Deja una respuesta

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