diff --git a/js/jquery.mobile.listview.js b/js/jquery.mobile.listview.js index 5606216ef29..76597b7ec0a 100644 --- a/js/jquery.mobile.listview.js +++ b/js/jquery.mobile.listview.js @@ -21,6 +21,7 @@ $.widget( "mobile.listview", $.mobile.widget, { splitIcon: "arrow-r", splitTheme: "b", inset: false, + listStyle: false, initSelector: ":jqmData(role='listview')" }, @@ -29,9 +30,10 @@ $.widget( "mobile.listview", $.mobile.widget, { // create listview markup t.element.addClass(function( i, orig ) { - return orig + " ui-listview " + ( t.options.inset ? " ui-listview-inset ui-corner-all ui-shadow " : "" ); + return orig + " ui-listview " + ( t.options.inset ? " ui-listview-inset ui-corner-all ui-shadow " : "" ) + + ( t.options.listStyle === "keyvalue" ? " ui-listview-keyvalue" : "" ); }); - + t.refresh(); }, @@ -78,7 +80,8 @@ $.widget( "mobile.listview", $.mobile.widget, { li = $list.children( "li" ), counter = $.support.cssPseudoElement || !$.nodeName( $list[ 0 ], "ol" ) ? 0 : 1, item, itemClass, itemTheme, - a, last, splittheme, countParent, icon; + a, last, splittheme, countParent, icon, + div; if ( counter ) { $list.find( ".ui-li-dec" ).remove(); @@ -147,6 +150,27 @@ $.widget( "mobile.listview", $.mobile.widget, { } else { itemClass += " ui-li-static ui-body-" + itemTheme; + + // Key-value pairs with div tags + div = item.children( "div" ); + + if ( div.length == 1 && $list.jqmData( "list-style" ) === "keyvalue" ) { + var kvp = div.eq( 0 ); + var pair = div.children( "div" ); + + kvp.addClass( "ui-li-keyvalue" ); + + if ( item.jqmData( "wrap" ) ) { + kvp.addClass( "ui-wrap" ); + } + + if ( pair.length == 2 ) { + var key = pair.eq( 0 ); + var value = pair.eq( 1 ); + key.addClass( "ui-li-key" ); + value.addClass( "ui-li-value" ); + } + } } } diff --git a/themes/default/jquery.mobile.listview.css b/themes/default/jquery.mobile.listview.css index 9801fa39611..ae3718cba32 100644 --- a/themes/default/jquery.mobile.listview.css +++ b/themes/default/jquery.mobile.listview.css @@ -39,6 +39,13 @@ ol.ui-listview .ui-li-jsnumbering:before { content: "" !important; } /* to avoid .ui-li-link-alt .ui-btn-inner { padding: 0; position: static; } .ui-li-link-alt .ui-btn .ui-icon { right: 50%; margin-right: -9px; } +.ui-listview-keyvalue .ui-li-static { padding-right: 15px; } +.ui-li-keyvalue { clear: both; display: inline-block; width: 100%; } +.ui-li-key { float: left; } +.ui-li-value { float: right; font-weight: normal; text-align: right; } +.ui-li-key, .ui-li-value { display: block; margin: 0; max-width: 48%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: auto; } +.ui-li-keyvalue.ui-wrap .ui-li-key, .ui-li-keyvalue.ui-wrap .ui-li-value { overflow: visible; white-space: normal; } + .ui-listview-filter { border-width: 0; overflow: hidden; margin: -15px -15px 15px -15px } .ui-listview-filter .ui-input-search { margin: 5px; width: auto; display: block; }