mirror of
https://github.com/Hopiu/jquery-mobile.git
synced 2026-03-24 18:00:28 +00:00
67 lines
No EOL
2.6 KiB
HTML
Executable file
67 lines
No EOL
2.6 KiB
HTML
Executable file
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>jQuery Mobile Docs - Content formatting</title>
|
|
<link rel="stylesheet" href="../../css/all" />
|
|
<script type="text/javascript" src="../../js/all"></script>
|
|
<script type="text/javascript" src="../docs/docs.js"></script>
|
|
</head>
|
|
<body>
|
|
|
|
<div data-role="page">
|
|
|
|
<div data-role="header">
|
|
<h1>Content formatting</h1>
|
|
</div><!-- /header -->
|
|
|
|
<div data-role="content">
|
|
|
|
<p>jQuery Mobile provides a number of tools and widgets to help you format content for mobile.</p>
|
|
|
|
<h2>HTML markup</h2>
|
|
|
|
<p>Our goal is to leave the main content area pretty much unstyled except for adding in a bit of padding and applying the theme font family and color. We don't use CSS resets or a lot of custom styles because standard HTML markup is provides a lot of visual texture out of the box. By taking a light hand with content styling, it gives designers and developers a clean slate to work with instead of fighting against a lot of complex styles. Here is what standard HTML markup looks like by default:</p>
|
|
|
|
<a href="content-html.html">View default HTML rendering</a>
|
|
|
|
<h2>Collapsible panels</h2>
|
|
|
|
<p>To create a collapsible block 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 heading, add any HTML markup you want to be collapsible. The framework will wrap all this markup in a container that will be hidden or 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.</p>
|
|
</div>
|
|
</pre></code>
|
|
|
|
|
|
<p>By default, the content will be expaneded. 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 will create this widget:</p>
|
|
|
|
|
|
<div data-role="collapsible" data-state="collapsed">
|
|
<h3>I'm a header</h3>
|
|
<p>I'm the collapsible content.</p>
|
|
</div>
|
|
|
|
<p>The collapsible content is minimally styled -- we just add a bit of margin between the bar and content but you can add custom styles to tweak the appearance of the collapsible container or heading button.</p>
|
|
|
|
|
|
<h2>Multi-column grids</h2>
|
|
|
|
|
|
</div><!-- /content -->
|
|
</div><!-- /page -->
|
|
|
|
</body>
|
|
</html> |