Lezione #id-jqmobile-2013-0009#
JQuery Mobile mette a disposizione degli attributi pensati apposta per gli elenchi non ordinati (ul) e ordinati (ol).
Vediamo la sintassi di base:
<!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">
<ul data-role="listview">
<li>Acura</li>
<li>Audi</li>
<li>BMW</li>
<li>Cadillac</li>
<li>Ferrari</li>
</ul>
</div><!-- /content -->
<div data-role="footer">
<h4>Page Footer</h4>
</div><!-- /footer -->
</div><!-- /page -->
</body>
</html>
Agli elenchi non ordinati assegnamo l’attributo: ul data-role=”listview”
Agli elenchi ordinati assegnamo l’attributo: ol data-role=”listview”
Altri attributi:
data-inset=”true” -> true o false -> attiva e disattiva i bordi arrotondati
data-filter=”true” data-filter-placeholder=”Search fruits…” -> true o false -> nasconde gli elementi – li – in tempo reale durante la ricerca
data-filter=”true” data-filter-reveal=”true” data-filter-placeholder=”Search fruits…” -> true o false -> mostra gli elementi – li – in tempo reale durante la ricerca
data-role=”list-divider” -> aggiunge un divisorio
data-autodividers=”true” -> aggiunge un divisorio colorato
span class=”ui-li-count”>12 -> aggiunge un contatore (Count bubbles)
data-icon=”gear” -> aggiunge un’unicona standard
Per aggiungere icona personalizzata 16×16
<li><a href="#"><img src="../../_assets/img/gf.png" alt="France" class="ui-li-icon ui-corner-none">France</a></li>
Per aggiungere una miniatura 80×80 px
<li><a href="#">
<img src="img/firefox-logo.png">
<h2>Content</h2>
<p>Content</p></a>
</li>
Bottoni con separazione, notare che lo split può avere un tema differente dal resto dell’elemento.
<ul data-role="listview" data-split-icon="gear" data-split-theme="d">
Un listato di esempio con altre variazioni sul tema:
<!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>Elenco non ordinato</p>
<ul data-role="listview">
<li>Acura</li>
<li>Audi</li>
<li>BMW</li>
<li>Cadillac</li>
<li>Ferrari</li>
</ul>
<p>Elenco ordinato</p>
<ol data-role="listview">
<li>Acura</li>
<li>Audi</li>
<li>BMW</li>
<li>Cadillac</li>
<li>Ferrari</li>
</ol>
<p>Linked</p>
<ul data-role="listview">
<li><a href="#">Acura</a></li>
<li><a href="#">Audi</a></li>
<li><a href="#">BMW</a></li>
<li><a href="#">Cadillac</a></li>
<li><a href="#">Ferrari</a></li>
</ul>
<p>Inset</p>
<ul data-role="listview" data-inset="true">
<li><a href="#">Acura</a></li>
<li><a href="#">Audi</a></li>
<li><a href="#">BMW</a></li>
<li><a href="#">Cadillac</a></li>
<li><a href="#">Ferrari</a></li>
</ul>
<p>Filter</p>
<ul data-role="listview" data-filter="true" data-filter-placeholder="Search fruits..." data-inset="true">
<li><a href="#">Apple</a></li>
<li><a href="#">Banana</a></li>
<li><a href="#">Cherry</a></li>
<li><a href="#">Cranberry</a></li>
<li><a href="#">Grape</a></li>
<li><a href="#">Orange</a></li>
</ul>
<p>Filter Reveal</p>
<ul data-role="listview" data-filter="true" data-filter-reveal="true" data-filter-placeholder="Search fruits..." data-inset="true">
<li><a href="#">Apple</a></li>
<li><a href="#">Banana</a></li>
<li><a href="#">Cherry</a></li>
<li><a href="#">Cranberry</a></li>
<li><a href="#">Grape</a></li>
<li><a href="#">Orange</a></li>
</ul>
<p>Divider</p>
<ul data-role="listview" data-inset="true" data-divider-theme="d">
<li data-role="list-divider">Mail</li>
<li><a href="#">Inbox</a></li>
<li><a href="#">Outbox</a></li>
<li data-role="list-divider">Contacts</li>
<li><a href="#">Friends</a></li>
<li><a href="#">Work</a></li>
</ul>
<p>Autodividers</p>
<ul data-role="listview" data-autodividers="true" data-filter="true" data-inset="true">
<li><a href="index.html">Adam Kinkaid</a></li>
<li><a href="index.html">Alex Wickerham</a></li>
<li><a href="index.html">Avery Johnson</a></li>
<li><a href="index.html">Bob Cabot</a></li>
<li><a href="index.html">Caleb Booth</a></li>
<li><a href="index.html">Christopher Adams</a></li>
<li><a href="index.html">Culver James</a></li>
</ul>
<p>Count Bubbles</p>
<ul data-role="listview" data-count-theme="c" data-inset="true">
<li><a href="#">Inbox <span class="ui-li-count">12</span></a></li>
<li><a href="#">Outbox <span class="ui-li-count">0</span></a></li>
<li><a href="#">Drafts <span class="ui-li-count">4</span></a></li>
<li><a href="#">Sent <span class="ui-li-count">328</span></a></li>
<li><a href="#">Trash <span class="ui-li-count">62</span></a></li>
</ul>
<p>Icons 16x16</p>
<ul data-role="listview" data-inset="true">
<li><a href="#"><img src="img/gf.png" alt="France" class="ui-li-icon ui-corner-none">France</a></li>
<li><a href="#"><img src="img/de.png" alt="Germany" class="ui-li-icon">Germany</a></li>
</ul>
<p>Thumbnails automatic resize 80x80 px</p>
<ul data-role="listview" data-inset="true">
<li><a href="#">
<img src="img/firefox-logo.png">
<h2>Content</h2>
<p>Content</p></a>
</li>
<li><a href="#">
<img src="img/firefox-logo.png">
<h2>Content</h2>
<p>Content</p></a>
</li>
<li><a href="#">
<img src="img/firefox-logo.png">
<h2>Content</h2>
<p>Content</p></a>
</li>
</ul>
<p>Split Buttons</p>
<ul data-role="listview" data-split-icon="gear" data-split-theme="d" data-inset="true">
<li><a href="#">
<img src="img/firefox-logo.png">
<h2>Broken Bells</h2>
<p>Broken Bells</p></a>
<a href="#purchase" data-rel="popup" data-position-to="window" data-transition="pop">Purchase album</a>
</li>
<li><a href="#">
<img src="img/firefox-logo.png">
<h2>Warning</h2>
<p>Hot Chip</p></a>
<a href="#purchase" data-rel="popup" data-position-to="window" data-transition="pop">Purchase album</a>
</li>
<li><a href="#">
<img src="img/firefox-logo.png">
<h2>Wolfgang Amadeus Phoenix</h2>
<p>Phoenix</p></a>
<a href="#purchase" data-rel="popup" data-position-to="window" data-transition="pop">Purchase album</a>
</li>
</ul>
<div data-role="popup" id="purchase" data-theme="d" data-overlay-theme="b" class="ui-content" style="max-width:340px; padding-bottom:2em;">
<h3>Purchase Album?</h3>
<p>Your download will begin immediately on your mobile device when you purchase.</p>
<a href="index.html" data-role="button" data-rel="back" data-theme="b" data-icon="check" data-inline="true" data-mini="true">Buy: $10.99</a>
<a href="index.html" data-role="button" data-rel="back" data-inline="true" data-mini="true">Cancel</a>
</div>
<p>Formatted content</p>
<ul data-role="listview" data-inset="true">
<li data-role="list-divider">Friday, October 8, 2010 <span class="ui-li-count">2</span></li>
<li><a href="index.html">
<h2>Stephen Weber</h2>
<p><strong>You've been invited to a meeting at Filament Group in Boston, MA</strong></p>
<p>Hey Stephen, if you're available at 10am tomorrow, we've got a meeting with the jQuery team.</p>
<p class="ui-li-aside"><strong>6:24</strong>PM</p>
</a></li>
<li><a href="index.html">
<h2>jQuery Team</h2>
<p><strong>Boston Conference Planning</strong></p>
<p>In preparation for the upcoming conference in Boston, we need to start gathering a list of sponsors and speakers.</p>
<p class="ui-li-aside"><strong>9:18</strong>AM</p>
</a></li>
<li data-role="list-divider">Thursday, October 7, 2010 <span class="ui-li-count">1</span></li>
<li><a href="index.html">
<h2>Avery Walker</h2>
<p><strong>Re: Dinner Tonight</strong></p>
<p>Sure, let's plan on meeting at Highland Kitchen at 8:00 tonight. Can't wait! </p>
<p class="ui-li-aside"><strong>4:48</strong>PM</p>
</a></li>
</ul>
<p>Themes</p>
<ul data-role="listview" data-inset="true" data-theme="d" data-divider-theme="e" data-count-theme="b">
<li data-role="list-divider">Divider</li>
<li><a href="index.html" data-theme="e">Inbox <span class="ui-li-count">12</span></a></li>
<li><a href="index.html">Outbox <span class="ui-li-count">0</span></a></li>
<li><a href="index.html">Sent <span class="ui-li-count">328</span></a></li>
</ul>
<p>No white icon sprite</p>
<ul data-role="listview" data-inset="true" class="ui-icon-alt">
<li><a href="#">Acura</a></li>
<li><a href="#">Audi</a></li>
<li><a href="#">BMW</a></li>
<li><a href="#">Cadillac</a></li>
<li><a href="#">Ferrari</a></li>
</ul>
<p>Forms</p>
<form>
<ul data-role="listview" data-inset="true">
<li data-role="fieldcontain">
<label for="name2">Text Input:</label>
<input type="text" name="name2" id="name2" value="" data-clear-btn="true">
</li>
<li data-role="fieldcontain">
<label for="textarea2">Textarea:</label>
<textarea cols="40" rows="8" name="textarea2" id="textarea2"></textarea>
</li>
<li data-role="fieldcontain">
<label for="flip2">Flip switch:</label>
<select name="flip2" id="flip2" data-role="slider">
<option value="off">Off</option>
<option value="on">On</option>
</select>
</li>
<li data-role="fieldcontain">
<label for="slider2">Slider:</label>
<input type="range" name="slider2" id="slider2" value="0" min="0" max="100" data-highlight="true">
</li>
<li data-role="fieldcontain">
<label for="select-choice-1" class="select">Choose shipping method:</label>
<select name="select-choice-1" id="select-choice-1">
<option value="standard">Standard: 7 day</option>
<option value="rush">Rush: 3 days</option>
<option value="express">Express: next day</option>
<option value="overnight">Overnight</option>
</select>
</li>
<li class="ui-body ui-body-b">
<fieldset class="ui-grid-a">
<div class="ui-block-a"><button type="submit" data-theme="d">Cancel</button></div>
<div class="ui-block-b"><button type="submit" data-theme="a">Submit</button></div>
</fieldset>
</li>
</ul>
</form>
</div><!-- /content -->
<div data-role="footer">
<h4>Page Footer</h4>
</div><!-- /footer -->
</div><!-- /page -->
</body>
</html>
