mirror of
https://github.com/Hopiu/jquery-mobile.git
synced 2026-04-13 10:51:02 +00:00
105 lines
No EOL
5.1 KiB
HTML
Executable file
105 lines
No EOL
5.1 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" data-role="button" data-icon="arrow-r" data-iconpos="right">Default HTML rendering example</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 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.</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>
|
|
|
|
<a href="content-collapsible.html" data-role="button" data-icon="arrow-r" data-iconpos="right">Collapsible examples</a>
|
|
|
|
|
|
<h2>Multi-column grids</h2>
|
|
|
|
<p>On a mobile device, using multiple column layouts isn't generally recommended because of the narrow screen width but there are times where you may need to place buttons or other small elements side-by-side.The framework provides a simple way to build CSS based columns through the <code>grid</code> block styles. Grids have preset configurations for 2- and 3-column layouts that can be used in any situation that requires columns. The grids don't have any padding, margins, borders or background colors -- they are invisible.</p>
|
|
|
|
<p>To build a 2 column (50/50%) layout, start with a container with a <code>class</code> of <code>ui-grid-a</code> and add two child containers inside that are classed with <code>ui-block-a</code> for the first column and <code>ui-block-b</code> for the second.</p>
|
|
|
|
<pre><code>
|
|
<div class="ui-grid-a">
|
|
<div class="ui-block-a">Block A</div>
|
|
<div class="ui-block-b">Block B</div>
|
|
</div><!-- /grid-a -->
|
|
</code></pre>
|
|
<p>This will produce a 50/50% grid for our content. (Note that we've added color swatches to the boxes so you can see them)</p>
|
|
|
|
<div class="ui-grid-a">
|
|
<div class="ui-block-a"><div class="ui-bar ui-bar-c">Block A</div></div>
|
|
<div class="ui-block-b"><div class="ui-bar ui-bar-c">Block B</div></div>
|
|
</div><!-- /grid-a -->
|
|
|
|
<p>There is a second grid for a 3 column layout (33/33/33%) that is similar in structure but uses <code>class=grid-b</code> on the parent and 3 child wrappers, each with <code>block-a/b/c</code> for the column child containers.</p>
|
|
|
|
<pre><code>
|
|
<div class="ui-grid-a">
|
|
<div class="ui-block-a">Block A</div>
|
|
<div class="ui-block-b">Block B</div>
|
|
<div class="ui-block-c">Block C</div>
|
|
</div><!-- /grid-a -->
|
|
</code></pre>
|
|
|
|
<p>This will produce a 33/33/33% grid for our content.</p>
|
|
|
|
<div class="ui-grid-b">
|
|
<div class="ui-block-a"><div class="ui-bar ui-bar-c">Block A</div></div>
|
|
<div class="ui-block-b"><div class="ui-bar ui-bar-c">Block B</div></div>
|
|
<div class="ui-block-c"><div class="ui-bar ui-bar-c">Block C</div></div>
|
|
</div><!-- /grid-a -->
|
|
|
|
<a href="content-collapsible.html" data-role="button" data-icon="arrow-r" data-iconpos="right">Grid examples</a>
|
|
|
|
</div><!-- /content -->
|
|
</div><!-- /page -->
|
|
|
|
</body>
|
|
</html> |