Lezione #id-jqmobile-2013-0006#
JQuery Mobile mette a disposizione elementi pieghevoli (collapsible).
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">
<div data-role="collapsible">
<h4>Heading</h4>
<p>I'm the collapsible content. By default I'm closed, but you can click the header to open me.</p>
</div>
</div><!-- /content -->
<div data-role="footer">
<h4>Page Footer</h4>
</div><!-- /footer -->
</div><!-- /page -->
</body>
</html>
Per creare un menu pieghevole il markup da applicare è il seguente:
<div data-role="collapsible">
<h4>Heading</h4>
<p>I'm the collapsible content. By default I'm closed, but you can click the header to open me.</p>
</div>
Dovbbiamo assegnare:
1. al div l’attributo data-role=”collapsible”
2. è importante iniziare con un tag da h1 a h6, questo sarà il contenuto di testa dell’elemento, quello che resta visibile dopo averlo collassato.
A ogni div possiamo assegnare i seguenti attributi:
data-collapsed=”false” -> valori: true / false -> Per espandere il contenuto al caricamento della pagina.
data-mini=”true” -> valori: true / false -> Per avere una versione miniaturizzata
data-collapsed-icon=”arrow-r” data-expanded-icon=”arrow-d” -> assegna le icone per l’elemento aperto e collasato
data-iconpos=”right” -> valori: right / left / top / bottom -> assegna la posizione dell’icona
data-theme=”b” data-content-theme=”b” -> valori: a 7 b / c / d / e -> assegna separatamente un tema all’header e al sottomenù
data-inset=”false” -> valori: true / false -> Per avere attivare e disattivare i bordi.
Differenza tra data-role=”collapsible” e data-role=”collapsible-set”:
data-role=”collapsible-set” apre solo un contenuto per volta
data-role=”collapsible-set” apre anche più contenuti per volta
Per i forms utilizziamo i tag:
<legend> <fieldset>
Ad esempio:
<form>
<fieldset data-role="collapsible" data-theme="a" data-content-theme="d">
<legend>Legend</legend>
<label for="textinput-f">Text Input:</label>
<input type="text" name="textinput-f" id="textinput-f" placeholder="Text input" value="">
<div data-role="controlgroup">
<input type="checkbox" name="checkbox-1-a" id="checkbox-1-a">
<label for="checkbox-1-a">One</label>
<input type="checkbox" name="checkbox-2-a" id="checkbox-2-a">
<label for="checkbox-2-a">Two</label>
<input type="checkbox" name="checkbox-3-a" id="checkbox-3-a">
<label for="checkbox-3-a">Three</label>
</div>
</fieldset>
</form>
Ora mettiamo tutto insieme:
<!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">
<p>Basic</p>
<div data-role="collapsible">
<h4>Heading</h4>
<p>I'm the collapsible content. By default I'm closed, but you can click the header to open me.</p>
</div>
<p>Theme</p>
<div data-role="collapsible" data-theme="b" data-content-theme="d">
<h4>Heading</h4>
<p>I'm the collapsible content with a themed content block set to "d".</p>
</div>
<p>Expanded</p>
<div data-role="collapsible" data-collapsed="false" data-theme="b" data-content-theme="d">
<h4>Heading</h4>
<ul data-role="listview">
<li><a href="#">List item 1</a></li>
<li><a href="#">List item 2</a></li>
<li><a href="#">List item 3</a></li>
</ul>
</div>
<p>Mini</p>
<div data-role="collapsible" data-mini="true" data-theme="b" data-content-theme="a">
<h4>Heading</h4>
<ul data-role="listview">
<li><a href="#">List item 1</a></li>
<li><a href="#">List item 2</a></li>
<li><a href="#">List item 3</a></li>
</ul>
</div>
<p>Icons</p>
<div data-role="collapsible" data-theme="b" data-content-theme="d" data-collapsed-icon="arrow-d" data-expanded-icon="arrow-u" data-iconpos="right">
<h4>Heading</h4>
<ul data-role="listview" data-inset="false">
<li>Read-only list item 1</li>
<li>Read-only list item 2</li>
<li>Read-only list item 3</li>
</ul>
</div>
</div><!-- /content -->
<p>Legend</p>
<form>
<fieldset data-role="collapsible" data-theme="a" data-content-theme="d">
<legend>Legend</legend>
<label for="textinput-f">Text Input:</label>
<input type="text" name="textinput-f" id="textinput-f" placeholder="Text input" value="">
<div data-role="controlgroup">
<input type="checkbox" name="checkbox-1-a" id="checkbox-1-a">
<label for="checkbox-1-a">One</label>
<input type="checkbox" name="checkbox-2-a" id="checkbox-2-a">
<label for="checkbox-2-a">Two</label>
<input type="checkbox" name="checkbox-3-a" id="checkbox-3-a">
<label for="checkbox-3-a">Three</label>
</div>
</fieldset>
</form>
<p>Non-inset</p>
<div data-role="collapsible" data-inset="false" data-theme="c" data-content-theme="d">
<h4>Heading</h4>
<p>I'm the collapsible content. By default I'm closed, but you can click the header to open me.</p>
</div>
<p>Set o collapsible</p>
<div data-role="collapsible" data-theme="b" data-content-theme="d" data-inset="false">
<h3>Pets</h3>
<ul data-role="listview">
<li><a href="#">Canary</a></li>
<li><a href="#">Cat</a></li>
<li><a href="#">Dog</a></li>
<li><a href="#">Gerbil</a></li>
<li><a href="#">Iguana</a></li>
<li><a href="#">Mouse</a></li>
</ul>
</div><!-- /collapsible -->
<div data-role="collapsible" data-theme="b" data-content-theme="d" data-inset="false">
<h3>Farm animals</h3>
<ul data-role="listview">
<li><a href="#">Chicken</a></li>
<li><a href="#">Cow</a></li>
<li><a href="#">Duck</a></li>
<li><a href="#">Horse</a></li>
<li><a href="#">Pig</a></li>
<li><a href="#">Sheep</a></li>
</ul>
</div><!-- /collapsible -->
<div data-role="collapsible" data-theme="b" data-content-theme="d" data-inset="false">
<h3>Wild Animals</h3>
<ul data-role="listview">
<li><a href="#">Aardvark</a></li>
<li><a href="#">Alligator</a></li>
<li><a href="#">Ant</a></li>
<li><a href="#">Bear</a></li>
<li><a href="#">Beaver</a></li>
<li><a href="#">Cougar</a></li>
<li><a href="#">Dingo</a></li>
</ul>
</div><!-- /collapsible -->
<div data-role="footer">
<h4>Page Footer</h4>
</div><!-- /footer -->
</div><!-- /page -->
</body>
</html>
