5 <meta name="viewport" content="width=device-width, initial-scale=1">
6 <title>jQuery Mobile Docs - Lists Overview</title>
7 <link rel="stylesheet" href="../../css/themes/default/jquery.mobile.css" />
8 <link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
10 <script src="../../js/jquery.js"></script>
11 <script src="../../docs/_assets/js/jqm-docs.js"></script>
12 <script src="../../js/"></script>
17 <div data-role="page" class="type-interior">
19 <div data-role="header" data-theme="f">
21 <a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
22 <a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
23 </div><!-- /header -->
25 <div data-role="content">
26 <div class="content-primary">
29 <ul data-role="controlgroup" data-type="horizontal" class="localnav">
30 <li><a href="docs-lists.html" data-role="button" data-transition="fade">Basics</a></li>
31 <li><a href="lists-options.html" data-role="button" data-transition="fade" class="ui-btn-active">Options</a></li>
32 <li><a href="lists-methods.html" data-role="button" data-transition="fade">Methods</a></li>
33 <li><a href="lists-events.html" data-role="button" data-transition="fade">Events</a></li>
36 <p>The listview plugin has the following options:</p>
39 <dt><code>countTheme</code> <em>string</em></dt>
41 <p class="default">default: "c"</p>
42 <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>
43 <pre><code>$( document ).bind( "mobileinit", function(){
44 <strong>$.mobile.listview.prototype.options.countTheme = "a";</strong>
47 <p>This option is also exposed as a data attribute: <code>data-count-theme="a"</code>.</p>
50 <dt><code>dividerTheme</code> <em>string</em></dt>
52 <p class="default">default: "b"</p>
53 <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>
54 <pre><code>$( document ).bind( "mobileinit", function(){
55 <strong>$.mobile.listview.prototype.options.dividerTheme = "a";</strong>
58 <p>This option is also exposed as a data attribute: <code>data-dividertheme="a"</code>.</p>
61 <dt><code>filter</code> <em>boolean</em></dt>
63 <p class="default">default: false</p>
64 <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>
65 <pre><code>$( document ).bind( "mobileinit", function(){
66 <strong>$.mobile.listview.prototype.options.filter = true;</strong>
69 <p>This option is also exposed as a data attribute: <code>data-filter="true"</code>.</p>
72 <dt><code>filterCallback</code> <em>function</em></dt>
74 <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>
75 <pre><code>$( document ).bind( "mobileinit", function(){
76 <strong>$.mobile.listview.prototype.options.filterCallback = function( text, searchValue ) {
77 // only show items that *begin* with the search string
78 return text.toLowerCase().substring( 0, searchValue.length ) !== searchValue;
84 <dt><code>filterPlaceholder</code> <em>string</em></dt>
86 <p class="default">default: "Filter items..."</p>
87 <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>
88 <pre><code>$( document ).bind( "mobileinit", function(){
89 <strong>$.mobile.listview.prototype.options.filterPlaceholder = "Search...";</strong>
92 <p>This option is also exposed as a data attribute: <code>data-filter-placeholder="Search..."</code>.</p>
95 <dt><code>filterTheme</code> <em>string</em></dt>
97 <p class="default">default: "c"</p>
98 <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>
99 <pre><code>$( document ).bind( "mobileinit", function(){
100 <strong>$.mobile.listview.prototype.options.filterTheme = "a";</strong>
103 <p>This option is also exposed as a data attribute: <code>data-filter-theme="a"</code>.</p>
106 <dt><code>headerTheme</code> <em>string</em></dt>
108 <p class="default">default: "b"</p>
109 <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>
110 <pre><code>$( document ).bind( "mobileinit", function(){
111 <strong>$.mobile.listview.prototype.options.headerTheme = "a";</strong>
114 <p>This option is also exposed as a data attribute: <code>data-header-theme="a"</code>.</p>
117 <dt><code>initSelector</code> <em>CSS selector string</em></dt>
119 <p class="default">default: ":jqmData(role='listview')"</p>
120 <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>
121 <pre><code>$( document ).bind( "mobileinit", function(){
122 <strong>$.mobile.listview.prototype.options.initSelector = ".mylistview";</strong>
127 <dt><code>inset</code> <em>boolean</em></dt>
129 <p class="default">default: false</p>
130 <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>
131 <pre><code>$( document ).bind( "mobileinit", function(){
132 <strong>$.mobile.listview.prototype.options.inset = true;</strong>
135 <p>This option is also exposed as a data attribute: <code>data-inset="true"</code>.</p>
138 <dt><code>splitIcon</code> <em>string</em></dt>
140 <p class="default">default: "arrow-r"</p>
141 <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>
142 <pre><code>$( document ).bind( "mobileinit", function(){
143 <strong>$.mobile.listview.prototype.options.splitIcon = "a";</strong>
146 <p>This option is also exposed as a data attribute: <code>data-split-icon="a"</code>.</p>
149 <dt><code>splitTheme</code> <em>string</em></dt>
151 <p class="default">default: "b"</p>
152 <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>
153 <pre><code>$( document ).bind( "mobileinit", function(){
154 <strong>$.mobile.listview.prototype.options.splitTheme = "a";</strong>
157 <p>This option is also exposed as a data attribute: <code>data-split-theme="a"</code>.</p>
160 <dt><code>theme</code> <em>string</em></dt>
162 <p class="default">default: null, inherited from parent</p>
163 <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>
164 <pre><code>$( document ).bind( "mobileinit", function(){
165 <strong>$.mobile.listview.prototype.options.theme = "a";</strong>
168 <p>This option is also exposed as a data attribute: <code>data-theme="a"</code>.</p>
173 </div><!--/content-primary -->
175 <div class="content-secondary">
177 <div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d">
179 <h3>More in this section</h3>
181 <ul data-role="listview" data-theme="c" data-dividertheme="d">
183 <li data-role="list-divider">List views</li>
184 <li data-theme="a"><a href="docs-lists.html">List basics & API</a></li>
185 <li><a href="lists-ul.html">Basic linked list</a></li>
186 <li><a href="lists-nested.html">Nested list</a></li>
187 <li><a href="lists-ol.html">Numbered list</a></li>
189 <li><a href="lists-split.html">Split button list</a></li>
190 <li><a href="lists-divider.html">List dividers</a></li>
191 <li><a href="lists-count.html">Count bubble</a></li>
192 <li><a href="lists-thumbnails.html">Thumbnails</a></li>
193 <li><a href="lists-icons.html">Icons</a></li>
194 <li><a href="lists-formatting.html">Content formatting</a></li>
195 <li><a href="lists-search.html">Search filter bar</a></li>
196 <li><a href="lists-search-inset.html">Inset search filter bar</a></li>
197 <li><a href="lists-search-with-dividers.html">Search filter bar with dividers</a></li>
198 <li><a href="lists-search-filtertext.html">Search filter hidden data</a></li>
200 <li><a href="lists-readonly.html">Read-only lists</a></li>
201 <li><a href="lists-readonly-inset.html">Read-only inset lists</a></li>
202 <li><a href="lists-forms.html">Lists with forms</a></li>
203 <li><a href="lists-forms-inset.html">Inset lists with forms</a></li>
205 <li><a href="lists-inset.html">Inset styled lists</a></li>
206 <li><a href="lists-performance.html">List performance test</a></li>
207 <li><a href="lists-themes.html">Theming lists</a></li>
213 </div><!-- /content -->
215 <div data-role="footer" class="footer-docs" data-theme="c">
216 <p>© 2011-12 The jQuery Foundation</p>