mirror of
https://github.com/Hopiu/jquery-mobile.git
synced 2026-03-17 06:20:26 +00:00
137 lines
No EOL
5.9 KiB
HTML
Executable file
137 lines
No EOL
5.9 KiB
HTML
Executable file
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>jQuery Mobile Docs - Content formatting</title>
|
|
<link rel="stylesheet" href="../../themes/default" />
|
|
<script type="text/javascript" src="../../js/all"></script>
|
|
|
|
|
|
</head>
|
|
<body>
|
|
|
|
<div data-role="page">
|
|
|
|
<div data-role="header">
|
|
<h1>Collapsible content</h1>
|
|
</div><!-- /header -->
|
|
|
|
<div data-role="content">
|
|
|
|
<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>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 open and displayed on the page, but you can click the header to hide me.</p>
|
|
</div>
|
|
</pre></code>
|
|
|
|
|
|
<div data-role="collapsible">
|
|
<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>
|
|
|
|
|
|
<p>As the example notes, by default the content will be expanded. To collapse the content when the page loads, add the <code>data-state="collapsed"</code> attribute to the wrapper.</p>
|
|
|
|
<code>
|
|
<div data-role="collapsible" <strong>data-state="collapsed"></strong>
|
|
</code>
|
|
|
|
<p>This code will create a collapsible widget like this:</p>
|
|
|
|
|
|
<div data-role="collapsible" data-state="collapsed">
|
|
<h3>I'm a header</h3>
|
|
<p>I'm the collapsible content. I'm hidden by default because I have the "collapsed" state; you need to expand the header to see 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>
|
|
|
|
<h2>Collapsible example</h2>
|
|
<p>This page has 4 collapsible containers with different types of content inside.</p>
|
|
|
|
<div data-role="collapsible" data-state="collapsed">
|
|
<h3>Section 1: Collapsed text block</h3>
|
|
<p>I'm closed when the page loads because I have the <code>data-state="collapsed"</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. I'm the collapsible content. </p>
|
|
</div><!-- /section 1 -->
|
|
|
|
<div data-role="collapsible">
|
|
<h3>Section 2: Expanded on load</h3>
|
|
<p>I'm open when the page loads because I don't have the <code>data-state="collapsed"</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-state="collapsed">
|
|
<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 -->
|
|
|
|
<div data-role="collapsible" data-state="collapsed">
|
|
<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 -->
|
|
|
|
<h2>Nested Collapsibles</h2>
|
|
<div data-role="collapsible">
|
|
<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">
|
|
<h3>I'm a nested collapsible 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>
|
|
</div>
|
|
|
|
<h2>Collapsible sets</h2>
|
|
<p>By giving a parent element a data-role of collapsible-set, you can cause other collapsibles within that parent to close whenever a new one is opened, acting like an accordion widget:</p>
|
|
|
|
<div data-role="collapsible-set">
|
|
<div data-role="collapsible">
|
|
<h3>I'm a header in a set of collapsibles</h3>
|
|
<p>I'm the collapsible content. 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" data-state="collapsed">
|
|
<h3>I'm a header in a set of collapsibles</h3>
|
|
<p>I'm the collapsible content. 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" data-state="collapsed">
|
|
<h3>I'm a header in a set of collapsibles</h3>
|
|
<p>I'm the collapsible content. 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 -->
|
|
</div><!-- /page -->
|
|
|
|
</body>
|
|
</html> |