Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

Added documentation for list filter plugin options

  • Loading branch information...
commit 6282795e3b4bafed0a4dfe86412b56b4992a4f63 1 parent 0b78684
@jakeboone02 authored
Showing with 53 additions and 8 deletions.
  1. +53 −8 docs/lists/lists-options.html
View
61 docs/lists/lists-options.html
@@ -41,7 +41,7 @@
<p class="default">default: "c"</p>
<p>Sets the color scheme (swatch) for list item <a href="lists-count.html">count bubbles</a>. It accepts a single letter from a-z that maps to the swatches included in your theme. To set the value for all instances of this widget, bind this option to the <a href="../../api/globalconfig.html">mobileinit event</a>:</p>
<pre><code>$( document ).bind( "mobileinit", function(){
- <strong>$.mobile.listview.prototype.options.countTheme = "a";</strong>
+ <strong>$.mobile.listview.prototype.options.countTheme = "a";</strong>
});
</code></pre>
<p>This option is also exposed as a data attribute: <code>data-count-theme=&quot;a&quot;</code>.</p>
@@ -52,18 +52,63 @@
<p class="default">default: "b"</p>
<p>Sets the color scheme (swatch) for list <a href="lists-divider.html">dividers</a>. It accepts a single letter from a-z that maps to the swatches included in your theme. To set the value for all instances of this widget, bind this option to the <a href="../../api/globalconfig.html">mobileinit event</a>:</p>
<pre><code>$( document ).bind( "mobileinit", function(){
- <strong>$.mobile.listview.prototype.options.dividerTheme = "a";</strong>
+ <strong>$.mobile.listview.prototype.options.dividerTheme = "a";</strong>
});
</code></pre>
<p>This option is also exposed as a data attribute: <code>data-dividertheme=&quot;a&quot;</code>.</p>
</dd>
+ <dt><code>filter</code> <em>boolean</em></dt>
+ <dd>
+ <p class="default">default: false</p>
+ <p>Adds a <a href="lists-search.html">search filter bar</a> to listviews. To set the value for all instances of this widget, bind this option to the <a href="../../api/globalconfig.html">mobileinit event</a>:</p>
+<pre><code>$( document ).bind( "mobileinit", function(){
+ <strong>$.mobile.listview.prototype.options.filter = true;</strong>
+});
+</code></pre>
+ <p>This option is also exposed as a data attribute: <code>data-filter=&quot;true&quot;</code>.</p>
+ </dd>
+
+ <dt><code>filterCallback</code> <em>function</em></dt>
+ <dd>
+ <p>The function to determine which rows to hide when the <a href="lists-search.html">search filter</a> textbox changes. The function accepts two arguments -- the text of the list item (or <code>data-filtertext</code> value if present), and the search string. Return <code>true</code> to hide the item, <code>false</code> to leave it visible. To set the value for all instances of this widget, bind this option to the <a href="../../api/globalconfig.html">mobileinit event</a>:</p>
+<pre><code>$( document ).bind( "mobileinit", function(){
+ <strong>$.mobile.listview.prototype.options.filterCallback = function( text, searchValue ) {
+ // only show items that *begin* with the search string
+ return text.toLowerCase().substring( 0, searchValue.length ) !== searchValue;
+ };</strong>
+});
+</code></pre>
+ </dd>
+
+ <dt><code>filterPlaceholder</code> <em>string</em></dt>
+ <dd>
+ <p class="default">default: "Filter items..."</p>
+ <p>The placeholder text used in <a href="lists-search.html">search filter bars</a>. To set the value for all instances of this widget, bind this option to the <a href="../../api/globalconfig.html">mobileinit event</a>:</p>
+<pre><code>$( document ).bind( "mobileinit", function(){
+ <strong>$.mobile.listview.prototype.options.filterPlaceholder = "Search...";</strong>
+});
+</code></pre>
+ <p>This option is also exposed as a data attribute: <code>data-filter-placeholder=&quot;Search...&quot;</code>.</p>
+ </dd>
+
+ <dt><code>filterTheme</code> <em>string</em></dt>
+ <dd>
+ <p class="default">default: "c"</p>
+ <p>Sets the color scheme (swatch) for the <a href="lists-search.html">search filter bar</a>. It accepts a single letter from a-z that maps to the swatches included in your theme. To set the value for all instances of this widget, bind this option to the <a href="../../api/globalconfig.html">mobileinit event</a>:</p>
+<pre><code>$( document ).bind( "mobileinit", function(){
+ <strong>$.mobile.listview.prototype.options.filterTheme = "a";</strong>
+});
+</code></pre>
+ <p>This option is also exposed as a data attribute: <code>data-filter-theme=&quot;a&quot;</code>.</p>
+ </dd>
+
<dt><code>headerTheme</code> <em>string</em></dt>
<dd>
<p class="default">default: "b"</p>
<p>Sets the color scheme (swatch) for headers of <a href="lists-nested.html">nested list</a> sub pages. It accepts a single letter from a-z that maps to the swatches included in your theme. To set the value for all instances of this widget, bind this option to the <a href="../../api/globalconfig.html">mobileinit event</a>:</p>
<pre><code>$( document ).bind( "mobileinit", function(){
- <strong>$.mobile.listview.prototype.options.headerTheme = "a";</strong>
+ <strong>$.mobile.listview.prototype.options.headerTheme = "a";</strong>
});
</code></pre>
<p>This option is also exposed as a data attribute: <code>data-header-theme=&quot;a&quot;</code>.</p>
@@ -74,7 +119,7 @@
<p class="default">default: ":jqmData(role='listview')"</p>
<p>This is used to define the selectors (element types, data roles, etc.) that will automatically be initialized as list views. To change which elements are initialized, bind this option to the <a href="../../api/globalconfig.html">mobileinit event</a>:</p>
<pre><code>$( document ).bind( "mobileinit", function(){
- <strong>$.mobile.listview.prototype.options.initSelector = ".mylistview";</strong>
+ <strong>$.mobile.listview.prototype.options.initSelector = ".mylistview";</strong>
});
</code></pre>
</dd>
@@ -84,7 +129,7 @@
<p class="default">default: false</p>
<p>Adds <a href="lists-inset.html">inset list</a> styles. To set the value for all instances of this widget, bind this option to the <a href="../../api/globalconfig.html">mobileinit event</a>:</p>
<pre><code>$( document ).bind( "mobileinit", function(){
- <strong>$.mobile.listview.prototype.options.inset = true;</strong>
+ <strong>$.mobile.listview.prototype.options.inset = true;</strong>
});
</code></pre>
<p>This option is also exposed as a data attribute: <code>data-inset=&quot;true&quot;</code>.</p>
@@ -95,7 +140,7 @@
<p class="default">default: "arrow-r"</p>
<p>Applies an icon from the <a href="../buttons/buttons-icons.html">icon set</a> to all <a href="lists-split.html">split list buttons</a>. To set the value for all instances of this widget, bind this option to the <a href="../../api/globalconfig.html">mobileinit event</a>:</p>
<pre><code>$( document ).bind( "mobileinit", function(){
- <strong>$.mobile.listview.prototype.options.splitIcon = "a";</strong>
+ <strong>$.mobile.listview.prototype.options.splitIcon = "a";</strong>
});
</code></pre>
<p>This option is also exposed as a data attribute: <code>data-split-icon=&quot;a&quot;</code>.</p>
@@ -106,7 +151,7 @@
<p class="default">default: "b"</p>
<p>Sets the color scheme (swatch) for <a href="lists-split.html">split list buttons</a>. It accepts a single letter from a-z that maps to the swatches included in your theme. To set the value for all instances of this widget, bind this option to the <a href="../../api/globalconfig.html">mobileinit event</a>:</p>
<pre><code>$( document ).bind( "mobileinit", function(){
- <strong>$.mobile.listview.prototype.options.splitTheme = "a";</strong>
+ <strong>$.mobile.listview.prototype.options.splitTheme = "a";</strong>
});
</code></pre>
<p>This option is also exposed as a data attribute: <code>data-split-theme=&quot;a&quot;</code>.</p>
@@ -117,7 +162,7 @@
<p class="default">default: null, inherited from parent</p>
<p>Sets the color scheme (swatch) for this widget. It accepts a single letter from a-z that maps to the swatches included in your theme. By default, it will inherit the same swatch color as its parent container if not explicitly set. To set the value for all instances of this widget, bind this option to the <a href="../../api/globalconfig.html">mobileinit event</a>:</p>
<pre><code>$( document ).bind( "mobileinit", function(){
- <strong>$.mobile.listview.prototype.options.theme = "a";</strong>
+ <strong>$.mobile.listview.prototype.options.theme = "a";</strong>
});
</code></pre>
<p>This option is also exposed as a data attribute: <code>data-theme=&quot;a&quot;</code>.</p>
Please sign in to comment.
Something went wrong with that request. Please try again.