Primera página jQuery Mobile

Por 9.99€ al mes tendrás acceso completo a todos los cursos. Sin matrícula ni permanencia.

<html>
<head>
	<title></title>
	<meta charset='utf-8'>
	<link rel="stylesheet" type="text/css" href="css/jquerymobile.css">
	<script type="text/javascript" src="js/jquery.js"></script>
	<script type="text/javascript" src="js/jquerymobile.js"></script>
</head>
<body>
	<section id="firstpage" data-role="page">
		<header data-role="header">
			<h2>Cabecera</h2>
		</header>
		<div data-role="content">
			<p>Esta es la primera página</p>
			<a href="#secondpage" style="background:pink" >
				Ir a la segunda página
			</a>
			<a href="#secondpage" data-role="button" style="background:pink">
				Ir a la segunda página
			</a>
			<button style="background:pink">fasdf</button>
		</div>
		<footer data-role="footer">El pie de la página</footer>
	</section>
</body>
</html>
	

Jquery mobile utiliza los atributos data-role para aplicar los estilos.

Notas:

Puedo hacer que un enlace tenga apariencia de botón de dos formas:

  • Mediante atributos: data-role=»button»
  • Mediante clases: class=»ui-btn»

Si no deseamos que un elemento coja los estilos que le asigna jQuery, podemos usar:
data-role=»none»

Añadimos una segunda página al documento anterior

<section id="secondpage" data-role="page">
	<header data-role="header">
		<h2>Cabecera</h2>
	</header>
	<div data-role="content">
		<p>Esta es la segunda página</p>
	</div>
	<footer data-role="footer">El pie de la página 2</footer>
</section>
	

Enlaces a páginas externas

jQueryMobile carga el contenido de la etiqueta <section data-role=»page»> de la nueva página dentro de la etiqueta <section data-role=»page»> de la página actual.

Si no deseas este comportamiento puedes usar cualquiera de los dos siguientes sistemas:

<a href="externalPage.html" rel="external">External link</a>
<a href="externalPage.html" data-ajax="false">External link</a>

Los enlaces a páginas externas con AJAX no funcionan salvo que los ejecutemos en un servidor.

Ejercicio

Hacer una página con jQuery mobile que tenga dos enlaces que carguen la siguiente página. Uno lo hará utilizando AJAX y el otro no.


externalPage.html<html>
<head>
	<title></title>
</head>
<body>
<section id="secondpage" data-role="page">
		<header data-role="header">
			<h1>Cabecera</h1>
		</header>
		<div data-role="content">
			<p>Esta es la segunda página</p>
		</div>
		<footer data-role="footer">El pie de la página 2</footer>
	</section>
</body>
</html>

Por 9.99€ al mes tendrás acceso completo a todos los cursos. Sin matrícula ni permanencia.