Lezione #id-jqmobile-2013-0002#

JQuery Mobile permette di aprire una nuova pagina HTML come fosse una finestra di dialogo.

Vediamo il seguente codice:

<!DOCTYPE html>
<html>
<head>
	<title>Page Title</title>

	<meta name="viewport" content="width=device-width, initial-scale=1">

	<link rel="stylesheet" href="css/jquery.mobile-1.3.2.min.css" />
	<script src="js/jquery-1.9.1.min.js"></script>
	<script src="js/jquery.mobile-1.3.2.min.js"></script>
</head>
<body>

<!-- ################### -->
<!-- Start of first page -->
<!-- ################### -->

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

	<div data-role="header">
		<h1>Page one</h1>
	</div><!-- /header -->

	<div data-role="content">
		<p>I'm first in the source order so I'm shown as the page.</p>
		<p>View internal page called <a href="#two" data-rel="dialog" data-transition="flip">two</a></p>
	</div><!-- /content -->

	<div data-role="footer">
		<h4>Page Footer</h4>
	</div><!-- /footer -->
</div><!-- /page -->

<!-- #################### -->
<!-- Start of second page -->
<!-- #################### -->

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

	<div data-role="header">
		<h1>Page Two</h1>
	</div><!-- /header -->

	<div data-role="content">
		<p>I'm the second in the source order so I'm hidden when the page loads. I'm just shown if a link that references my id is beeing clicked.</p>
		<p><a href="#one">Back to page one</a></p>
	</div><!-- /content -->

	<div data-role="footer">
		<h4>Page Footer</h4>
	</div><!-- /footer -->
</div><!-- /page -->

</body>

</html>

Vedi il codice in azione! >

Prendiamo in considerazione la riga:

<a href="#two" data-rel="dialog" data-transition="flip">two</a>

Al tag HTML – href – possiamo assegnare gli attributi:
data-rel=”dialog” -> apri il link come una finestra di dialogo

data-transition=”flip” per una transizione che capovolge
data-transition=”pop” per una transizione popup
data-transition=”slidedown” per una transizione che scorre verso il basso
etc…

Vedi tutte le transizioni disponibili >

data-close-btn=”right” per posizionare a destra il bottone di chiusura
data-close-btn=”none” per nascondere il bottone di chiusura

Nella finestra di dialogo per i link generati da JavaScript si può tornare alla pagina precedente con la seguente sintassi:
href=”#” rel=”back”

Stili e temi:
data-corners=”false” per togliere i bordi arrotondati

Il mio sito ufficiale >