Skip to main content

48 Cursos de JQuery – Jquery-mobile


Tutorial #48 del curso de Jquery, en este video tutorial veremos como agregar efectos de transición entre páginas, también veremos como crear ventanas de dialogo todo esto en Jquery-mobile.

<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>JQuery - Mobile - Transiciones - Cuadros de díalogo</title>
    <link href="jquery-mobile/jquery.mobile-1.4.5.min.css" rel="stylesheet">
  </head>
  <body>

    <div data-role="page" id="pagina1">

      <div data-role="header">
        <h2>Página Transiciones</h2>
      </div>
      <div data-role="content">
        <a href="#pagina2" data-transition="flip" data-role="button">Página 2</a>
      </div>

      <div data-role="footer">
        <h2>Pie de página</h2>
      </div>

    </div>

    <div data-role="page" id="pagina2">

      <div data-role="header">
        <h2>Página Transiciones</h2>
      </div>
      <div data-role="content">
        <a href="#pagina1" data-transition="flow" data-role="button">Página 1</a>
        <a href="#dialogo" data-rel="dialog" data-role="button">Díalogo</a>
      </div>

      <div data-role="footer">
        <h2>Pie de página</h2>
      </div>

    </div>

    <div data-role="page" id="dialogo">

      <div data-role="header">
        <h2>Díalogo</h2>
      </div>
      <div data-role="content">
        <a href="#pagina1" data-role="button">Aceptar</a>
        <a href="#pagina1" data-role="button">Cancelar</a>
      </div>

    </div>

    <script src="js/jquery-2.1.3.min.js"></script>
    <script src="jquery-mobile/jquery.mobile-1.4.5.min.js"></script>
  </body>
</html>

Deja una respuesta

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

 

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.