libs/js/jquery-mobile-1.1.0/docs/lists/lists-options.html

   1 <!DOCTYPE html>
   2 <html>
   3         <head>
   4         <meta charset="utf-8">
   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"/>
   9
  10         <script src="../../js/jquery.js"></script>
  11         <script src="../../docs/_assets/js/jqm-docs.js"></script>
  12         <script src="../../js/"></script>
  13
  14 </head>
  15 <body>
  16
  17         <div data-role="page" class="type-interior">
  18
  19         <div data-role="header" data-theme="f">
  20                 <h1>Lists</h1>
  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 -->
  24
  25         <div data-role="content">
  26         <div class="content-primary">
  27                 <h2>List views</h2>
  28
  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>
  34                 </ul>
  35
  36                 <p>The listview plugin has the following options:</p>
  37
  38                 <dl>
  39                         <dt><code>countTheme</code> <em>string</em></dt>
  40                         <dd>
  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>
  45 });
  46 </code></pre>
  47                                 <p>This option is also exposed as a data attribute: <code>data-count-theme=&quot;a&quot;</code>.</p>
  48                         </dd>
  49
  50                         <dt><code>dividerTheme</code> <em>string</em></dt>
  51                         <dd>
  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>
  56 });
  57 </code></pre>
  58                                 <p>This option is also exposed as a data attribute: <code>data-dividertheme=&quot;a&quot;</code>.</p>
  59                         </dd>
  60
  61                         <dt><code>filter</code> <em>boolean</em></dt>
  62                         <dd>
  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>
  67 });
  68 </code></pre>
  69                                 <p>This option is also exposed as a data attribute: <code>data-filter=&quot;true&quot;</code>.</p>
  70                         </dd>
  71
  72                         <dt><code>filterCallback</code> <em>function</em></dt>
  73                         <dd>
  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;
  79     };</strong>
  80 });
  81 </code></pre>
  82                         </dd>
  83
  84                         <dt><code>filterPlaceholder</code> <em>string</em></dt>
  85                         <dd>
  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>
  90 });
  91 </code></pre>
  92                                 <p>This option is also exposed as a data attribute: <code>data-filter-placeholder=&quot;Search...&quot;</code>.</p>
  93                         </dd>
  94
  95                         <dt><code>filterTheme</code> <em>string</em></dt>
  96                         <dd>
  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>
 101 });
 102 </code></pre>
 103                                 <p>This option is also exposed as a data attribute: <code>data-filter-theme=&quot;a&quot;</code>.</p>
 104                         </dd>
 105
 106                         <dt><code>headerTheme</code> <em>string</em></dt>
 107                         <dd>
 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>
 112 });
 113 </code></pre>
 114                                 <p>This option is also exposed as a data attribute: <code>data-header-theme=&quot;a&quot;</code>.</p>
 115                         </dd>
 116
 117                         <dt><code>initSelector</code> <em>CSS selector string</em></dt>
 118                         <dd>
 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>
 123 });
 124 </code></pre>
 125                         </dd>
 126
 127                         <dt><code>inset</code> <em>boolean</em></dt>
 128                         <dd>
 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>
 133 });
 134 </code></pre>
 135                                 <p>This option is also exposed as a data attribute: <code>data-inset=&quot;true&quot;</code>.</p>
 136                         </dd>
 137
 138                         <dt><code>splitIcon</code> <em>string</em></dt>
 139                         <dd>
 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>
 144 });
 145 </code></pre>
 146                                 <p>This option is also exposed as a data attribute: <code>data-split-icon=&quot;a&quot;</code>.</p>
 147                         </dd>
 148
 149                         <dt><code>splitTheme</code> <em>string</em></dt>
 150                         <dd>
 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>
 155 });
 156 </code></pre>
 157                                 <p>This option is also exposed as a data attribute: <code>data-split-theme=&quot;a&quot;</code>.</p>
 158                         </dd>
 159
 160                         <dt><code>theme</code> <em>string</em></dt>
 161                         <dd>
 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>
 166 });
 167 </code></pre>
 168                                 <p>This option is also exposed as a data attribute: <code>data-theme=&quot;a&quot;</code>.</p>
 169                         </dd>
 170
 171                 </dl>
 172
 173         </div><!--/content-primary -->
 174
 175         <div class="content-secondary">
 176
 177                 <div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d">
 178
 179                                 <h3>More in this section</h3>
 180
 181                                 <ul data-role="listview" data-theme="c" data-dividertheme="d">
 182
 183                                         <li data-role="list-divider">List views</li>
 184                                         <li data-theme="a"><a href="docs-lists.html">List basics &amp; 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>
 188
 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>
 199
 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>
 204
 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>
 208
 209                                 </ul>
 210                 </div>
 211         </div>
 212
 213         </div><!-- /content -->
 214
 215         <div data-role="footer" class="footer-docs" data-theme="c">
 216                         <p>&copy; 2011-12 The jQuery Foundation</p>
 217         </div>
 218
 219         </div><!-- /page -->
 220
 221 </body>
 222 </html>