Skip to main content

47 Cursos de JQuery – Jquery-mobile


Tutorial #47 del curso de Jquery, en este tutorial veremos como navegar entre páginas utilizando 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 - Navegar entre páginas</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 1</h2>
      </div>
      <div data-role="content">
        <a href="#pagina2" data-role="button">Página 2</a>
      </div>

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

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

      <div data-role="header">
        <h2>Página 2</h2>
      </div>
      <div data-role="content">
        <a href="#pagina1" data-role="button">Página 1</a>
        <a href="jquery-mobile3.html" data-role="button">Página externa</a>
        <a href="mailto:ejemplo@ejemplo.com" data-role="button">Enviar Email</a>
        <a href="tel:8542121" data-role="button">Llamar</a>

      </div>

      <div data-role="footer">
        <h2>Pie de página 2</h2>
      </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.