mirror of
https://github.com/Hopiu/jquery-mobile.git
synced 2026-03-18 23:10:24 +00:00
161f5e6ae3
This makes our include model match the include model on the CDN, and allows devs to make use of mobileinit for debugging some of the samples since that must be set up after jquery.js, but before jquery-mobile.
140 lines
No EOL
6 KiB
HTML
Executable file
140 lines
No EOL
6 KiB
HTML
Executable file
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<title>jQuery Mobile Docs - Content formatting</title>
|
|
<link rel="stylesheet" href="../../themes/default/" />
|
|
<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
|
|
<script type="text/javascript" src="../../js/jquery.js"></script>
|
|
<script type="text/javascript" src="../../js/"></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>
|
|
</code></pre>
|
|
|
|
|
|
<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-collapsed="true"</code> attribute to the wrapper.</p>
|
|
|
|
<code>
|
|
<div data-role="collapsible" <strong>data-collapsed="true"></strong>
|
|
</code>
|
|
|
|
<p>This code will create a collapsible widget like this:</p>
|
|
|
|
|
|
<div data-role="collapsible" data-collapsed="true">
|
|
<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-collapsed="true">
|
|
<h3>Section 1: Collapsed text block</h3>
|
|
<p>I'm closed when the page loads because I have the <code>data-collapsed="true"</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-collapsed="true"</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 -->
|
|
|
|
<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 -->
|
|
|
|
<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-collapsed="true">
|
|
<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-collapsed="true">
|
|
<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> |