Hopiu/jquery-mobile
1
0
Fork 0
mirror of https://github.com/Hopiu/jquery-mobile.git synced 2026-05-02 20:04:43 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Added doc/sample for data-content-theme

Browse source
This commit is contained in:
gseguin 2011-09-22 09:49:36 -07:00
parent 46e6c6b320
commit 1692c0f378
2 changed files with 27 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
docs/content/content-collapsible-set.html
View file

@ -72,6 +72,25 @@
</div>
</div>
<p>Here is an example of a collapsible with 3 sections and <code>data-content-theme</code> set</p>
<div data-role="collapsible-set" data-content-theme="c">
<div data-role="collapsible" data-collapsed="false">
<h3>Section F</h3>
<p>I'm the collapsible content in a set so this feels like an accordion. I'm hidden by default because I have the "collapsed" state; you need to expand the header to see me.</p>
</div>
<div data-role="collapsible">
<h3>Section G</h3>
<p>I'm the collapsible content in a set so this feels like an accordion. I'm hidden by default because I have the "collapsed" state; you need to expand the header to see me.</p>
</div>
<div data-role="collapsible">
<h3>Section H</h3>
<p>I'm the collapsible content in a set so this feels like an accordion. I'm hidden by default because I have the "collapsed" state; you need to expand the header to see me.</p>
</div>
</div>
</div><!--/content-primary -->

9
docs/content/content-collapsible.html
View file

@ -25,7 +25,9 @@
<h2>Collapsible content markup</h2>
<p>To create a collapsible blocks of content, create a container and add the <code> data-role="collapsible"</code> attribute.</p>
<p>Using <code>data-content-theme</code> attribute allows you to set a theme for the content of the collapsible.</p>
<p>Directly inside this container, add any header element (H1-H6). The framework will style the header to look like a clickable button and add a "+" icon to the left to indicate it's expandable.</p>
<p>After the header, add any HTML markup you want to be collapsible. The framework will wrap this markup in a container that will be hidden/shown when the heading is clicked.</p>
@ -106,6 +108,11 @@
<li><a href="index.html">Ford</a></li>
</ul>
</div><!-- /section 4 -->
<div data-role="collapsible" data-theme="c" data-content-theme="c">
<h3>Section 5: themed content</h3>
<p>I have <code>data-content-theme</code> attribute set manually on my container to set the color to match the content block I'm in. </p>
</div><!-- /section 5 -->
<h2>Nested Collapsibles</h2>
<div data-role="collapsible">