mirror of
https://github.com/Hopiu/jquery-mobile.git
synced 2026-04-29 02:14:44 +00:00
Updates to allow for fill-width or inset style lists.
The fillWidth option defaults to true, and can be overridden through data-fill-width attr.
This commit is contained in:
scottjehl
parent
94be57ef22
commit
633b4ed45b
3 changed files with 46 additions and 51 deletions
|
|
@ -27,7 +27,15 @@
|
|||
<li><a href="index.html">Page C</a></li>
|
||||
</ul>
|
||||
|
||||
<h2 class="ui-bar ui-bar-b">Nested Listview:</h2>
|
||||
<h2 class="ui-bar ui-bar-b">Basic inset Listview:</h2>
|
||||
|
||||
<ul data-role="listview" data-fill-width="false">
|
||||
<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>
|
||||
</ul>
|
||||
|
||||
<h2 class="ui-bar ui-bar-b" data-fill-width="false">Nested Listview:</h2>
|
||||
|
||||
<ul data-role="listview">
|
||||
<li>Page A
|
||||
|
|
@ -117,37 +125,11 @@
|
|||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
<h2 class="ui-bar ui-bar-b">Listview w/ thumbnails:</h2>
|
||||
|
||||
<ul data-role="listview">
|
||||
<li>
|
||||
<img src="images/jb.jpg" alt="jb" />
|
||||
<h3><a href="index.html">Page A</a></h3>
|
||||
<p>Quick description about this item here...</p>
|
||||
<span class="ui-li-count">22</span>
|
||||
<a href="index.html" title="browse details"></a>
|
||||
</li>
|
||||
<li>
|
||||
<img src="images/jb.jpg" alt="jb" />
|
||||
<h3><a href="index.html">Page A</a></h3>
|
||||
<p>Quick description about this item here...</p>
|
||||
<span class="ui-li-count">22</span>
|
||||
<a href="index.html" title="browse details"></a>
|
||||
</li>
|
||||
<li>
|
||||
<img src="images/jb.jpg" alt="jb" />
|
||||
<h3><a href="index.html">Page A</a></h3>
|
||||
<p>Quick description about this item here...</p>
|
||||
<span class="ui-li-count">22</span>
|
||||
<a href="index.html" title="browse details"></a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
<h2 class="ui-bar ui-bar-b">Basic Listview w/ split buttons:</h2>
|
||||
|
||||
<ol data-role="listview">
|
||||
<ol data-role="listview" data-fill-width="false">
|
||||
<li>
|
||||
<img src="images/jb.jpg" alt="jb" />
|
||||
<h3><a href="index.html">Page A</a></h3>
|
||||
|
|
@ -174,7 +156,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="b">
|
||||
<ol data-role="listview" data-fill-width="false" 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>
|
||||
|
|
|
|||
|
|
@ -179,22 +179,24 @@ div.ui-checkbox, div.ui-radio { position:relative; margin: .2em 0 .5em; }
|
|||
}
|
||||
|
||||
/* listview */
|
||||
.ui-listview { margin: 1em 15px; }
|
||||
.ui-listview { margin: 0; }
|
||||
.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-bottom-width: 0; }
|
||||
.ui-li { display: block; margin:0; position: relative; overflow: hidden; text-align: left; border-width: 0; border-top-width: 1px; }
|
||||
.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; padding: .5em 65px .5em 15px; }
|
||||
.ui-li-has-thumb { min-height: 80px; }
|
||||
.ui-li .ui-btn-inner { display: block; position: relative; padding: .5em 65px .5em 15px; }
|
||||
.ui-li-has-thumb { min-height: 70px; }
|
||||
.ui-li-has-thumb .ui-btn-inner { padding-left: 100px; }
|
||||
.ui-li-heading { font-size: 16px; font-weight: bold; display: block; margin: .6em 0; }
|
||||
.ui-li-desc { font-size: 12px; font-weight: normal; display: block; margin: -.5em 0 .6em; }
|
||||
.ui-li-thumb { position: absolute; left: 0; top: 0; max-height: 80px; max-width: 80px; }
|
||||
.ui-li-thumb { position: absolute; left: 1px; 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; 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; }
|
||||
.ui-li-link-alt .ui-btn-inner { padding: 0; position: static; }
|
||||
.ui-li-link-alt .ui-btn .ui-icon { right: 50%; margin-right: -9px; }
|
||||
|
||||
/*globalnav*/
|
||||
|
|
|
|||
|
|
@ -15,9 +15,10 @@ $.fn.listview = function(options){
|
|||
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'
|
||||
splitTheme: $(this).is('[data-split-theme]') ? $(this).attr('data-split-theme') : 'b',
|
||||
fillWidth: $(this).is('[data-fill-width]') ? ($(this).attr('data-fill-width') == 'true') : true
|
||||
},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 ) {
|
||||
var parent = $(this).parent(),
|
||||
|
|
@ -52,9 +53,13 @@ $.fn.listview = function(options){
|
|||
.addClass('ui-li' + ($(this).is(':has(img)') ? ' ui-li-has-thumb' : ''))
|
||||
.buttonMarkup({wrapperEls: 'div', shadow: false, corners: false, iconPos: 'right', icon: 'arrow-r', theme: o.theme})
|
||||
.find('a:eq(0)').addClass('ui-link-inherit');
|
||||
})
|
||||
.end()
|
||||
.controlgroup({shadow: true})
|
||||
});
|
||||
|
||||
if(!o.fillWidth){
|
||||
$(this).addClass('ui-listview-inset').controlgroup({shadow: true});
|
||||
}
|
||||
|
||||
$(this)
|
||||
.find('li').each(function(){
|
||||
//for split buttons
|
||||
$(this).find('a:eq(1)').each(function(){
|
||||
|
|
@ -66,19 +71,25 @@ $.fn.listview = function(options){
|
|||
.find('.ui-btn-inner').append($('<span></span>').buttonMarkup({ shadow: true, corners: true, theme: o.splitTheme, iconPos: 'notext',icon: 'arrow-r' }));
|
||||
|
||||
//fix corners
|
||||
var closestLi = $(this).closest('li');
|
||||
if(closestLi.is('li:first-child')){
|
||||
$(this).addClass('ui-corner-tr');
|
||||
if(!o.fillWidth){
|
||||
var closestLi = $(this).closest('li');
|
||||
if(closestLi.is('li:first-child')){
|
||||
$(this).addClass('ui-corner-tr');
|
||||
}
|
||||
else if(closestLi.is('li:last-child')){
|
||||
$(this).addClass('ui-corner-br');
|
||||
}
|
||||
}
|
||||
else if(closestLi.is('li:last-child')){
|
||||
$(this).addClass('ui-corner-br');
|
||||
}
|
||||
});
|
||||
})
|
||||
.find('img').addClass('ui-li-thumb')
|
||||
.filter('li:first-child img').addClass('ui-corner-tl').end()
|
||||
.filter('li:last-child img').addClass('ui-corner-bl').end()
|
||||
.end()
|
||||
.find('img').addClass('ui-li-thumb');
|
||||
|
||||
if(!o.fillWidth){
|
||||
$(this).find('img').filter('li:first-child img').addClass('ui-corner-tl').end()
|
||||
.filter('li:last-child img').addClass('ui-corner-bl').end();
|
||||
}
|
||||
|
||||
$(this)
|
||||
.find('.ui-li-count').addClass('ui-btn-up-'+o.countTheme + ' ui-btn-corner-all')
|
||||
.end()
|
||||
.find(':header').addClass('ui-li-heading')
|
||||
|
|
|
|||
Loading…
Reference in a new issue