Código:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>Bienvenido a JQuery <i class="fas fa-mobile-alt "></i></h1>
</div>
<div data-role="main" class="ui-content">
<p>Soy un desarrollador de WebApps Mobiles!!</p>
</div>
<div data-role="footer">
<h1>Esto es un pie de pagina</h1>
</div>
</div>
</body>
</html>
Resultado:
Expliación:
- La data-role="page" es la página que se muestra en el navegador
- El data-role = "header" crea una barra de herramientas en la parte superior de la página (a menudo se usa para títulos o botones de búsqueda)
- El data-role="main" define el contenido de la página, como texto, imágenes, botones, formularios, etc.
- La "ui-content" class agrega relleno y margen adicionales dentro del contenido de la página
- El data-role = "footer" crea una barra de herramientas en la parte inferior de la página
- Dentro de estos contenedores, puede agregar cualquier elemento HTML: párrafos, imágenes, encabezados, listas, etc.
Añadiendo Páginas en jQuery Mobile
En jQuery Mobile, puede crear varias páginas en un solo archivo HTML.
Separe cada página con un ID único y use el atributo href para enlazar entre ellas:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/
jquery.mobile-1.4.5.min.css">
jquery.mobile-1.4.5.min.css">
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js">
</script>
</script>
</head>
<body>
<div data-role="page" id="pageone">
<div data-role="header">
<h1>Bienvenido JQuery Mobile</h1>
</div>
<div data-role="main" class="ui-content">
<p>Esto es un parrafo, haz clic en el link de abajo para abrir la pagina 2.</p>
<a href="#pagetwo">Ir a pagina 2</a>
</div>
<div data-role="footer">
<h1>Pie de pagina</h1>
</div>
</div>
<div data-role="page" id="pagetwo">
<div data-role="header">
<h1>Este es el Header dela pagina 2</h1>
</div>
<div data-role="main" class="ui-content">
<p>Esto es la pagina 2. si haces clic al link de abajo regresas a la pagina 1. </p>
<a href="#pageone">Ir a pagina 1</a>
</div>
<div data-role="footer">
<h1>Pie de pagina de la pagina 2</h1>
</div>
</div>
</body>
</html>
Resultado:
Principal
Al hacer clic en el link:
Así de fácil :)
No hay comentarios:
Publicar un comentario