Lezione #id-jqmobile-2013-0005#
JQuery Mobile mette a disposizione dei pratici menu a fisarmonica (accordions).
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>Accordion</p>
<div data-role="collapsible-set" data-theme="c" data-content-theme="d">
<div data-role="collapsible">
<h3>Section 1</h3>
<p>I'm the collapsible content for section 1</p>
</div>
<div data-role="collapsible">
<h3>Section 2</h3>
<p>I'm the collapsible content for section 2</p>
</div>
<div data-role="collapsible">
<h3>Section 3</h3>
<p>I'm the collapsible content for section 3</p>
</div>
</div>
</div><!-- /content -->
<div data-role="footer">
<h4>Page Footer</h4>
</div><!-- /footer -->
</div><!-- /page -->
</body>
</html>
Per creare un menu a fisarmonica il markup da applicare è il seguente:
<div data-role="collapsible-set">
<div data-role="collapsible">
...
</div>
<div data-role="collapsible">
...
</div>
<div data-role="collapsible">
...
</div>
</div>
A ogni div possiamo assegnare i seguenti attributi:
data-inset=”false” -> valori: true / false -> Inset o Full Width
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 il menu aperto e collasato
data-iconpos=”right” -> valori: right / left / top / bottom -> assegna la posizione dell’icona
data-corners=”false” -> valori: true / false -> spigoli arrotondati o spigoli vivi
data-theme=”b” data-content-theme=”b” -> valori: a 7 b / c / d / e -> assegna separatamente un tema al menu principale e al sottomenù
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
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>Accordion - Inset</p>
<div data-role="collapsible-set" data-theme="c" data-content-theme="d">
<div data-role="collapsible">
<h3>Section 1</h3>
<p>I'm the collapsible content for section 1</p>
</div>
<div data-role="collapsible">
<h3>Section 2</h3>
<p>I'm the collapsible content for section 2</p>
</div>
<div data-role="collapsible">
<h3>Section 3</h3>
<p>I'm the collapsible content for section 3</p>
</div>
</div>
<p>Accordion - Full Width</p>
<div data-role="collapsible-set" data-theme="c" data-content-theme="d" data-inset="false">
<div data-role="collapsible" data-inset="false">
<h3>Section 1</h3>
<p>I'm the collapsible content for section 1</p>
</div>
<div data-role="collapsible" data-inset="false">
<h3>Section 2</h3>
<p>I'm the collapsible content for section 2</p>
</div>
<div data-role="collapsible" data-inset="false">
<h3>Section 3</h3>
<p>I'm the collapsible content for section 3</p>
</div>
</div>
<p>Accordion - Mini</p>
<div data-role="collapsible-set" data-theme="c" data-content-theme="d" data-mini="true">
<div data-role="collapsible">
<h3>Section 1</h3>
<p>I'm the collapsible content for section 1</p>
</div>
<div data-role="collapsible">
<h3>Section 2</h3>
<p>I'm the collapsible content for section 2</p>
</div>
<div data-role="collapsible">
<h3>Section 3</h3>
<p>I'm the collapsible content for section 3</p>
</div>
</div>
<p>Accordion - Icons</p>
<div data-role="collapsible-set" data-theme="c" data-content-theme="d" data-collapsed-icon="gear" data-expanded-icon="delete">
<div data-role="collapsible">
<h3>Section 1</h3>
<p>I'm the collapsible content for section 1</p>
</div>
<div data-role="collapsible" data-iconpos="top">
<h3>Top</h3>
<p>Set via <code>data-iconpos="top"</code> attribute on the collapsible</p>
</div>
</div>
<p>Accordion - Corners</p>
<div data-role="collapsible-set" data-theme="c" data-content-theme="d" data-corners="false">
<div data-role="collapsible">
<h3>Section 1</h3>
<p>I'm the collapsible content for section 1</p>
</div>
</div>
<p>Accordion - Themes</p>
<div data-role="collapsible-set" data-theme="e" data-content-theme="d">
<div data-role="collapsible">
<h3>Section 1</h3>
<p>I'm the collapsible content for section 1</p>
</div>
</div>
</div><!-- /content -->
<div data-role="footer">
<h4>Page Footer</h4>
</div><!-- /footer -->
</div><!-- /page -->
</body>
</html>
