diff --git a/docs/lists/docs-lists.html b/docs/lists/docs-lists.html index 8347ced2baa..85b6a77800d 100755 --- a/docs/lists/docs-lists.html +++ b/docs/lists/docs-lists.html @@ -81,6 +81,7 @@

Text formatting & counts

Thumbnails & icons

To add thumbnails to the left of a list item, simply add an image inside a list item as the first child element. The framework will scale the image to 80 pixels square. To use standard 16x16 pixel icons in list items, add the class of ui-li-icon to the image element to size.

List with thumbnail images + List with wide thumbnail images List with icon images

Inset lists

diff --git a/docs/lists/images/flag-de.png b/docs/lists/images/flag-de.png new file mode 100644 index 00000000000..68a22c19bf9 Binary files /dev/null and b/docs/lists/images/flag-de.png differ diff --git a/docs/lists/images/flag-fr.png b/docs/lists/images/flag-fr.png new file mode 100644 index 00000000000..54ccde4f344 Binary files /dev/null and b/docs/lists/images/flag-fr.png differ diff --git a/docs/lists/images/flag-gb.png b/docs/lists/images/flag-gb.png new file mode 100644 index 00000000000..37f63352bfe Binary files /dev/null and b/docs/lists/images/flag-gb.png differ diff --git a/docs/lists/images/flag-jp.png b/docs/lists/images/flag-jp.png new file mode 100644 index 00000000000..ee165024c5b Binary files /dev/null and b/docs/lists/images/flag-jp.png differ diff --git a/docs/lists/images/flag-se.png b/docs/lists/images/flag-se.png new file mode 100644 index 00000000000..085498b9c13 Binary files /dev/null and b/docs/lists/images/flag-se.png differ diff --git a/docs/lists/images/flag-us.png b/docs/lists/images/flag-us.png new file mode 100644 index 00000000000..7ab3bd98700 Binary files /dev/null and b/docs/lists/images/flag-us.png differ diff --git a/docs/lists/lists-widethumbnails.html b/docs/lists/lists-widethumbnails.html new file mode 100644 index 00000000000..103cb5ae3df --- /dev/null +++ b/docs/lists/lists-widethumbnails.html @@ -0,0 +1,40 @@ + + + + + jQuery Mobile Docs - Lists + + + + + + + + +
+ +
+

Wide Thumbnails

+ Home +
+ +
+ + + + +
+
+ + + \ No newline at end of file diff --git a/js/jquery.mobile.forms.textinput.js b/js/jquery.mobile.forms.textinput.js index 72bbd438f1e..aac6a79ad70 100644 --- a/js/jquery.mobile.forms.textinput.js +++ b/js/jquery.mobile.forms.textinput.js @@ -53,7 +53,10 @@ $.widget( "mobile.textinput", $.mobile.widget, { } toggleClear(); - input.keyup(toggleClear); + input.keyup(toggleClear); + input.parents("form").submit(function() { + return false; + }); } else{ input.addClass('ui-corner-all ui-shadow-inset' + themeclass); diff --git a/js/jquery.mobile.listview.filter.js b/js/jquery.mobile.listview.filter.js index 1ea73544e09..68f2650c089 100644 --- a/js/jquery.mobile.listview.filter.js +++ b/js/jquery.mobile.listview.filter.js @@ -17,6 +17,14 @@ $( ":jqmData(role='listview')" ).live( "listviewcreate", function() { return; } + // using custom style faster than iterating over list and calling .hide() + // http://www.learningjquery.com/2010/05/now-you-see-me-showhide-performance + var head = document.getElementsByTagName("head")[0] || document.documentElement, + style = document.createElement("style"); + style.type = "text/css"; + style.appendChild( document.createTextNode( "li.ui-listview-filter-hide { display: none; }" ) ); + head.insertBefore( style, head.firstChild ); + var wrapper = $( "
", { "class": "ui-listview-filter ui-bar-c", "role": "search" } ), search = $( "", { @@ -26,29 +34,35 @@ $( ":jqmData(role='listview')" ).live( "listviewcreate", function() { .bind( "keyup change", function() { var val = this.value.toLowerCase(), listItems = list.children(); - listItems.show(); + style.disabled = true; + listItems.removeClass("ui-listview-filter-hide"); if ( val ) { // This handles hiding regular rows without the text we search for // and any list dividers without regular rows shown under it var childItems = false, - item; + item, + itemtext; for (var i = listItems.length; i >= 0; i--) { item = $(listItems[i]); + // look for custom attribute for text to filter on before getting text from DOM + itemtext = item.data("filtertext") || item.text(); if (item.is("li:jqmData(role=list-divider)")) { if (!childItems) { - item.hide(); + item.addClass("ui-listview-filter-hide"); } // New bucket! childItems = false; - } else if (item.text().toLowerCase().indexOf( val ) === -1) { - item.hide(); + } else if (itemtext.toLowerCase().indexOf( val ) === -1) { + item.addClass("ui-listview-filter-hide"); } else { // There's a shown item in the bucket childItems = true; } } } + style.disabled = false; + $(window).trigger("scroll"); }) .appendTo( wrapper ) .textinput(); diff --git a/js/jquery.mobile.listview.js b/js/jquery.mobile.listview.js index c516dbf01fe..d5b32deb033 100644 --- a/js/jquery.mobile.listview.js +++ b/js/jquery.mobile.listview.js @@ -95,7 +95,8 @@ $.widget( "mobile.listview", $.mobile.widget, { var a = item.find( ">a" ); if ( a.length ) { - var icon = item.jqmData("icon"); + var icon = item.jqmData("icon"), + multiicon = $list.data("multiicon"); item .buttonMarkup({ @@ -103,7 +104,7 @@ $.widget( "mobile.listview", $.mobile.widget, { shadow: false, corners: false, iconpos: "right", - icon: a.length > 1 || icon === false ? false : icon || "arrow-r", + icon: (a.length > 1 && !multiicon) || icon === false ? false : icon || "arrow-r", theme: itemTheme }); diff --git a/themes/default/jquery.mobile.controlgroup.css b/themes/default/jquery.mobile.controlgroup.css index 4c507c5f2f7..884ea1adaea 100644 --- a/themes/default/jquery.mobile.controlgroup.css +++ b/themes/default/jquery.mobile.controlgroup.css @@ -4,6 +4,7 @@ * Dual licensed under the MIT (MIT-LICENSE.txt) or GPL (GPL-LICENSE.txt) licenses. */ .ui-controlgroup, fieldset.ui-controlgroup { padding: 0; margin: .5em 0 1em; } +.ui-header .ui-controlgroup { margin-top: 0; border: none; } .ui-bar .ui-controlgroup { margin: 0 .3em; } .ui-controlgroup-label { font-size: 16px; line-height: 1.4; font-weight: normal; margin: 0 0 .3em; } .ui-controlgroup-controls { display: block; width: 95%;} diff --git a/themes/default/jquery.mobile.listview.css b/themes/default/jquery.mobile.listview.css index c94f79f8575..fa42c8e764b 100644 --- a/themes/default/jquery.mobile.listview.css +++ b/themes/default/jquery.mobile.listview.css @@ -18,10 +18,12 @@ ol.ui-listview .ui-li-jsnumbering:before { content: "" !important; } /* to avoid .ui-li>.ui-btn-inner { display: block; position: relative; padding: 0; } .ui-li .ui-btn-inner a.ui-link-inherit, .ui-li-static.ui-li { padding: .7em 75px .7em 15px; display: block; } .ui-li-has-thumb .ui-btn-inner a.ui-link-inherit, .ui-li-static.ui-li-has-thumb { min-height: 60px; padding-left: 100px; } +.ui-li-has-widethumb .ui-btn-inner a.ui-link-inherit, .ui-li-static.ui-li-has-widethumb { min-height: 60px; padding-left: 180px; } .ui-li-has-icon .ui-btn-inner a.ui-link-inherit, .ui-li-static.ui-li-has-icon { min-height: 20px; padding-left: 40px; } .ui-li-heading { font-size: 16px; font-weight: bold; display: block; margin: .6em 0; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } .ui-li-desc { font-size: 12px; font-weight: normal; display: block; margin: -.5em 0 .6em; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } .ui-li-thumb, .ui-li-icon { position: absolute; left: 1px; top: 0; max-height: 80px; max-width: 80px; } +.ui-li-has-widethumb .ui-li-thumb { max-width: 160px; } .ui-li-icon { max-height: 40px; max-width: 40px; left: 10px; top: .9em; } .ui-li-thumb, .ui-li-icon, .ui-li-content { float: left; margin-right: 10px; }