|
15 | 15 | <body> |
16 | 16 | <div data-role="page" class="jqm-demos" data-quicklinks="true"> |
17 | 17 |
|
18 | | - <div data-role="header" class="jqm-header"> |
| 18 | + <div data-role="toolbar" data-type="header" class="jqm-header"> |
19 | 19 | <h2><a href="../" title="jQuery Mobile Demos home"><img src="../_assets/img/jquery-logo.png" alt="jQuery Mobile"></a></h2> |
20 | 20 | <p><span class="jqm-version"></span> Demos</p> |
21 | | - <a href="#" class="jqm-navmenu-link ui-button ui-button-icon-only ui-corner-all ui-nodisc-icon ui-alt-icon ui-button-left">Menu<span class="ui-icon ui-icon-bars"></span></a> |
22 | | - <a href="#" class="jqm-search-link ui-button ui-button-icon-only ui-corner-all ui-nodisc-icon ui-alt-icon ui-button-right">Search<span class="ui-icon ui-icon-search"></span></a> |
| 21 | + <a href="#" class="jqm-navmenu-link ui-button ui-button-icon-only ui-corner-all ui-nodisc-icon ui-alt-icon ui-toolbar-header-button-left">Menu<span class="ui-icon ui-icon-bars"></span></a> |
| 22 | + <a href="#" class="jqm-search-link ui-button ui-button-icon-only ui-corner-all ui-nodisc-icon ui-alt-icon ui-toolbar-header-button-right">Search<span class="ui-icon ui-icon-search"></span></a> |
23 | 23 | </div><!-- /header --> |
24 | 24 |
|
25 | 25 | <div role="main" class="ui-content jqm-content"> |
26 | 26 |
|
27 | 27 | <h1>Accordion <a href="http://api.jquerymobile.com/accordion/" class="jqm-api-docs-link ui-button ui-nodisc-icon ui-alt-icon ui-button-inline ui-corner-all ui-mini">API <span class="ui-icon ui-icon-caret-r"></span></a></h1> |
28 | 28 |
|
29 | | - |
30 | 29 | <p>Displays collapsible content panels for presenting information in a limited amount of space.</p> |
31 | 30 |
|
32 | 31 | <h2>Default Accordion</h2> |
|
74 | 73 |
|
75 | 74 | <h2>Fill Space</h2> |
76 | 75 | <p>Because the accordion is comprised of block-level elements, by default its width fills the available horizontal space. To fill the vertical space allocated by its container, set the <code>data-height-style</code> option to <code>"fill"</code>, and the script will automatically set the dimensions of the accordion to the height of its parent container.</p> |
| 76 | + |
77 | 77 | <div data-demo-html="true"> |
78 | 78 | <div style="height: 200px; width: 50%;"> |
79 | 79 | <div data-role="accordion" data-height-style="fill"> |
|
114 | 114 | </div><!--/demo-html --> |
115 | 115 |
|
116 | 116 | <h2>No Auto Height</h2> |
117 | | - <p>Setting <code>data-height-style: "content"</code> allows the accordion panels to keep their native height.</p> |
| 117 | + <p>Setting <code>data-height-style="content"</code> allows the accordion panels to keep their native height.</p> |
| 118 | + |
118 | 119 | <div data-demo-html="true"> |
119 | 120 | <div data-role="accordion" data-height-style="content"> |
120 | 121 | <h3>Section 1</h3> |
|
153 | 154 | </div><!--/demo-html --> |
154 | 155 |
|
155 | 156 | <h2>Collapse Content</h2> |
156 | | - <p>By default, accordions always keep one section open. To allow for all sections to be be collapsible, set the <code>data-collapsible</code> option to true. Click on the currently open section to collapse its content pane.</p> |
| 157 | + <p>By default, accordions always keep one section open. To allow for all sections to be be collapsible, set the <code>data-collapsible</code> option to <code>true</code>. Click on the currently open section to collapse its content pane.</p> |
157 | 158 |
|
158 | 159 | <div data-demo-html="true"> |
159 | 160 | <div data-role="accordion" data-collapsible="true"> |
|
192 | 193 | </div> |
193 | 194 | </div><!--/demo-html --> |
194 | 195 |
|
195 | | - <h2>Custon Icons</h2> |
196 | | - <p>You can add or remove icons with the <code>data-icons</code> option, which accepts classes for the header's default and active (open) state. Use any class from jQuery Mobile, or create custom classes with background images</p> |
| 196 | + <h2>Custom Icons</h2> |
| 197 | + <p>You can add or remove icons with the <code>data-icons</code> option, which accepts classes for the header's default and active (open) state. Use any class from jQuery Mobile, or create custom classes with background images.</p> |
197 | 198 |
|
198 | 199 | <h3>Icons</h3> |
199 | | - <div data-demo-html="true"> |
200 | 200 |
|
201 | | - <div data-role="accordion" data-icons='{ "header": "ui-icon-arrow-d-r", "activeHeader": "ui-icon-star"}'> |
| 201 | + <div data-demo-html="true"> |
| 202 | + <div data-role="accordion" data-icons='{ "header": "ui-icon-arrow-d-r", "activeHeader": "ui-icon-star" }'> |
202 | 203 | <h3>Section 1</h3> |
203 | 204 | <div> |
204 | 205 | <p> |
|
235 | 236 | </div><!--/demo-html --> |
236 | 237 |
|
237 | 238 | <h3>No Icons</h3> |
238 | | - <div data-demo-html="true"> |
239 | 239 |
|
| 240 | + <div data-demo-html="true"> |
240 | 241 | <div data-role="accordion" data-icons=""> |
241 | 242 | <h3>Section 1</h3> |
242 | 243 | <div> |
|
278 | 279 | <p>Customize the theme with the <code>data-theme</code> option.</p> |
279 | 280 |
|
280 | 281 | <div data-demo-html="true"> |
281 | | - |
282 | 282 | <div data-role="accordion" data-theme="b"> |
283 | 283 | <h3>Section 1</h3> |
284 | 284 | <div> |
|
318 | 318 |
|
319 | 319 | <?php include( '../jqm-navmenu.php' ); ?> |
320 | 320 |
|
321 | | - <div data-role="footer" data-position="fixed" data-tap-toggle="false" class="jqm-footer"> |
| 321 | + <div data-role="toolbar" data-type="footer" data-position="fixed" data-tap-toggle="false" class="jqm-footer"> |
322 | 322 | <p>jQuery Mobile Demos version <span class="jqm-version"></span></p> |
323 | | - <p>Copyright The jQuery Foundation</p> |
| 323 | + <p>Copyright jQuery Foundation</p> |
324 | 324 | </div><!-- /footer --> |
325 | 325 |
|
326 | 326 | <?php include( '../jqm-search.php' ); ?> |
|
0 commit comments