mirror of
https://github.com/Hopiu/jquery-mobile.git
synced 2026-03-30 12:40:30 +00:00
141 lines
No EOL
4.4 KiB
HTML
Executable file
141 lines
No EOL
4.4 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 intsead of fighting against a lot of complex styles. Here is what standard HTML markup looks like by default:</p>
|
|
|
|
<h1>H1 Heading</h1>
|
|
<h2>H2 Heading</h2>
|
|
<h3>H3 Heading</h3>
|
|
<h4>H4 Heading</h4>
|
|
<h5>H5 Heading</h5>
|
|
<h6>H1 Heading</h6>
|
|
|
|
<p>This is a paragraph that contains <strong>strong</strong>, <em>emphasized</em> and <a href="index.html">linked</a> text.</p>
|
|
|
|
<blockquote>How about some blockquote action with a <cite>cite</cite></blockquote>
|
|
|
|
<p>This is another paragraph of text so you can see how HTML markup works in content.</p>
|
|
|
|
|
|
|
|
|
|
<table summary="This table lists all the flights by XYZ Air leaving London today.">
|
|
<caption>Flight Schedule</caption>
|
|
<thead>
|
|
<tr>
|
|
<th scope="col">Flight:</th>
|
|
<th scope="col">From:</th>
|
|
<th scope="col">To:</th>
|
|
<th scope="col">Departure:</th>
|
|
<th scope="col">Arrival:</th>
|
|
</tr>
|
|
</thead>
|
|
<tfoot>
|
|
<tr>
|
|
<td colspan="5">Total: 3 flights</td>
|
|
</tr>
|
|
</tfoot>
|
|
<tbody>
|
|
<tr>
|
|
<th scope="row">JetBlue 983</th>
|
|
<td>Boston (BOS)</td>
|
|
<td>New York (JFK)</td>
|
|
<td>6:30am</td>
|
|
<td>9:48am</td>
|
|
</tr>
|
|
<tr>
|
|
<th scope="row">JetBlue 354</th>
|
|
<td>Boston (BOS)</td>
|
|
<td>Los Angeles (LAX)</td>
|
|
<td>6:30am</td>
|
|
<td>9:48am</td>
|
|
</tr>
|
|
<tr>
|
|
<th scope="row">JetBlue 465</th>
|
|
<td>Boston (BOS)</td>
|
|
<td>Portland (PDX)</td>
|
|
<td>6:30am</td>
|
|
<td>9:48am</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
<ul>
|
|
<li>Unordered list item 1</li>
|
|
<li>Unordered list item 1</li>
|
|
<li>Unordered list item 1</li>
|
|
</ul>
|
|
|
|
<ul>
|
|
<li>Ordered list item 1</li>
|
|
<li>Ordered list item 1</li>
|
|
<li>Ordered list item 1</li>
|
|
</ul>
|
|
|
|
<dl title="Definition list">
|
|
<dt>Definition term</dt>
|
|
<dd>I'm the definition text</dd>
|
|
<dt>Definition term</dt>
|
|
<dd>I'm the definition text</dd>
|
|
</ll>
|
|
|
|
<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> |