mirror of
https://github.com/Hopiu/jquery-mobile.git
synced 2026-05-05 21:24:45 +00:00
initial markup changes
This commit is contained in:
scottjehl
parent
5fa733b0eb
commit
f85956251d
9 changed files with 212 additions and 205 deletions
|
|
@ -21,11 +21,11 @@
|
|||
|
||||
<div data-role="content">
|
||||
<ul data-role="listview">
|
||||
<li><a href="index.html">Inbox</a> <span class="ui-li-count">12</span></li>
|
||||
<li><a href="index.html">Outbox</a> <span class="ui-li-count">0</span></li>
|
||||
<li><a href="index.html">Drafts</a> <span class="ui-li-count">4</span></li>
|
||||
<li><a href="index.html">Sent</a> <span class="ui-li-count">328</span></li>
|
||||
<li><a href="index.html">Trash</a> <span class="ui-li-count">62</span></li>
|
||||
<li><a href="index.html">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">Drafts <span class="ui-li-count">4</span></a></li>
|
||||
<li><a href="index.html">Sent <span class="ui-li-count">328</span></a></li>
|
||||
<li><a href="index.html">Trash <span class="ui-li-count">62</span></a></li>
|
||||
</ul>
|
||||
</div><!-- /content -->
|
||||
</div><!-- /page -->
|
||||
|
|
|
|||
|
|
@ -16,64 +16,68 @@
|
|||
|
||||
<div data-role="header" data-theme="b">
|
||||
<h1>List formatting</h1>
|
||||
<a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse" class="ui-btn-right jqm-home">Home</a>
|
||||
<a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse" class="ui-btn-right jqm-home">Home
|
||||
</div><!-- /header -->
|
||||
|
||||
<div data-role="content">
|
||||
|
||||
<ul data-role="listview">
|
||||
<li data-role="list-divider">Friday, October 8, 2010 <span class="ui-li-count">2</span></li>
|
||||
<li>
|
||||
<h3><a href="index.html">Stephen Weber</a></h3>
|
||||
<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>
|
||||
</li>
|
||||
<li>
|
||||
<h3><a href="index.html">jQuery Team</a></h3>
|
||||
<li data-role="list-divider">Friday, October 8, 2010 <span class="ui-li-count">2</span></a></li>
|
||||
<li><a href="index.html">
|
||||
|
||||
<h3>Stephen Weber</h3>
|
||||
<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">
|
||||
|
||||
<h3>jQuery Team</h3>
|
||||
<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>
|
||||
</li>
|
||||
<li data-role="list-divider">Thursday, October 7, 2010 <span class="ui-li-count">1</span></li>
|
||||
<li>
|
||||
<h3><a href="index.html">Avery Walker</a></h3>
|
||||
|
||||
</a></li>
|
||||
<li data-role="list-divider">Thursday, October 7, 2010 <span class="ui-li-count">1</span></a></li>
|
||||
<li><a href="index.html">
|
||||
<h3>Avery Walker</h3>
|
||||
<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>
|
||||
</li>
|
||||
<li data-role="list-divider">Wednesday, October 6, 2010 <span class="ui-li-count">3</span></li>
|
||||
<li>
|
||||
<h3><a href="index.html">Amazon.com</a></h3>
|
||||
</a></li>
|
||||
<li data-role="list-divider">Wednesday, October 6, 2010 <span class="ui-li-count">3</span></a></li>
|
||||
<li><a href="index.html">
|
||||
<h3>Amazon.com</h3>
|
||||
<p><strong>4-for-3 Books for Kids</strong></p>
|
||||
<p>As someone who has purchased children's books from our 4-for-3 Store, you may be interested in these featured books.</p>
|
||||
<p class="ui-li-aside"><strong>12:47</strong>PM</p>
|
||||
</li>
|
||||
<li>
|
||||
<h3><a href="index.html">Mike Taylor</a></h3>
|
||||
</a></li>
|
||||
<li><a href="index.html">
|
||||
<h3>Mike Taylor</h3>
|
||||
<p><strong>Re: This weekend in Maine</strong></p>
|
||||
<p>Hey little buddy, sorry but I can't make it up to vacationland this weekend. Maybe next weekend?</p>
|
||||
<p class="ui-li-aside"><strong>6:24</strong>AM</p>
|
||||
</li>
|
||||
<li>
|
||||
<h3><a href="index.html">Redfin</a></h3>
|
||||
</a></li>
|
||||
<li><a href="index.html">
|
||||
<h3>Redfin</h3>
|
||||
<p><strong>Redfin listing updates for today</strong></p>
|
||||
<p>There are 3 updates for the home on your watchlist: 1 updated MLS listing and 2 homes under contract.</p>
|
||||
<p class="ui-li-aside"><strong>5:52</strong>AM</p>
|
||||
</li>
|
||||
<li data-role="list-divider">Tuesday, October 5, 2010 <span class="ui-li-count">3</span></li>
|
||||
<li>
|
||||
<h3><a href="index.html">Angela Smith</a></h3>
|
||||
</a></li>
|
||||
<li data-role="list-divider">Tuesday, October 5, 2010 <span class="ui-li-count">3</span></a></li>
|
||||
<li><a href="index.html">
|
||||
<h3>Angela Smith</h3>
|
||||
<p><strong>Link Request</strong></p>
|
||||
<p>My name is Angela Smith, SEO Consultant. I've greatly enjoyed looking through your site and I was wondering if you'd be interested in providing a link</p>
|
||||
<p class="ui-li-aside"><strong>6:24</strong>AM</p>
|
||||
</li>
|
||||
<li>
|
||||
<h3><a href="index.html">Mike Taylor</a></h3>
|
||||
</a></li>
|
||||
<li><a href="index.html">
|
||||
<h3>Mike Taylor</h3>
|
||||
<p><strong>This weekend in Maine</strong></p>
|
||||
<p>Sounds good, let me check into our plans.</p>
|
||||
<p class="ui-li-aside"><strong>6:24</strong>AM</p>
|
||||
</li>
|
||||
</a></li>
|
||||
</ul>
|
||||
</div><!-- /content -->
|
||||
</div><!-- /page -->
|
||||
|
|
|
|||
|
|
@ -16,21 +16,21 @@
|
|||
|
||||
<div data-role="header" data-theme="b">
|
||||
<h1>Icons</h1>
|
||||
<a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse" class="ui-btn-right jqm-home">Home</a>
|
||||
<a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse" class="ui-btn-right jqm-home">Home
|
||||
</div><!-- /header -->
|
||||
|
||||
<div data-role="content">
|
||||
|
||||
<ul data-role="listview">
|
||||
<li><img src="images/gf.png" alt="France" class="ui-li-icon"><a href="index.html">France</a> <span class="ui-li-count">4</span></li>
|
||||
<li><img src="images/de.png" alt="Germany" class="ui-li-icon"><a href="index.html">Germany</a> <span class="ui-li-count">4</span></li>
|
||||
<li><img src="images/gb.png" alt="Great Britain" class="ui-li-icon"><a href="index.html">Great Britain</a> <span class="ui-li-count">0</span></li>
|
||||
<li><img src="images/fi.png" alt="Finland" class="ui-li-icon"><a href="index.html">Finland</a> <span class="ui-li-count">12</span></li>
|
||||
<li><a href="index.html"><img src="images/gf.png" alt="France" class="ui-li-icon">France <span class="ui-li-count">4</span></a></li>
|
||||
<li><a href="index.html"><img src="images/de.png" alt="Germany" class="ui-li-icon">Germany <span class="ui-li-count">4</span></a></li>
|
||||
<li><a href="index.html"><img src="images/gb.png" alt="Great Britain" class="ui-li-icon">Great Britain <span class="ui-li-count">0</span></a></li>
|
||||
<li><a href="index.html"><img src="images/fi.png" alt="Finland" class="ui-li-icon">Finland <span class="ui-li-count">12</span></a></li>
|
||||
|
||||
|
||||
|
||||
<li><img src="images/sj.png" alt="Norway" class="ui-li-icon"><a href="index.html">Norway</a> <span class="ui-li-count">328</span></li>
|
||||
<li><img src="images/us.png" alt="United States" class="ui-li-icon"><a href="index.html">United States</a> <span class="ui-li-count">62</span></li>
|
||||
<li><a href="index.html"><img src="images/sj.png" alt="Norway" class="ui-li-icon">Norway <span class="ui-li-count">328</span></a></li>
|
||||
<li><a href="index.html"><img src="images/us.png" alt="United States" class="ui-li-icon">United States <span class="ui-li-count">62</span></a></li>
|
||||
</ul>
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -16,16 +16,16 @@
|
|||
|
||||
<div data-role="header" data-theme="b">
|
||||
<h1>Inset list</h1>
|
||||
<a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse" class="ui-btn-right jqm-home">Home</a>
|
||||
<a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse" class="ui-btn-right jqm-home">Home
|
||||
</div><!-- /header -->
|
||||
|
||||
<div data-role="content">
|
||||
<ul data-role="listview" data-inset="true">
|
||||
<li><a href="index.html">Inbox</a> <span class="ui-li-count">12</span></li>
|
||||
<li><a href="index.html">Outbox</a> <span class="ui-li-count">0</span></li>
|
||||
<li><a href="index.html">Drafts</a> <span class="ui-li-count">4</span></li>
|
||||
<li><a href="index.html">Sent</a> <span class="ui-li-count">328</span></li>
|
||||
<li><a href="index.html">Trash</a> <span class="ui-li-count">62</span></li>
|
||||
<li><a href="index.html">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">Drafts <span class="ui-li-count">4</span></a></li>
|
||||
<li><a href="index.html">Sent <span class="ui-li-count">328</span></a></li>
|
||||
<li><a href="index.html">Trash <span class="ui-li-count">62</span></a></li>
|
||||
</ul>
|
||||
|
||||
<ol data-role="listview" data-inset="true">
|
||||
|
|
@ -37,13 +37,13 @@
|
|||
</ol>
|
||||
|
||||
<ul data-role="listview" data-inset="true">
|
||||
<li data-role="list-divider">A</li>
|
||||
<li data-role="list-divider">A</a></li>
|
||||
<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 data-role="list-divider">B</li>
|
||||
<li data-role="list-divider">B</a></li>
|
||||
<li><a href="index.html">Bob Cabot</a></li>
|
||||
<li data-role="list-divider">C</li>
|
||||
<li data-role="list-divider">C</a></li>
|
||||
<li><a href="index.html">Caleb Booth</a></li>
|
||||
<li><a href="index.html">Christopher Adams</a></li>
|
||||
</ul>
|
||||
|
|
@ -51,28 +51,28 @@
|
|||
<ul data-role="listview" data-inset="true">
|
||||
<li>
|
||||
<img src="images/album-bb.jpg" />
|
||||
<h3><a href="index.html">Broken Bells</a></h3>
|
||||
<h3><a href="index.html">Broken Bells</h3>
|
||||
<p>Broken Bells</p>
|
||||
<a href="index.html">Purchase album</a>
|
||||
</li>
|
||||
<a href="index.html">Purchase album
|
||||
</a></li>
|
||||
<li>
|
||||
<img src="images/album-hc.jpg" />
|
||||
<h3><a href="index.html">Warning</a></h3>
|
||||
<h3><a href="index.html">Warning</h3>
|
||||
<p>Hot Chip</p>
|
||||
<a href="index.html">Purchase album</a>
|
||||
</li>
|
||||
<a href="index.html">Purchase album
|
||||
</a></li>
|
||||
<li>
|
||||
<img src="images/album-p.jpg" />
|
||||
<h3><a href="index.html">Wolfgang Amadeus Phoenix</a></h3>
|
||||
<h3><a href="index.html">Wolfgang Amadeus Phoenix</h3>
|
||||
<p>Phoenix</p>
|
||||
<a href="index.html">Purchase album</a>
|
||||
</li>
|
||||
<a href="index.html">Purchase album
|
||||
</a></li>
|
||||
<li>
|
||||
<img src="images/album-ok.jpg" />
|
||||
<h3><a href="index.html">Of The Blue Colour Of The Sky</a></h3>
|
||||
<h3><a href="index.html">Of The Blue Colour Of The Sky</h3>
|
||||
<p>Ok Go</p>
|
||||
<a href="index.html">Purchase album</a>
|
||||
</li>
|
||||
<a href="index.html">Purchase album
|
||||
</a></li>
|
||||
</ul>
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -20,9 +20,11 @@
|
|||
</div><!-- /header -->
|
||||
|
||||
<div data-role="content">
|
||||
<a href="index.html" data-role="button" data-rel="back" data-theme="b">
|
||||
<h4>This album costs $10.99 and includes 9 tracks.</h4>
|
||||
<p>Your download will begin immediately on your mobile device and all tracks will by added your your library next time you sync.</p>
|
||||
<a href="index.html" data-role="button" data-rel="back" data-theme="b">Purchase album</a>
|
||||
Purchase album
|
||||
</a>
|
||||
<a href="index.html" data-role="button" data-rel="back">No thanks</a>
|
||||
</div><!-- /content -->
|
||||
</div><!-- /page -->
|
||||
|
|
|
|||
|
|
@ -16,79 +16,81 @@
|
|||
|
||||
<div data-role="header" data-theme="b">
|
||||
<h1>List formatting</h1>
|
||||
<a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse" class="ui-btn-right jqm-home">Home</a>
|
||||
<a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse" class="ui-btn-right jqm-home">Home
|
||||
</div><!-- /header -->
|
||||
|
||||
<div data-role="content">
|
||||
|
||||
<ul data-role="listview" data-split-icon="gear" data-split-theme="d">
|
||||
<li>
|
||||
<li><a href="index.html">
|
||||
<img src="images/album-bb.jpg" />
|
||||
<h3><a href="index.html">Broken Bells</a></h3>
|
||||
<h3>Broken Bells</h3>
|
||||
<p>Broken Bells</p>
|
||||
<a href="lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album</a>
|
||||
</li>
|
||||
<li>
|
||||
</a><a href="lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album
|
||||
</a></li>
|
||||
<li><a href="index.html">
|
||||
|
||||
<img src="images/album-hc.jpg" />
|
||||
<h3><a href="index.html">Warning</a></h3>
|
||||
<h3>Warning</h3>
|
||||
<p>Hot Chip</p>
|
||||
<a href="lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album</a>
|
||||
</li>
|
||||
<li>
|
||||
|
||||
</a><a href="lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album
|
||||
</a></li>
|
||||
<li><a href="index.html">
|
||||
<img src="images/album-p.jpg" />
|
||||
<h3><a href="index.html">Wolfgang Amadeus Phoenix</a></h3>
|
||||
<h3>Wolfgang Amadeus Phoenix</h3>
|
||||
<p>Phoenix</p>
|
||||
<a href="lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album</a>
|
||||
</li>
|
||||
<li>
|
||||
</a><a href="lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album
|
||||
</a></li>
|
||||
<li><a href="index.html">
|
||||
<img src="images/album-ok.jpg" />
|
||||
<h3><a href="index.html">Of The Blue Colour Of The Sky</a></h3>
|
||||
<h3>Of The Blue Colour Of The Sky</h3>
|
||||
<p>Ok Go</p>
|
||||
<a href="lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album</a>
|
||||
</li>
|
||||
<li>
|
||||
</a><a href="lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album
|
||||
</a></li>
|
||||
<li><a href="index.html">
|
||||
<img src="images/album-ws.jpg" />
|
||||
<h3><a href="index.html">Elephant</a></h3>
|
||||
<h3>Elephant</h3>
|
||||
<p>The White Stripes</p>
|
||||
<a href="lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album</a>
|
||||
</li>
|
||||
<li>
|
||||
</a><a href="lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album
|
||||
</a></li>
|
||||
<li><a href="index.html">
|
||||
<img src="images/album-rh.jpg" />
|
||||
<h3><a href="index.html">Kid A</a></h3>
|
||||
<h3>Kid A</h3>
|
||||
<p>Radiohead</p>
|
||||
<a href="lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album</a>
|
||||
</li>
|
||||
<li>
|
||||
</a><a href="lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album
|
||||
</a></li>
|
||||
<li><a href="index.html">
|
||||
<img src="images/album-xx.jpg" />
|
||||
<h3><a href="index.html">XX</a></h3>
|
||||
<h3>XX</h3>
|
||||
<p>XX</p>
|
||||
<a href="lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album</a>
|
||||
</li>
|
||||
<li>
|
||||
</a><a href="lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album
|
||||
</a></li>
|
||||
<li><a href="index.html">
|
||||
<img src="images/album-mg.jpg" />
|
||||
<h3><a href="index.html">Congratulations</a></h3>
|
||||
<h3>Congratulations</h3>
|
||||
<p>MGMT</p>
|
||||
<a href="lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album</a>
|
||||
</li>
|
||||
<li>
|
||||
</a><a href="lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album
|
||||
</a></li>
|
||||
<li><a href="index.html">
|
||||
<img src="images/album-ag.jpg" />
|
||||
<h3><a href="index.html">Ashes Grammar</a></h3>
|
||||
<h3>Ashes Grammar</h3>
|
||||
<p>A Sunny Day in Glasgow</p>
|
||||
<a href="lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album</a>
|
||||
</li>
|
||||
</a><a href="lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album
|
||||
</a></li>
|
||||
|
||||
<li>
|
||||
<li><a href="index.html">
|
||||
<img src="images/album-k.jpg" />
|
||||
<h3><a href="index.html">Hot Fuss</a></h3>
|
||||
<h3>Hot Fuss</h3>
|
||||
<p>Killers</p>
|
||||
<a href="lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album</a>
|
||||
</li>
|
||||
<li>
|
||||
</a><a href="lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album
|
||||
</a></li>
|
||||
<li><a href="index.html">
|
||||
<img src="images/album-af.jpg" />
|
||||
<h3><a href="index.html">The Suburbs</a></h3>
|
||||
<h3>The Suburbs</h3>
|
||||
<p>Arcade Fire</p>
|
||||
<a href="lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album</a>
|
||||
</li>
|
||||
</a><a href="lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album
|
||||
</a></li>
|
||||
</ul>
|
||||
</div><!-- /content -->
|
||||
</div><!-- /page -->
|
||||
|
|
|
|||
|
|
@ -28,10 +28,10 @@
|
|||
<ul data-role="listview" data-inset="true">
|
||||
</code>
|
||||
<ul data-role="listview" data-inset="true">
|
||||
<li data-role="list-divider">Divider</li>
|
||||
<li><a href="index.html">Inbox</a> <span class="ui-li-count">12</span></li>
|
||||
<li><a href="index.html">Outbox</a> <span class="ui-li-count">0</span></li>
|
||||
<li><a href="index.html">Sent</a> <span class="ui-li-count">328</span></li>
|
||||
<li data-role="list-divider">Divider</a></li>
|
||||
<li><a href="index.html">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>
|
||||
|
||||
<h2>Theming list items</h2>
|
||||
|
|
@ -42,20 +42,20 @@
|
|||
</code>
|
||||
|
||||
<ul data-role="listview" data-inset="true" data-theme="d">
|
||||
<li data-role="list-divider">Divider</li>
|
||||
<li><a href="index.html">Inbox</a> <span class="ui-li-count">12</span></li>
|
||||
<li><a href="index.html">Outbox</a> <span class="ui-li-count">0</span></li>
|
||||
<li><a href="index.html">Sent</a> <span class="ui-li-count">328</span></li>
|
||||
<li data-role="list-divider">Divider</a></li>
|
||||
<li><a href="index.html">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>Data-theme attributes also work at the LI-level, for styling a single item.</p>
|
||||
|
||||
<ul data-role="listview" data-inset="true" data-theme="d">
|
||||
<li data-role="list-divider">Divider</li>
|
||||
<li><a href="index.html">Inbox</a> <span class="ui-li-count">12</span></li>
|
||||
<li><a href="index.html">Outbox</a> <span class="ui-li-count">0</span></li>
|
||||
<li><a href="index.html">Sent</a> <span class="ui-li-count">328</span></li>
|
||||
<li data-theme="a"><a href="index.html">Trash</a> <span class="ui-li-count">34</span></li>
|
||||
<li data-role="list-divider">Divider</a></li>
|
||||
<li><a href="index.html">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>
|
||||
<li data-theme="a">Trash <span class="ui-li-count">34</span></a></li>
|
||||
</ul>
|
||||
|
||||
<h2>Theming dividers</h2>
|
||||
|
|
@ -67,10 +67,10 @@
|
|||
</code>
|
||||
|
||||
<ul data-role="listview" data-inset="true" data-theme="d" data-dividertheme="c">
|
||||
<li data-role="list-divider">Divider</li>
|
||||
<li><a href="index.html">Inbox</a> <span class="ui-li-count">12</span></li>
|
||||
<li><a href="index.html">Outbox</a> <span class="ui-li-count">0</span></li>
|
||||
<li><a href="index.html">Sent</a> <span class="ui-li-count">328</span></li>
|
||||
<li data-role="list-divider">Divider</a></li>
|
||||
<li><a href="index.html">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>
|
||||
|
||||
<h2>Theming count bubbles</h2>
|
||||
|
|
@ -82,10 +82,10 @@
|
|||
</code>
|
||||
|
||||
<ul data-role="listview" data-inset="true" data-theme="a" data-dividertheme="d" data-counttheme="e">
|
||||
<li data-role="list-divider">Divider</li>
|
||||
<li><a href="index.html">Inbox</a> <span class="ui-li-count">12</span></li>
|
||||
<li><a href="index.html">Outbox</a> <span class="ui-li-count">0</span></li>
|
||||
<li><a href="index.html">Sent</a> <span class="ui-li-count">328</span></li>
|
||||
<li data-role="list-divider">Divider</a></li>
|
||||
<li><a href="index.html">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>
|
||||
|
||||
<h2>Theming icons</h2>
|
||||
|
|
@ -99,10 +99,10 @@
|
|||
</code>
|
||||
</pre>
|
||||
<ul data-role="listview" data-inset="true" data-icon="false">
|
||||
<li data-role="list-divider">Divider</li>
|
||||
<li data-icon="info"><a href="index.html">Notices</a></li>
|
||||
<li data-icon="alert"><a href="index.html">Alerts</a></li>
|
||||
<li data-icon="false"><a href="index.html">All Notifications</a></li>
|
||||
<li data-role="list-divider">Divider</a></li>
|
||||
<li data-icon="info">Notices</a></a></li>
|
||||
<li data-icon="alert">Alerts</a></a></li>
|
||||
<li data-icon="false">All Notifications</a></a></li>
|
||||
</ul>
|
||||
|
||||
<h2>Theming split buttons</h2>
|
||||
|
|
@ -110,16 +110,16 @@
|
|||
<p>For split lists which a second button, the framework default to "b" for the theme swatch (blue in the default theme) Here is a default split list:</p>
|
||||
|
||||
<ul data-role="listview" data-inset="true">
|
||||
<li>
|
||||
<li><a href="index.html">
|
||||
<img src="images/album-bb.jpg" />
|
||||
<h3><a href="index.html">Broken Bells</a></h3>
|
||||
<p>Broken Bells</p>
|
||||
<h3>Broken Bells</h3>
|
||||
<p>Broken Bells</p></a>
|
||||
<a href="index.html">Purchase album</a>
|
||||
</li>
|
||||
<li>
|
||||
<li><a href="index.html">
|
||||
<img src="images/album-hc.jpg" />
|
||||
<h3><a href="index.html">Warning</a></h3>
|
||||
<p>Hot Chip</p>
|
||||
<h3>Warning</h3>
|
||||
<p>Hot Chip</p></a>
|
||||
<a href="index.html">Purchase album</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
|
@ -129,16 +129,17 @@
|
|||
</code>
|
||||
<p>To specify the color swatch for the icon button on the right, add the <code>data-splittheme</code> to the list and specify a swatch letter. This attribute can also be added to individual split inside list items by adding a <code>data-theme</code> attribute to specific links (see second list item).</p>
|
||||
<ul data-role="listview" data-inset="true" data-splittheme="a">
|
||||
<li>
|
||||
<li><a href="index.html">
|
||||
<img src="images/album-bb.jpg" />
|
||||
<h3><a href="index.html">Broken Bells</a></h3>
|
||||
<p>Broken Bells</p>
|
||||
<h3>Broken Bells</h3>
|
||||
<p>Broken Bells</p></a>
|
||||
<a href="index.html">Purchase album</a>
|
||||
</li>
|
||||
<li>
|
||||
<li><a href="index.html">
|
||||
<img src="images/album-hc.jpg" />
|
||||
<h3><a href="index.html">Warning</a></h3>
|
||||
<h3>Warning</h3>
|
||||
<p>Hot Chip</p>
|
||||
</a>
|
||||
<a href="index.html" data-theme="e">Purchase album</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
|
@ -150,16 +151,16 @@
|
|||
</code>
|
||||
|
||||
<ul data-role="listview" data-inset="true" data-splittheme="a" data-spliticon="plus">
|
||||
<li>
|
||||
<li><a href="index.html">
|
||||
<img src="images/album-bb.jpg" />
|
||||
<h3><a href="index.html">Broken Bells</a></h3>
|
||||
<p>Broken Bells</p>
|
||||
<a href="index.html">Purchase album</a>
|
||||
<h3>Broken Bells</h3>
|
||||
<p>Broken Bells</p></a>
|
||||
Purchase album</a>
|
||||
</li>
|
||||
<li>
|
||||
<li><a href="index.html">
|
||||
<img src="images/album-hc.jpg" />
|
||||
<h3><a href="index.html">Warning</a></h3>
|
||||
<p>Hot Chip</p>
|
||||
<h3>Warning</h3>
|
||||
<p>Hot Chip</p></a>
|
||||
<a href="index.html" data-theme="e" data-icon="delete">Purchase album</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
|
@ -170,37 +171,37 @@
|
|||
|
||||
<p><strong>A</strong> swatch</p>
|
||||
<ul data-role="listview" data-inset="true" data-theme="a">
|
||||
<li><a href="index.html">Inbox</a> <span class="ui-li-count">12</span></li>
|
||||
<li><a href="index.html">Outbox</a> <span class="ui-li-count">0</span></li>
|
||||
<li><a href="index.html">Trash</a> <span class="ui-li-count">62</span></li>
|
||||
<li><a href="index.html">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">Trash <span class="ui-li-count">62</span></a></li>
|
||||
</ul>
|
||||
|
||||
<p><strong>B</strong> swatch</p>
|
||||
<ul data-role="listview" data-inset="true" data-theme="b">
|
||||
<li><a href="index.html">Inbox</a> <span class="ui-li-count">12</span></li>
|
||||
<li><a href="index.html">Outbox</a> <span class="ui-li-count">0</span></li>
|
||||
<li><a href="index.html">Trash</a> <span class="ui-li-count">62</span></li>
|
||||
<li><a href="index.html">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">Trash <span class="ui-li-count">62</span></a></li>
|
||||
</ul>
|
||||
|
||||
<p><strong>C</strong> swatch</p>
|
||||
<ul data-role="listview" data-inset="true" data-theme="c">
|
||||
<li><a href="index.html">Inbox</a> <span class="ui-li-count">12</span></li>
|
||||
<li><a href="index.html">Outbox</a> <span class="ui-li-count">0</span></li>
|
||||
<li><a href="index.html">Trash</a> <span class="ui-li-count">62</span></li>
|
||||
<li><a href="index.html">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">Trash <span class="ui-li-count">62</span></a></li>
|
||||
</ul>
|
||||
|
||||
<p><strong>D</strong> swatch</p>
|
||||
<ul data-role="listview" data-inset="true" data-theme="d">
|
||||
<li><a href="index.html">Inbox</a> <span class="ui-li-count">12</span></li>
|
||||
<li><a href="index.html">Outbox</a> <span class="ui-li-count">0</span></li>
|
||||
<li><a href="index.html">Trash</a> <span class="ui-li-count">62</span></li>
|
||||
<li><a href="index.html">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">Trash <span class="ui-li-count">62</span></a></li>
|
||||
</ul>
|
||||
|
||||
<p><strong>E</strong> swatch</p>
|
||||
<ul data-role="listview" data-inset="true" data-theme="e">
|
||||
<li><a href="index.html">Inbox</a> <span class="ui-li-count">12</span></li>
|
||||
<li><a href="index.html">Outbox</a> <span class="ui-li-count">0</span></li>
|
||||
<li><a href="index.html">Trash</a> <span class="ui-li-count">62</span></li>
|
||||
<li><a href="index.html">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">Trash <span class="ui-li-count">62</span></a></li>
|
||||
</ul>
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -16,69 +16,69 @@
|
|||
|
||||
<div data-role="header" data-theme="b">
|
||||
<h1>Thumbnails</h1>
|
||||
<a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse" class="ui-btn-right jqm-home">Home</a>
|
||||
<a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse" class="ui-btn-right jqm-home">Home
|
||||
</div><!-- /header -->
|
||||
|
||||
<div data-role="content">
|
||||
|
||||
<ul data-role="listview">
|
||||
<li>
|
||||
<li><a href="index.html">
|
||||
<img src="images/album-bb.jpg" />
|
||||
<h3><a href="index.html">Broken Bells</a></h3>
|
||||
<h3>Broken Bells</h3>
|
||||
<p>Broken Bells</p>
|
||||
</li>
|
||||
<li>
|
||||
</a></li>
|
||||
<li><a href="index.html">
|
||||
<img src="images/album-hc.jpg" />
|
||||
<h3><a href="index.html">Warning</a></h3>
|
||||
<h3>Warning</h3>
|
||||
<p>Hot Chip</p>
|
||||
</li>
|
||||
<li>
|
||||
</a></li>
|
||||
<li><a href="index.html">
|
||||
<img src="images/album-p.jpg" />
|
||||
<h3><a href="index.html">Wolfgang Amadeus Phoenix</a></h3>
|
||||
<h3>Wolfgang Amadeus Phoenix</h3>
|
||||
<p>Phoenix</p>
|
||||
</li>
|
||||
<li>
|
||||
</a></li>
|
||||
<li><a href="index.html">
|
||||
<img src="images/album-ok.jpg" />
|
||||
<h3><a href="index.html">Of The Blue Colour Of The Sky</a></h3>
|
||||
<h3>Of The Blue Colour Of The Sky</h3>
|
||||
<p>Ok Go</p>
|
||||
</li>
|
||||
<li>
|
||||
</a></li>
|
||||
<li><a href="index.html">
|
||||
<img src="images/album-ws.jpg" />
|
||||
<h3><a href="index.html">Elephant</a></h3>
|
||||
<h3>Elephant</h3>
|
||||
<p>The White Stripes</p>
|
||||
</li>
|
||||
<li>
|
||||
</a></li>
|
||||
<li><a href="index.html">
|
||||
<img src="images/album-rh.jpg" />
|
||||
<h3><a href="index.html">Kid A</a></h3>
|
||||
<h3>Kid A</h3>
|
||||
<p>Radiohead</p>
|
||||
</li>
|
||||
<li>
|
||||
</a></li>
|
||||
<li><a href="index.html">
|
||||
<img src="images/album-xx.jpg" />
|
||||
<h3><a href="index.html">XX</a></h3>
|
||||
<h3>XX</h3>
|
||||
<p>XX</p>
|
||||
</li>
|
||||
<li>
|
||||
</a></li>
|
||||
<li><a href="index.html">
|
||||
<img src="images/album-mg.jpg" />
|
||||
<h3><a href="index.html">Congratulations</a></h3>
|
||||
<h3>Congratulations</h3>
|
||||
<p>MGMT</p>
|
||||
</li>
|
||||
</a></li>
|
||||
|
||||
<li>
|
||||
<li><a href="index.html">
|
||||
<img src="images/album-ag.jpg" />
|
||||
<h3><a href="index.html">Ashes Grammar</a></h3>
|
||||
<h3>Ashes Grammar</h3>
|
||||
<p>A Sunny Day in Glasgow</p>
|
||||
</li>
|
||||
</a></li>
|
||||
|
||||
<li>
|
||||
<li><a href="index.html">
|
||||
<img src="images/album-k.jpg" />
|
||||
<h3><a href="index.html">Hot Fuss</a></h3>
|
||||
<h3>Hot Fuss</h3>
|
||||
<p>Killers</p>
|
||||
</li>
|
||||
<li>
|
||||
</a></li>
|
||||
<li><a href="index.html">
|
||||
<img src="images/album-af.jpg" />
|
||||
<h3><a href="index.html">The Suburbs</a></h3>
|
||||
<h3>The Suburbs</h3>
|
||||
<p>Arcade Fire</p>
|
||||
</li>
|
||||
</a></li>
|
||||
</ul>
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -206,8 +206,6 @@ $.widget( "mobile.listview", $.mobile.widget, {
|
|||
theme: itemTheme
|
||||
});
|
||||
|
||||
a.first().addClass( "ui-link-inherit" );
|
||||
|
||||
if ( a.length > 1 ) {
|
||||
itemClass += " ui-li-has-alt";
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue