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

updated to allow the count spans to adopt the parent theme unless overridden with a data-count-theme attr

Browse source
This commit is contained in:
scottjehl 2010-09-15 18:07:56 -04:00
parent 2028064230
commit 28f19ba8b3
3 changed files with 10 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
_listview.html
View file

@ -174,7 +174,7 @@
<h2 class="ui-bar ui-bar-b">Same as above, different theme</h2>
<ol data-role="listview" data-theme="e" data-split-theme="c" data-count-theme="c">
<ol data-role="listview" data-theme="e" data-split-theme="c" data-count-theme="b">
<li>
<img src="images/jb.jpg" alt="jb" />
<h3><a href="index.html">Page A</a></h3>

2
css/structure.css
View file

@ -191,7 +191,7 @@ div.ui-checkbox, div.ui-radio { position:relative; margin: .2em 0 .5em; }
.ui-li-thumb { position: absolute; left: 0; top: 0; max-height: 80px; max-width: 80px; }
.ui-li-thumb, .ui-li-content { float: left; margin-right: 10px; }
.ui-li-aside { float: right; width: 25%; text-align: right; }
.ui-li-count { position: absolute; font-size: 11px; font-weight: bold; border-width: 0; padding: .2em .4em; top: 50%; margin-top: -.8em; right: 38px; }
.ui-li-count { position: absolute; font-size: 11px; font-weight: bold; padding: .2em .4em; top: 50%; margin-top: -.9em; right: 38px; }
.ui-li-link-alt { position: absolute; width: 30px; height: 100%; border-width: 0; border-left-width: 1px; top: 0; right: 0; }
.ui-li-link-alt .ui-btn { overflow: hidden; position: absolute; right: 5px; top: 50%; margin-top: -11px; }
.ui-li-link-alt .ui-btn-inner { padding: 0; }

12
js/jQuery.listview.js
View file

@ -8,11 +8,15 @@
$.fn.listview = function(options){
return $(this).each(function(){
var o = $.extend({
theme: $(this).is('[data-theme]') ? $(this).attr('data-theme') : 'f',
countTheme: $(this).is('[data-count-theme]') ? $(this).attr('data-count-theme') : 'a',
theme: $(this).is('[data-theme]') ? $(this).attr('data-theme') : 'f'
},options);
//split these to be able to reference o.theme - there's a simpler way i'm sure!
o = $.extend({
countTheme: $(this).is('[data-count-theme]') ? $(this).attr('data-count-theme') : o.theme,
headerTheme: 'b',
splitTheme: $(this).is('[data-split-theme]') ? $(this).attr('data-split-theme') : 'b'
},options);
},o);
//if it's a nested list, chunk it into ui-page items, recurse through them and call listview on each individual ul
$( $(this).find("ul").get().reverse() ).each(function( i ) {
@ -75,7 +79,7 @@ $.fn.listview = function(options){
.filter('li:first-child img').addClass('ui-corner-tl').end()
.filter('li:last-child img').addClass('ui-corner-bl').end()
.end()
.find('.ui-li-count').addClass('ui-bar-'+o.countTheme + ' ui-btn-corner-all')
.find('.ui-li-count').addClass('ui-btn-up-'+o.countTheme + ' ui-btn-corner-all')
.end()
.find(':header').addClass('ui-li-heading')
.end()