Hopiu/jquery-mobile
1
0
Fork 0
mirror of https://github.com/Hopiu/jquery-mobile.git synced 2026-04-30 19:04:43 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

more updates to the listview markup, styles and scripts to allow wrapped anchors

Browse source
This commit is contained in:
scottjehl 2011-03-24 19:46:05 -04:00
parent 72fe3a2c21
commit 84b55548d3
5 changed files with 19 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
docs/lists/lists-formatting.html
View file

@ -22,7 +22,7 @@
<div data-role="content">
<ul data-role="listview">
<li data-role="list-divider">Friday, October 8, 2010 <span class="ui-li-count">2</span></a></li>
<li data-role="list-divider">Friday, October 8, 2010 <span class="ui-li-count">2</span></li>
<li><a href="index.html">
<h3>Stephen Weber</h3>
@ -39,14 +39,14 @@
<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></a></li>
<li data-role="list-divider">Thursday, October 7, 2010 <span class="ui-li-count">1</span></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>
</a></li>
<li data-role="list-divider">Wednesday, October 6, 2010 <span class="ui-li-count">3</span></a></li>
<li data-role="list-divider">Wednesday, October 6, 2010 <span class="ui-li-count">3</span></li>
<li><a href="index.html">
<h3>Amazon.com</h3>
<p><strong>4-for-3 Books for Kids</strong></p>
@ -65,7 +65,7 @@
<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>
</a></li>
<li data-role="list-divider">Tuesday, October 5, 2010 <span class="ui-li-count">3</span></a></li>
<li data-role="list-divider">Tuesday, October 5, 2010 <span class="ui-li-count">3</span></li>
<li><a href="index.html">
<h3>Angela Smith</h3>
<p><strong>Link Request</strong></p>

6
docs/lists/lists-inset.html
View file

@ -37,13 +37,13 @@
</ol>
<ul data-role="listview" data-inset="true">
<li data-role="list-divider">A</a></li>
<li data-role="list-divider">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</a></li>
<li data-role="list-divider">B</li>
<li><a href="index.html">Bob Cabot</a></li>
<li data-role="list-divider">C</a></li>
<li data-role="list-divider">C</li>
<li><a href="index.html">Caleb Booth</a></li>
<li><a href="index.html">Christopher Adams</a></li>
</ul>

12
docs/lists/lists-themes.html
View file

@ -28,7 +28,7 @@
&lt;ul data-role=&quot;listview&quot; data-inset=&quot;true&quot;&gt;
</code>
<ul data-role="listview" data-inset="true">
<li data-role="list-divider">Divider</a></li>
<li data-role="list-divider">Divider</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>
@ -42,7 +42,7 @@
</code>
<ul data-role="listview" data-inset="true" data-theme="d">
<li data-role="list-divider">Divider</a></li>
<li data-role="list-divider">Divider</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>
@ -51,7 +51,7 @@
<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</a></li>
<li data-role="list-divider">Divider</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>
@ -67,7 +67,7 @@
</code>
<ul data-role="listview" data-inset="true" data-theme="d" data-dividertheme="c">
<li data-role="list-divider">Divider</a></li>
<li data-role="list-divider">Divider</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>
@ -82,7 +82,7 @@
</code>
<ul data-role="listview" data-inset="true" data-theme="a" data-dividertheme="d" data-counttheme="e">
<li data-role="list-divider">Divider</a></li>
<li data-role="list-divider">Divider</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>
@ -99,7 +99,7 @@
</code>
</pre>
<ul data-role="listview" data-inset="true" data-icon="false">
<li data-role="list-divider">Divider</a></li>
<li data-role="list-divider">Divider</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>

2
js/jquery.mobile.listview.js
View file

@ -206,6 +206,8 @@ $.widget( "mobile.listview", $.mobile.widget, {
theme: itemTheme
});
a.first().addClass( "ui-link-inherit" );
if ( a.length > 1 ) {
itemClass += " ui-li-has-alt";

7
themes/default/jquery.mobile.listview.css
View file

@ -14,9 +14,10 @@ ol.ui-listview .ui-link-inherit:before, .ui-li-dec { font-size: .8em; display: i
ol.ui-listview .ui-li-jsnumbering:before { content: "" !important; } /* to avoid chance of duplication */
.ui-listview-inset .ui-li { border-right-width: 1px; border-left-width: 1px; }
.ui-li:last-child { border-bottom-width: 1px; }
.ui-li .ui-btn-inner { display: block; position: relative; padding: .7em 75px .7em 15px; }
.ui-li-has-thumb .ui-btn-inner { min-height: 60px; padding-left: 100px; }
.ui-li-has-icon .ui-btn-inner { min-height: 20px; padding-left: 40px; }
.ui-li .ui-btn-inner { display: block; position: relative; padding: 0; }
.ui-li .ui-btn-inner a { padding: .7em 75px .7em 15px; display: block; }
.ui-li-has-thumb .ui-btn-inner a { min-height: 60px; padding-left: 100px; }
.ui-li-has-icon .ui-btn-inner a { min-height: 20px; padding-left: 40px; }
.ui-li-heading { font-size: 16px; font-weight: bold; display: block; margin: .6em 0; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; }
.ui-li-desc { font-size: 12px; font-weight: normal; display: block; margin: -.5em 0 .6em; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; }
.ui-li-thumb, .ui-li-icon { position: absolute; left: 1px; top: 0; max-height: 80px; max-width: 80px; }