En este artículo, aprenderemos cómo incluir varias páginas en un solo documento jQuery mobile.
Enfoque: esto se puede lograr creando varios div y configurando el atributo de rol de datos en página . Ahora cada div representará una página, y cada div debe tener una identificación única para vincular correctamente entre las páginas. La estructura de la página de jQuery Mobile es optimizado para admitir páginas individuales o «páginas» enlazadas internas locales dentro de una sola página.
Enlaces CDN:
<enlace rel=”hoja de estilo” href=”https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css”>
<script src=”https://code. jquery.com/jquery-1.11.3.min.js”></script>
<script src=”https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min. js”></script>
Pasos: Primero, agregue jQuery CDN al script o descárguelos a su máquina local. Crearemos un documento de 2 páginas. Cree dos elementos div en la página y configure data-role=”page”. Mantenga la identificación del primer div como HomePage y la identificación del segundo div como AboutUs .
<div data-role="page" id="homePage">
Luego crearemos dos etiquetas de anclaje con la propiedad href como href=”#HomePage” y href=”#AboutUs”respectivamente en ambas divs.
<a href="#homePage">Home Page</a> <a href="#AboutUs">About Us</a>
Luego podemos agregar otro contenido en ambos divs según nuestras necesidades.
Ejemplo:
HTML
<html>
<head>
<link rel="stylesheet" href=
"https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src=
"https://code.jquery.com/jquery-1.11.3.min.js">
</script>
<script src=
"https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js">
</script>
</head>
<style>
a {
display: inline-block;
}
a,
h1 {
text-align: center;
margin: 10px;
}
</style>
<body>
<div data-role="page"
id="homePage">
<a href="#homePage">Home Page</a>
<a href="#AboutUs">About Us</a>
<h1>Hello geeks this is the home page</h1>
</div>
<div data-role="page"
id="AboutUs">
<a href="#homePage">Home Page</a>
<a href="#AboutUs">About Us</a>
<h1>Hello again, this is About Us page</h1>
</div>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por pulamolusaimohan y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA