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

added support for auto-numbering in listviews made from OL elements.

Browse source 
Note: currently uses CSS :before gen content, so we'll need to test support for that. listview.js includes a JS fallback, currently commented out.
This commit is contained in:
scottjehl 2010-09-18 07:42:10 -04:00
parent 87e8fcf9b5
commit bd1a5159d2
3 changed files with 20 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
_listview.html
View file

@ -27,6 +27,14 @@
<li><a href="index.html">Page C</a></li>
</ul>
<h2 class="ui-bar ui-bar-b">Basic Listview from OL element:</h2>
<ol data-role="listview">
<li><a href="index.html">Page A</a></li>
<li><a href="index.html">Page B</a></li>
<li><a href="index.html">Page C</a></li>
</ol>
<h2 class="ui-bar ui-bar-b">Basic inset Listview:</h2>
<ul data-role="listview" data-inset="true">
@ -187,7 +195,7 @@
<h2 class="ui-bar ui-bar-b">Basic Listview w/ split buttons:</h2>
<h2 class="ui-bar ui-bar-b">Basic OL Listview w/ split buttons:</h2>
<ol data-role="listview" data-inset="true">
<li>

5
css/structure.css
View file

@ -179,11 +179,12 @@ div.ui-checkbox, div.ui-radio { position:relative; margin: .2em 0 .5em; }
}
/* listview */
.ui-listview { margin: 0; }
.ui-listview { margin: 0; counter-reset: listnumbering; }
.ui-listview-inset { margin: 1em 15px; }
.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; }
.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) ". "; }
.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; }

10
js/jQuery.listview.js
View file

@ -157,9 +157,15 @@ $.fn.listview = function( options ) {
.end()
.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>');
});
} */
//tapping the whole LI triggers ajaxClick on the first link
$this.find( "li:has(a)" ).live( "tap", function() {
$( this ).find( "a:first" ).ajaxClick();