Hopiu/jquery-mobile
1
0
Fork 0
mirror of https://github.com/Hopiu/jquery-mobile.git synced 2026-03-16 22:10:25 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

added support for a JS fallback for auto-numbering in listviews made from OL elements. If supported, numbering is pure CSS, otherwise, the script will generate numbering.

Browse source 
In both the css and the js, the counters will restart whenever a list grouping header is encountered.
This commit is contained in:
scottjehl 2010-09-18 08:21:51 -04:00
parent a1d69628c8
commit b14ae8bc16
3 changed files with 60 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

43
_listview.html
View file

@ -169,6 +169,49 @@
</li>
</ul>
<h2 class="ui-bar ui-bar-b">Same as above with OL numbering:</h2>
<ol data-role="listview">
<li>This morning <span class="ui-li-count">3</span></li>
<li>
<h3><a href="index.html">Todd Parker</a></h3>
<p><strong>You've been invited to a meeting at Filament Group in Boston, MA</strong></p>
<p>Hey Scott, 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>AM</p>
</li>
<li>
<h3><a href="index.html">Todd Parker</a></h3>
<p><strong>You've been invited to a meeting at Filament Group in Boston, MA</strong></p>
<p>Hey Scott, 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>AM</p>
</li>
<li>
<h3><a href="index.html">Todd Parker</a></h3>
<p><strong>You've been invited to a meeting at Filament Group in Boston, MA</strong></p>
<p>Hey Scott, 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>AM</p>
</li>
<li>This afternoon <span class="ui-li-count">1</span></li>
<li>
<h3><a href="index.html">Todd Parker</a></h3>
<p><strong>Meeting reminder</strong></p>
<p>Hey Scott, if you're available at 10am tomorrow, we've got a meeting with the jQuery team.</p>
<p class="ui-li-aside"><strong>1:15</strong>PM</p>
</li>
<li>
<h3><a href="index.html">Todd Parker</a></h3>
<p><strong>Meeting reminder</strong></p>
<p>Hey Scott, if you're available at 10am tomorrow, we've got a meeting with the jQuery team.</p>
<p class="ui-li-aside"><strong>1:15</strong>PM</p>
</li>
<li>This evening <span class="ui-li-count">1</span></li>
<li>
<h3><a href="index.html">Todd Parker</a></h3>
<p><strong>Just checking</strong></p>
<p>Hey Scott, if you're available at 10am tomorrow, we've got a meeting with the jQuery team.</p>
<p class="ui-li-aside"><strong>7:46</strong>PM</p>
</li>
</ol>
<h2 class="ui-bar ui-bar-b">Basic Listview w/ thumbnails:</h2>

3
css/structure.css
View file

@ -184,7 +184,8 @@ div.ui-checkbox, div.ui-radio { position:relative; margin: .2em 0 .5em; }
.ui-listview, .ui-li { list-style:none; padding:0; zoom: 1; }
.ui-li { display: block; margin:0; position: relative; overflow: hidden; text-align: left; border-width: 0; border-top-width: 1px; }
.ui-li-grouping { padding: .5em 15px; font-size: 13px; font-weight: bold; counter-reset: listnumbering; }
ol.ui-listview .ui-link-inherit:before { font-size: .8em; display: inline-block; padding-right: .3em; font-weight: normal;counter-increment: listnumbering; content: counter(listnumbering) ". "; }
ol.ui-listview .ui-link-inherit:before, .ui-li-dec { font-size: .8em; display: inline-block; padding-right: .3em; font-weight: normal;counter-increment: listnumbering; content: counter(listnumbering) ". "; }
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: .5em 65px .5em 15px; }

21
js/jQuery.listview.js
View file

@ -158,13 +158,22 @@ $.fn.listview = function( options ) {
.find( "p,ul,dl" )
.addClass( "ui-li-desc" );
/* auto-numbering for OL elements - we could add a $.support.cssBefore test
// to see if this JS generated numbering is necessary...
if($this.is('ol')){
$this.find('li').each(function( i ){
$(this).find('.ui-link-inherit:first').prepend('<span class="ui-li-dec"></span>');
// JS fallback for auto-numbering for OL elements
if( !$.support.cssPseudoElement && $this.is('ol') ){
var counter = 1;
$this.find('li').each(function(){
if( $(this).is('.ui-li-grouping') ){
//reset counter when a grouping heading is encountered
counter = 1;
}
else {
$(this)
.find('.ui-link-inherit:first')
.addClass('ui-li-jsnumbering')
.prepend('<span class="ui-li-dec">' + counter++ + '. </span>');
}
});
} */
}
//tapping the whole LI triggers ajaxClick on the first link
$this.find( "li:has(a)" ).live( "tap", function() {