Lezione #id-jqmobile-2013-0008#
JQuery Mobile permette di applicare dei temi già pronti o di creare i propri temi personalizzati.
Di default il framework JQuery Mobile ci offre 5 temi identificati a / b / c / d / e
<!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>
<div data-role="page" id="one">
<div data-role="header">
<h1>Page one</h1>
</div><!-- /header -->
<div data-role="content">
<a href="#" data-role="button" data-icon="star" data-theme="a">data-theme="a"</a>
<a href="#" data-role="button" data-icon="star" data-theme="b">data-theme="b"</a>
<a href="#" data-role="button" data-icon="star" data-theme="c">data-theme="c"</a>
<a href="#" data-role="button" data-icon="star" data-theme="d">data-theme="d"</a>
<a href="#" data-role="button" data-icon="star" data-theme="e">data-theme="e"</a>
</div><!-- /content -->
<div data-role="footer">
<h4>Page Footer</h4>
</div><!-- /footer -->
</div><!-- /page -->
</body>
</html>
Per creare temi personalizzato possiamo utilizzare il Theme Roller.
1. Andate all’indirizzo:
http://jquerymobile.com/themeroller/! >
2. Cliccare su Get Rolling!
3. Dalla palette dei colori in alto trascinare il colore su un elemento dell’interfaccia.
4. Perfezionare con i comandi sulla colonna di sinistra
5. In alto cliccare su “Download Theme as .zip”
6. Scompattare ed editare a mano se necessario il foglio di stile CSS
7. Have fun!
