mirror of
https://github.com/Hopiu/jquery-mobile.git
synced 2026-04-11 09:51:01 +00:00
Merge remote branch 'origin/master'
This commit is contained in:
scottjehl
commit
fdc48805e9
2 changed files with 156 additions and 96 deletions
|
|
@ -28,19 +28,19 @@
|
|||
<p>By default, all the sections will be collapsed. To set a section to be open when the page loads, add the <code> data-collapsed="false"</code> attribute to the heading of the section you want expanded.</p>
|
||||
|
||||
<pre><code>
|
||||
<div data-role="collapsible-set">
|
||||
<strong><div data-role="collapsible-set"></strong>
|
||||
|
||||
<div data-role="collapsible" data-collapsed="false">
|
||||
<h3>Section A</h3>
|
||||
<div data-role="collapsible" <strong>data-collapsed="false"</strong>>
|
||||
<h3>Section 1</h3>
|
||||
<p>I'm the collapsible set content for section B.</p>
|
||||
</div>
|
||||
|
||||
<div data-role="collapsible">
|
||||
<h3>Section B</h3>
|
||||
<h3>Section 2</h3>
|
||||
<p>I'm the collapsible set content for section B.</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<strong></div></strong>
|
||||
</code></pre>
|
||||
|
||||
|
||||
|
|
@ -48,47 +48,73 @@
|
|||
|
||||
<div data-role="collapsible-set">
|
||||
<div data-role="collapsible" data-collapsed="false">
|
||||
<h3>Section A</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>
|
||||
<h3>Section 1</h3>
|
||||
<p>I'm the collapsible content in a set so this feels like an accordion. I'm open by default because I have the <code>data-collapsed="false"</code> attribute.</p>
|
||||
</div>
|
||||
<div data-role="collapsible">
|
||||
<h3>Section B</h3>
|
||||
<h3>Section 2</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 C</h3>
|
||||
<h3>Section 3</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 D</h3>
|
||||
<h3>Section 4</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 E</h3>
|
||||
<h3>Section 5</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>
|
||||
|
||||
<p>Here is an example of a collapsible with 3 sections and <code>data-content-theme</code> set</p>
|
||||
<h2>Theming collapsible content</h2>
|
||||
<p>The standard <code>data-theme</code> attribute can be used to set the color of each collapsible in a set. To provide a clearer visual grouping of the content with the headers, add the <code>data-content-theme</code> attribute with a swatch letter. This adds a themed background color and border to the content block. For consistent theming, add these attributes to the parent collapsible set.</p>
|
||||
|
||||
|
||||
<pre><code>
|
||||
<div data-role="collapsible-set" <strong>data-theme="c" data-content-theme="d"</strong>>
|
||||
</code></pre>
|
||||
|
||||
|
||||
<div data-role="collapsible-set" data-theme="c" data-content-theme="d">
|
||||
<div data-role="collapsible">
|
||||
<h3>Section 1</h3>
|
||||
<p>Collapsible content</p>
|
||||
</div>
|
||||
<div data-role="collapsible">
|
||||
<h3>Section 2</h3>
|
||||
<p>Collapsible content</p>
|
||||
|
||||
</div>
|
||||
<div data-role="collapsible">
|
||||
<h3>Section 3</h3>
|
||||
<p>Collapsible content</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<h2>Theming individual sections</h2>
|
||||
<p>To have individual sections in a group styled differently, add <code>data-theme</code> and <code>data-content-theme</code> attributes to specific collapsibles.</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 data-role="collapsible" data-theme="b" data-content-theme="b">
|
||||
<h3>Section header, swatch B</h3>
|
||||
<p>Collapsible content, swatch B</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 data-role="collapsible" data-theme="a" data-content-theme="a">
|
||||
<h3>Section header, swatch A</h3>
|
||||
<p>Collapsible content, swatch A</p>
|
||||
</div>
|
||||
<div data-role="collapsible" data-theme="e" data-content-theme="d">
|
||||
<h3>Section header, swatch E</h3>
|
||||
<p>Collapsible content, swatch D</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -31,13 +31,14 @@
|
|||
<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>
|
||||
|
||||
<pre><code>
|
||||
<div data-role="collapsible">
|
||||
<h3>I'm a header</h3>
|
||||
<p>I'm the collapsible content. By default I'm closed, but you can click the header to open me.</p>
|
||||
</div>
|
||||
</code></pre>
|
||||
|
||||
<p>By default, the content will be collapsed.</p>
|
||||
<pre><code>
|
||||
<div <strong>data-role="collapsible"</strong>>
|
||||
<h3>I'm a header</h3>
|
||||
<p>I'm the collapsible content. By default I'm closed, but you can click the header to open me.</p>
|
||||
</div>
|
||||
</code></pre>
|
||||
|
||||
|
||||
<div data-role="collapsible">
|
||||
|
|
@ -45,8 +46,9 @@
|
|||
<p>I'm the collapsible content. By default I'm closed, but you can click the header to open me.</p>
|
||||
</div>
|
||||
|
||||
|
||||
<p>As the example notes, by default the content will be collapsed. To expand the content when the page loads, add the <code>data-collapsed="false"</code> attribute to the wrapper.</p>
|
||||
<h2>Expanding collapsibles on load</h2>
|
||||
|
||||
<p>To expand the content when the page loads, add the <code>data-collapsed="false"</code> attribute to the wrapper.</p>
|
||||
|
||||
<code>
|
||||
<div data-role="collapsible" <strong>data-collapsed="false"></strong>
|
||||
|
|
@ -60,71 +62,103 @@
|
|||
<p>I'm the collapsible content. I'm expanded by default because I have the "collapsed" state set to false.</p>
|
||||
</div>
|
||||
|
||||
<p>Collapsible content is minimally styled — we add only a bit of margin between the bar and content, and the header adopts the default Theme styles of the container it sits within.</p>
|
||||
|
||||
<h2>Collapsible example</h2>
|
||||
<p>This page has 5 collapsible containers with different types of content inside.</p>
|
||||
|
||||
<div data-role="collapsible">
|
||||
<h3>Section 1: Collapsed text block</h3>
|
||||
<p>I'm closed when the page loads because that's the default state of a collapsible.</p>
|
||||
<p>I'm the collapsible content. I'm the collapsible content. I'm the collapsible content. I'm the collapsible content. I'm the collapsible content. I'm the collapsible content. I'm the collapsible content. </p>
|
||||
</div><!-- /section 1 -->
|
||||
|
||||
<div data-role="collapsible" data-collapsed="false">
|
||||
<h3>Section 2: Expanded on load</h3>
|
||||
<p>I'm opened when the page loads because I have the <code>data-collapsed="false"</code> attribute on my container. </p>
|
||||
<p>I'm the collapsible content. I'm the collapsible content. I'm the collapsible content. I'm the collapsible content. I'm the collapsible content. I'm the collapsible content.</p>
|
||||
</div><!-- /section 2 -->
|
||||
|
||||
<div data-role="collapsible" data-collapsed="true">
|
||||
<h3>Section 3: Form elements</h3>
|
||||
<form action="#" method="get">
|
||||
<div data-role="fieldcontain">
|
||||
<label for="textarea">Textarea:</label>
|
||||
<textarea cols="40" rows="8" name="textarea" id="textarea"></textarea>
|
||||
</div>
|
||||
<div data-role="fieldcontain">
|
||||
<label for="slider">Input slider:</label>
|
||||
<input type="range" name="slider" id="slider" value="0" min="0" max="100" />
|
||||
</div>
|
||||
<fieldset class="ui-grid-a">
|
||||
<div class="ui-block-a"><button type="submit" data-theme="c">Cancel</button></div>
|
||||
<div class="ui-block-b"><button type="submit" data-theme="b">Submit</button></div>
|
||||
</fieldset>
|
||||
</form>
|
||||
</div><!-- /section 3 -->
|
||||
<h2>Theming collapsible content</h2>
|
||||
|
||||
<div data-role="collapsible" data-collapsed="true">
|
||||
<h3>Section 4: Collapsed list</h3>
|
||||
<ul data-role="listview" data-inset="true" data-theme="d">
|
||||
<li><a href="index.html">Acura</a></li>
|
||||
<li><a href="index.html">Audi</a></li>
|
||||
<li><a href="index.html">BMW</a></li>
|
||||
<li><a href="index.html">Cadillac</a></li>
|
||||
<li><a href="index.html">Chrysler</a></li>
|
||||
<li><a href="index.html">Dodge</a></li>
|
||||
<li><a href="index.html">Ferrari</a></li>
|
||||
<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" data-collapsed="false">
|
||||
<h3>I'm a header</h3>
|
||||
<p>I'm the collapsible content. By default I'm open and displayed on the page, but you can click the header to hide me.</p>
|
||||
<div data-role="collapsible" data-collapsed="false">
|
||||
<h3>I'm a nested collapsible header</h3>
|
||||
<p>I'm the collapsible content in a nested collapsible. By default I'm open and displayed on the page, but you can click the header to hide me.</p>
|
||||
</div>
|
||||
<p>Collapsible content is minimally styled — we add only a bit of margin between the bar and content, and the header adopts the default Theme styles of the container it sits within.</p>
|
||||
|
||||
<p>To provide a stronger visual connection between the collapsible header and content, add the <code>data-content-theme</code> attribute to the wrapper and specify a theme swatch letter. This will apply the swatch's border and <em>flat</em> background color (not the gradient) to the content block and changes the corner rounding to square off the bottom of the header and round the bottom of the content block instead to visually group these elements.</p>
|
||||
|
||||
<pre><code>
|
||||
<div data-role="collapsible" <strong>data-content-theme="c"</strong>>
|
||||
<h3>Header swatch A</h3>
|
||||
<p>I'm the collapsible content with a themed content block set to "C".</p>
|
||||
</div>
|
||||
</code></pre>
|
||||
|
||||
<div data-role="collapsible" data-content-theme="c">
|
||||
<h3>Header swatch</h3>
|
||||
<p>I'm the collapsible content with a themed content block set to "C".</p>
|
||||
</div>
|
||||
|
||||
<h2>Collapsible sets</h2>
|
||||
<h2>Theming collapsible headers</h2>
|
||||
<p>To set the theme on a collapsible header button, add the <code>data-theme</code> attribute to the wrapper and specify a swatch letter. Note that you can mix and match swatch letters between the header and content with these theme attributes.</p>
|
||||
|
||||
<pre><code>
|
||||
<div data-role="collapsible" <strong>data-theme="a" data-content-theme="a"</strong>>
|
||||
<h3>Header swatch A</h3>
|
||||
<p>I'm the collapsible content with a themed content block set to "A".</p>
|
||||
</div>
|
||||
</code></pre>
|
||||
|
||||
<div data-role="collapsible" data-theme="a" data-content-theme="a">
|
||||
<h3>Header swatch A</h3>
|
||||
<p>I'm the collapsible content with a themed content block set to "A".</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div data-role="collapsible" data-theme="b" data-content-theme="d">
|
||||
<h3>Header swatch B</h3>
|
||||
<p>I'm the collapsible content with a themed content block set to "D".</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<h2>Nested Collapsibles</h2>
|
||||
|
||||
<p>Collapsibles can be nested inside each other if needed. In this example, we're setting the content theme to provide clearer visual connection between the levels.</p>
|
||||
<div data-role="collapsible" data-collapsed="false" data-theme="e" data-content-theme="c">
|
||||
<h3>I'm a header</h3>
|
||||
<p>I'm the collapsible content. By default I'm open and displayed on the page, but you can click the header to hide me.</p>
|
||||
|
||||
<div data-role="collapsible" data-theme="c" data-content-theme="c">
|
||||
<h3>I'm a nested collapsible with a child collapsible</h3>
|
||||
<p>I'm a child collapsible.</p>
|
||||
<div data-role="collapsible" data-theme="d" data-content-theme="d">
|
||||
<h3>Nested inside again.</h3>
|
||||
<p>Three levels deep now.</p>
|
||||
</div><!-- /section 1A -->
|
||||
</div><!-- /section 1 -->
|
||||
|
||||
|
||||
<div data-role="collapsible" data-content-theme="c">
|
||||
<h3>Section 3: Form elements</h3>
|
||||
<form action="#" method="get">
|
||||
<div data-role="fieldcontain">
|
||||
<label for="textarea">Textarea:</label>
|
||||
<textarea cols="40" rows="8" name="textarea" id="textarea"></textarea>
|
||||
</div>
|
||||
<div data-role="fieldcontain">
|
||||
<label for="slider">Input slider:</label>
|
||||
<input type="range" name="slider" id="slider" value="0" min="0" max="100" />
|
||||
</div>
|
||||
<fieldset class="ui-grid-a">
|
||||
<div class="ui-block-a"><button type="submit" data-theme="c">Cancel</button></div>
|
||||
<div class="ui-block-b"><button type="submit" data-theme="b">Submit</button></div>
|
||||
</fieldset>
|
||||
</form>
|
||||
</div><!-- /section 2 -->
|
||||
|
||||
<div data-role="collapsible" data-content-theme="c">
|
||||
<h3>Section 4: Collapsed list</h3>
|
||||
<p>Here is an inset list:</p>
|
||||
<ul data-role="listview" data-inset="true" data-theme="d">
|
||||
<li><a href="index.html">Acura</a></li>
|
||||
<li><a href="index.html">Audi</a></li>
|
||||
<li><a href="index.html">BMW</a></li>
|
||||
<li><a href="index.html">Cadillac</a></li>
|
||||
<li><a href="index.html">Chrysler</a></li>
|
||||
<li><a href="index.html">Dodge</a></li>
|
||||
<li><a href="index.html">Ferrari</a></li>
|
||||
<li><a href="index.html">Ford</a></li>
|
||||
</ul>
|
||||
</div><!-- /section 3 -->
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<h2>Collapsible sets (accordions)</h2>
|
||||
<p>It's possible to combine multiple collapsibles into a grouped sets that acts like an accordion widget. <a href="content-collapsible-set.html">Learn more</a></p>
|
||||
|
||||
|
||||
|
|
@ -141,13 +175,13 @@
|
|||
<li data-role="list-divider">Content Formatting</li>
|
||||
<li><a href="content-html.html">Basic HTML styles</a></li>
|
||||
<li><a href="content-grids.html">Layout grids (columns)</a></li>
|
||||
<li data-theme="a"><a href="content-collapsible.html">Collapsible content blocks</a></li>
|
||||
<li><a href="content-collapsible-set.html">Collapsible sets (accordions)</a></li>
|
||||
<li><a href="content-collapsible.html">Collapsible content blocks</a></li>
|
||||
<li data-theme="a"><a href="content-collapsible-set.html">Collapsible sets (accordions)</a></li>
|
||||
<li><a href="content-themes.html">Theming content</a></li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div><!-- /content -->
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue