jquery-archive · gabrielschulhof · Jul 25, 2013 · Jul 9, 2013 · Jul 10, 2013 · Jul 10, 2013
diff --git a/css/structure/jquery.mobile.filterbar.css b/css/structure/jquery.mobile.filterbar.css
@@ -0,0 +1,29 @@
+.ui-filter {
+	border-width: 0;
+	overflow: hidden;
+	margin: -1em -1em 1em -1em;
+}
+.ui-filter-inset {
+	margin: 1em -.3125em -1em;
+	background: transparent;
+}
+.ui-collapsible-content .ui-filter {
+	margin: -.625em -1em .625em -1em;
+	border-bottom: inherit;
+}
+.ui-collapsible-content .ui-filter-inset {
+	margin: -.3125em;
+	border-bottom-width: 0;
+}
+.ui-filter .ui-input-search {
+	margin: .3125em;
+	width: auto;
+	display: block;
+}
+.ui-screen-hidden {
+	display:none;
+}
+
+
+
+
diff --git a/css/structure/jquery.mobile.listview.css b/css/structure/jquery.mobile.listview.css
@@ -270,28 +270,3 @@ ol.ui-listview > li img:first-child + * ~ * {
 	margin-top: 0;
 	text-indent: 2.04em; /* (1.4em + .3em) * .9em / .75em */
 }
-.ui-listview-filter {
-	border-width: 0;
-	overflow: hidden;
-	margin: -1em -1em 1em -1em;
-}
-.ui-listview-filter-inset {
-	margin: 1em -.3125em -1em;
-	background: transparent;
-}
-.ui-collapsible-content .ui-listview-filter {
-	margin: -.625em -1em .625em -1em;
-	border-bottom: inherit;
-}
-.ui-collapsible-content .ui-listview-filter-inset {
-	margin: -.3125em;
-	border-bottom-width: 0;
-}
-.ui-listview-filter .ui-input-search {
-	margin: .3125em;
-	width: auto;
-	display: block;
-}
-.ui-listview > li.ui-screen-hidden {
-	display:none;
-}
diff --git a/css/structure/jquery.mobile.structure.css b/css/structure/jquery.mobile.structure.css
@@ -21,3 +21,4 @@
 @import url( "jquery.mobile.table.columntoggle.css" );
 @import url( "jquery.mobile.table.reflow.css" );
 @import url( "jquery.mobile.panel.css" );
+@import url( "jquery.mobile.filterbar.css" );
diff --git a/demos/_assets/css/jqm-demos.css b/demos/_assets/css/jqm-demos.css
@@ -119,11 +119,14 @@ body, .jqm-demos  {
 	display: block;
 	border-top: 1px solid #e0e0e0;
 }
-.jqm-search	> .ui-listview-filter {
+.jqm-search	> .ui-filter {
 	margin: 0 -.3125em;
 	padding: 1px 0; /* to resolve Chrome rendering issue (border-bottom not visible */
 }
-.jqm-demos .jqm-search > .ui-listview-filter .ui-input-search {
+.jqm-content	> .ui-filter {
+	margin-bottom: 1.1em;
+}
+.jqm-demos .jqm-search > .ui-filter .ui-input-search {
 	margin: 4px .3125em;
 }
 .jqm-search > .jqm-list {
@@ -434,48 +437,48 @@ h2.jqm-home-widget {
 }
 
 /* List filter */
-.jqm-demos-home .jqm-content > .ui-listview-filter,
-.jqm-demos-index .jqm-content > .ui-listview-filter {
+.jqm-demos-home .jqm-content > .ui-filter,
+.jqm-demos-index .jqm-content > .ui-filter {
 	margin-top: 0;
 	margin-bottom: -.5em;
 }
-.jqm-demos-home .jqm-content > .ui-listview-filter .ui-input-search,
-.jqm-demos-index .jqm-content > .ui-listview-filter .ui-input-search,
-.jqm-demos-index .jqm-search-results-wrap > .ui-listview-filter .ui-input-search {
+.jqm-demos-home .jqm-content > .ui-filter .ui-input-search,
+.jqm-demos-index .jqm-content > .ui-filter .ui-input-search,
+.jqm-demos-index .jqm-search-results-wrap > .ui-filter .ui-input-search {
 	background-color: #f9f9f9;
 	border-color: #e5e5e5;
 	border-color: rgba(0,0,0,.1);
 }
-.jqm-demos .jqm-search .ui-listview-filter .ui-input-search {
+.jqm-demos .jqm-search .ui-filter .ui-input-search {
 	background-color: #f9f9f9;
 	border-color: #e5e5e5;
 	border-color: rgba(0,0,0,.1);
 	-webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.2);
 	-moz-box-shadow: inset 0 1px 2px rgba(0,0,0,.2);
 	box-shadow: inset 0 1px 2px rgba(0,0,0,.2);
 }
-.jqm-demos-home .jqm-content > .ui-listview-filter .ui-input-search.ui-focus,
-.jqm-demos-index .jqm-content > .ui-listview-filter .ui-input-search.ui-focus,
-.jqm-demos-index .jqm-search-results-wrap > .ui-listview-filter .ui-input-search.ui-focus {
+.jqm-demos-home .jqm-content > .ui-filter .ui-input-search.ui-focus,
+.jqm-demos-index .jqm-content > .ui-filter .ui-input-search.ui-focus,
+.jqm-demos-index .jqm-search-results-wrap > .ui-filter .ui-input-search.ui-focus {
 	background-color: #fff;
 	border-color: #34bae8;
 	border-color: rgba(52,186,232,.2);
 	-webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.1), 0 0 9px rgba(52,186,232,.3);
 	-moz-box-shadow: inset 0 1px 2px rgba(0,0,0,.1), 0 0 9px rgba(52,186,232,.2);
 	box-shadow: inset 0 1px 2px rgba(0,0,0,.1), 0 0 9px rgba(52,186,232,.2);
 }
-.jqm-demos .jqm-search .ui-listview-filter .ui-input-search.ui-focus {
+.jqm-demos .jqm-search .ui-filter .ui-input-search.ui-focus {
 	background-color: #fff;
 	border-color: #e5e5e5;
 	border-color: rgba(0,0,0,.1);
 	-webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.1);
 	-moz-box-shadow: inset 0 1px 2px rgba(0,0,0,.1);
 	box-shadow: inset 0 1px 2px rgba(0,0,0,.1);
 }
-.jqm-demos .jqm-search > .ui-listview-filter .ui-input-text,
-.jqm-demos-home .jqm-content > .ui-listview-filter .ui-input-text,
-.jqm-demos-index .jqm-content > .ui-listview-filter .ui-input-text,
-.jqm-demos-index .jqm-search-results-wrap > .ui-listview-filter .ui-input-text {
+.jqm-demos .jqm-search > .ui-filter .ui-input-text,
+.jqm-demos-home .jqm-content > .ui-filter .ui-input-text,
+.jqm-demos-index .jqm-content > .ui-filter .ui-input-text,
+.jqm-demos-index .jqm-search-results-wrap > .ui-filter .ui-input-text {
 	font-family: 'Open Sans', sans-serif;
 	font-weight: 300;
 	font-size: .95em;
@@ -625,7 +628,7 @@ h2.jqm-home-widget {
 		background: none;
 		border: none;
 	}
-	.jqm-demos .jqm-search > .ui-listview-filter .ui-input-search {
+	.jqm-demos .jqm-search > .ui-filter .ui-input-search {
 		margin: 0;	
 	}
 	.jqm-search > .jqm-list {

diff --git a/demos/_assets/js/jqm-demos.js b/demos/_assets/js/jqm-demos.js
@@ -84,9 +84,6 @@ $( document ).on( "pageinit", ".jqm-demos", function() {
 		theme: null,
 		dividerTheme: null,
 		icon: false,
-		filter: true,
-		filterReveal: true,
-		filterPlaceholder: "Search...",
 		autodividers: true,
 		autodividersSelector: function ( li ) {
     		return "";
@@ -95,6 +92,9 @@ $( document ).on( "pageinit", ".jqm-demos", function() {
   		enterToNav: true,
   		highlight: true,
   		submitTo: "search-results.php"
+	}).filterbar({
+		filterReveal: true,
+		filterPlaceholder: "Search...",
 	});
 
 	$( this ).find( ".jqm-header .jqm-search-link" ).on( "click", function() {
@@ -121,20 +121,22 @@ $( document ).on( "pageinit", ".jqm-demos", function() {
 		$( this ).find( ".jqm-search .ui-input-clear" ).trigger( "click" );
 	});
 
-	$( this ).find( ".jqm-content ul.jqm-list " ).listview({
+	$( this ).find( ".jqm-content ul" ).listview({
 		globalNav: "demos",
 		inset: true,
 		theme: null,
 		dividerTheme: null,
 		icon: false,
-		filter: true,
-		filterReveal: true,
-		filterPlaceholder: "Search...",
   		arrowKeyNav: true,
   		enterToNav: true,
   		highlight: true
 	});
 
+	$( this ).find( ".jqm-content ul.jqm-widget-list" ).filterbar({
+		filterReveal: true,
+		filterPlaceholder: "Search...",
+	});
+
 	$( this ).find( ".jqm-search-results-list li, .jqm-search li" ).each(function() {
 		var text = $( this ).attr( "data-filtertext" );
 		$( this ).find( "a" ).append( "<span class='jqm-search-results-keywords ui-li-desc'><span class='jqm-keyword-hash'>//</span> " + text + "</span>" );

diff --git a/demos/index.php b/demos/index.php
@@ -38,7 +38,7 @@
 			<a href="http://api.jquerymobile.com" class="jqm-button" data-ajax="false" data-role="button" data-inline="true" data-mini="true" data-icon="arrow-r" data-iconpos="right" data-theme="f">Visit API Site </a>
 		</div>
 
-		<ul data-role="listview" data-inset="true" data-theme="a" data-icon="false" data-filter-placeholder="Search..." class="jqm-list jqm-home-list">
+		<ul data-role="listview" data-inset="true" data-theme="a" data-icon="false" class="jqm-list jqm-home-list">
             <li><a href="intro/"><h2>Introduction</h2><p>New to jQuery Mobile? Start here.</p></a></li>
             <li><a href="examples/"><h2>Demo Showcase</h2><p>Examples of how to customize and extend jQuery Mobile.</p></a></li>
             <li><a href="faq/"><h2>Questions &amp; Answers</h2><p>Common issues and questions, explained.</p></a></li>
@@ -49,7 +49,7 @@
 
 		<p class="jqm-intro">Test drive every component in the library, and easily build pages by copying and pasting the markup configuration you need.</p>
 
-		<ul data-role="listview" data-inset="true" data-filter="true" data-theme="a" data-divider-theme="a" data-icon="false" data-filter-placeholder="Search widgets..." data-global-nav="demos" class="jqm-list">
+		<ul data-role="listview" data-inset="true" data-filter="true" data-theme="a" data-divider-theme="a" data-icon="false" data-filter-placeholder="Search widgets..." data-global-nav="demos" class="jqm-list jqm-widget-list">
         	<?php include( 'nav-widgets.php' ); ?>
         </ul>
 
@@ -60,7 +60,7 @@
 			<li><a href="test/theming/" data-ajax="false">Theme inheritance</a></li>
 			<li data-role="list-divider">Icons</li>
 			<li><a href="test/icons/font-icons.php" data-ajax="false">Font icons</a></li>
-        </ul>
+		</ul>
 
 	</div><!-- /content -->
 

diff --git a/demos/nav-examples.php b/demos/nav-examples.php
@@ -6,6 +6,11 @@
 
 <li data-section="Demo Showcase" data-filtertext="dynamic controlgroup buttons selects checkboxes forms"><a href="examples/controlgroups/dynamic-controlgroup.php" data-ajax="false">Dynamic controlgroup</a></li>
 
+<!--
+<li data-role="list-divider">Filter</li>
+
+<li data-section="Demo Showcase" data-filtertext="running a custom filter query on local and remote storages"><a href="examples/filter/server-side-filter.php" data-ajax="false">Local/remote storage Filter</a></li>
+-->
 <li data-role="list-divider">Listviews</li>
 
 <li data-section="Demo Showcase" data-filtertext="grid listview responsive grids responsive listviews lists ul"><a href="examples/listviews/grid-listview.php" data-ajax="false">Grid Listview</a></li>

diff --git a/demos/nav-widgets.php b/demos/nav-widgets.php
@@ -2,7 +2,7 @@
 
 <li data-section="Widgets" data-filtertext="ajax navigation navigate event method"><a href="widgets/navigation/" data-ajax="false">AJAX Navigation</a></li>
 
-<li data-section="Widgets" data-filtertext="autocomplete filter reveal listviews remote listviewbeforefilter placeholder"><a href="widgets/autocomplete/" data-ajax="false">Autocomplete</a></li>
+<li data-section="Widgets" data-filtertext="autocomplete filter reveal listviews remote filterbarbeforefilter placeholder"><a href="widgets/autocomplete/" data-ajax="false">Autocomplete</a></li>
 
 <li data-section="Widgets" data-filtertext="buttons inputs forms inline theme grouped icons mini disabled"><a href="widgets/buttons/" data-ajax="false">Buttons</a></li>
 
@@ -12,6 +12,8 @@
 
 <li data-section="Widgets" data-filtertext="controlgroups selects checkboxradio buttons horizontal vertical"><a href="widgets/controlgroups/">Controlgroup</a></li>
 
+<li data-section="Widgets" data-filtertext="filter elements sorting searching"><a href="widgets/filter/">Filter <span class="ui-li-count">New</span></a></li>
+
 <li data-section="Widgets" data-filtertext="dialogs modal popups"><a href="widgets/dialog/">Dialogs</a></li>
 
 <li data-section="Widgets" data-filtertext="fixed toolbars headers footers sections fullscreen"><a href="widgets/fixed-toolbars/">Fixed toolbars</a></li>

diff --git a/demos/widgets/autocomplete/autocomplete-remote.php b/demos/widgets/autocomplete/autocomplete-remote.php
@@ -13,7 +13,7 @@
 	<script src="../../../js/"></script>
     <script>
 		$( document ).on( "pageinit", "#myPage", function() {
-			$( "#autocomplete" ).on( "listviewbeforefilter", function ( e, data ) {
+			$( "#autocomplete" ).on( "filterbarbeforefilter", function ( e, data ) {
 				var $ul = $( this ),
 					$input = $( data.input ),
 					value = $input.val(),
@@ -43,7 +43,7 @@
 		});
     </script>
 	<style>
-		.ui-listview-filter-inset {
+		.ui-filter-inset {
 			margin-top: 0;
 		}
     </style>
@@ -60,11 +60,11 @@
 
 	<div data-role="content" class="jqm-content">
 
-  			<h1>Remote autocomplete</h1>
+			<h1>Remote autocomplete</h1>
 
-  			<p class="jqm-intro">To use the listview filter as an autocomplete that taps into remote data sources, you can use the <code>listviewbeforefilter</code> event to dynamically populate a listview as a user types a search query.</p>
+			<p class="jqm-intro">To use the filter as an autocomplete that taps into remote data sources, you can use the <code>filterbarbeforefilter</code> event to dynamically populate a listview as a user types a search query.</p>
 
-			 <p>This is useful when you have a very large data set like cities, zip codes, or products that can't be loaded up-front locally. Use the view source button to see the JavaScript that powers this demo.</p>
+			<p>This is useful when you have a very large data set like cities, zip codes, or products that can't be loaded up-front locally. Use the view source button to see the JavaScript that powers this demo.</p>
 			<p>If you have a small list of items, you can use the <a href="../listviews/">listview</a> filter reveal option to make an autocomplete with local listview data.</p>
 
 			<div data-demo-html="true" data-demo-js="true" data-demo-css="true">

diff --git a/demos/widgets/autocomplete/index.php b/demos/widgets/autocomplete/index.php
@@ -26,17 +26,17 @@
 
 			<h1>Autocomplete <a href="http://api.jquerymobile.com/listview/#option-filter" data-ajax="false" data-role="button" data-inline="true" data-mini="true" data-icon="arrow-r" data-iconpos="right" class="jqm-api-link">API</a></h1>
 
-			<p class="jqm-intro">An autocomplete widget backed by either local or remote data can be created by leveraging the listview filter feature.
+			<p class="jqm-intro">An autocomplete widget backed by either local or remote data can be created by leveraging the filter feature.
 			</p>
 
 			<h2>Remote data</h2>
 
-			<p>To use the listview filter as an autocomplete that taps into remote data sources, you can use the <code>listviewbeforefilter</code> event to dynamically populate a listview as a user types a search query: <a href="autocomplete-remote.php" data-ajax="false">Remote autocomplete demo</a></p>
+			<p>To use the filter as an autocomplete that taps into remote data sources, you can use the <code>filterbarbeforefilter</code> event to dynamically populate a listview as a user types a search query: <a href="autocomplete-remote.php" data-ajax="false">Remote autocomplete demo</a></p>
 
 			<h2 id="autocomplete-local">Local data</h2>
 
 			<p>The filter reveal feature makes it easy to build a simple autocomplete with local data. When a filterable list has the <code>data-filter-reveal="true"</code>, it will auto-hide all the list items when the search field is blank. The <code>data-filter-placeholder</code> attribute can be added to specify the placeholder text for the filter.</p>
-			<p>Any listview filter with more than 100-200 items may be slow to perform on a mobile device so we recommend using this feature for  autocomplete situations with a relatively small number of items.</p>
+			<p>Any filter with more than 100-200 items may be slow to perform on a mobile device so we recommend using this feature for  autocomplete situations with a relatively small number of items.</p>
 
 			<h4>Full width listview (non-inset)</h4>
 
@@ -96,7 +96,7 @@
 			</div><!--/demo-html -->
 
 		<h2 id="autocomplete-filtertext">Providing richer search content</h2>
-			<p>By default, the listview filter simply searches against the contents of each list item. If you want the filter to search against different content, add the <code>data-filtertext</code>	attribute to the item and populate it with one or many keywords and phrases that should be used to match against. Note that if this attribute is added, the contents of the list item are ignored.</p>
+			<p>By default, the filter simply searches against the contents of each list item. If you want the filter to search against different content, add the <code>data-filtertext</code>	attribute to the item and populate it with one or many keywords and phrases that should be used to match against. Note that if this attribute is added, the contents of the list item are ignored.</p>
 			<p>This attribute is useful for dealing with allowing for ticker symbols and full company names to be searched, or for covering common spellings and abbreviations for countries.</p>
 
 <pre><code>