mirror of
https://github.com/Hopiu/jquery-mobile.git
synced 2026-03-16 22:10:25 +00:00
re-vamped and simplied content docs
This commit is contained in:
Todd Parker
parent
3150f40064
commit
e8b3a96783
7 changed files with 285 additions and 152 deletions
|
|
@ -1,27 +0,0 @@
|
|||
<!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>to do</p>
|
||||
|
||||
|
||||
|
||||
</div><!-- /content -->
|
||||
</div><!-- /page -->
|
||||
|
||||
</body>
|
||||
</html>
|
||||
107
docs/content/content-collapsible.html
Executable file
107
docs/content/content-collapsible.html
Executable file
|
|
@ -0,0 +1,107 @@
|
|||
<!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>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 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>
|
||||
|
||||
<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 -->
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</div><!-- /content -->
|
||||
</div><!-- /page -->
|
||||
|
||||
</body>
|
||||
</html>
|
||||
93
docs/content/content-grids.html
Executable file
93
docs/content/content-grids.html
Executable file
|
|
@ -0,0 +1,93 @@
|
|||
<!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>Layout grids</h1>
|
||||
</div><!-- /header -->
|
||||
|
||||
<div data-role="content">
|
||||
|
||||
<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. </p>
|
||||
<p>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. Grids are 100% width, completely invisible (no borders or backgrounds) and don't have padding or margins so they shouldn't interfere with the styles of elements palced inside them.</p>
|
||||
|
||||
<h2>Two column grids</h2>
|
||||
<p>To build a two 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><strong>Note:</strong> that we've added a height and color swatches to the grid blocks so you can see them but these don't have any appearance by default.</p>
|
||||
|
||||
<div class="ui-grid-a">
|
||||
<div class="ui-block-a"><div class="ui-bar ui-bar-e" style="height:120px">Block A</div></div>
|
||||
<div class="ui-block-b"><div class="ui-bar ui-bar-e" style="height:120px">Block B</div></div>
|
||||
</div><!-- /grid-a -->
|
||||
|
||||
<p>Here is a more realistic example with text inside:</p>
|
||||
|
||||
<div class="ui-grid-a">
|
||||
<div class="ui-block-a"><strong>I'm block-b</strong> and text inside will wrap.</div>
|
||||
<div class="ui-block-b"><strong>I'm block-b</strong> and text inside will wrap.</div>
|
||||
</div><!-- /grid-a -->
|
||||
|
||||
<p>The grid classes can be applied to any container. In this example, we've added <code>grid-a</code> to a <code>fieldset</code> to make the two button inside stretch to 50% of the screen width:</p>
|
||||
|
||||
<pre><code>
|
||||
<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>
|
||||
</code></pre>
|
||||
|
||||
<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>
|
||||
|
||||
<h2>Three column grids</h2>
|
||||
<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-e" style="height:120px">Block A</div></div>
|
||||
<div class="ui-block-b"><div class="ui-bar ui-bar-e" style="height:120px">Block B</div></div>
|
||||
<div class="ui-block-c"><div class="ui-bar ui-bar-e" style="height:120px">Block C</div></div>
|
||||
</div><!-- /grid-a -->
|
||||
|
||||
<p>And an example of a 3 column grid with buttons inside:</p>
|
||||
|
||||
<fieldset class="ui-grid-b">
|
||||
<div class="ui-block-a"><button type="submit" data-theme="c">Nope</button></div>
|
||||
<div class="ui-block-b"><button type="submit" data-theme="a">Maybe</button></div>
|
||||
<div class="ui-block-b"><button type="submit" data-theme="b">Yes</button></div>
|
||||
</fieldset>
|
||||
|
||||
|
||||
</div><!-- /content -->
|
||||
</div><!-- /page -->
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -20,13 +20,19 @@
|
|||
|
||||
<style type="text/css">
|
||||
table { width:100%; }
|
||||
table caption { text-align:left; font-weight:bold; }
|
||||
table thead th { border-bottom:1px solid #999; border-top:1px solid #999; }
|
||||
table th, td { border-bottom:1px solid #ccc; padding:6px;}
|
||||
table caption { text-align:left; }
|
||||
table thead th { text-align:left; border-bottom-width:1px; border-top-width:1px; }
|
||||
table th, td { text-align:left; padding:6px;}
|
||||
</style>
|
||||
|
||||
|
||||
<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. Here is what standard HTML markup looks like by default:</p>
|
||||
|
||||
|
||||
<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. </p>
|
||||
<p>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.</p>
|
||||
|
||||
<h2>Default HTML markup styling for content areas</h2>
|
||||
<hr>
|
||||
|
||||
<h1>H1 Heading</h1>
|
||||
<h2>H2 Heading</h2>
|
||||
|
|
@ -41,6 +47,8 @@
|
|||
|
||||
<p>This is another paragraph of text so you can see how HTML markup works in content. This is another paragraph of text so you can see how HTML markup works in content. This is another paragraph of text so you can see how HTML markup works in content.</p>
|
||||
|
||||
<p>We add a few styles to <code>tables</code> and <code>fieldsets</code> to make them more legible but these are easily overridden with customs styles.</p>
|
||||
|
||||
<ul>
|
||||
<li>Unordered list item 1</li>
|
||||
<li>Unordered list item 1</li>
|
||||
|
|
@ -63,7 +71,7 @@
|
|||
|
||||
|
||||
<table summary="This table lists all the JetBlue flights.">
|
||||
<caption>Flight Schedule</caption>
|
||||
<caption>Travel Itinerary</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col">Flight:</th>
|
||||
|
|
|
|||
|
|
@ -16,11 +16,74 @@
|
|||
|
||||
<div data-role="content">
|
||||
|
||||
<h2>Theming</h2>
|
||||
|
||||
<p>To do...</p>
|
||||
|
||||
<h2>Theming the content area</h2>
|
||||
<p>The main content area of a page (container with the <code>data-role="content"</code> attribute) can be themed by adding the <code>data-theme</code> attribute to the <code>data-role="page"</code> container to ensure that the background colors are applied to the full page, regardless of the content length. If you add to the <code>data-theme</code> to the content container, the background color will stop after the content so there may be a gap in color between the content and fixed footer.</p>
|
||||
|
||||
<code>
|
||||
<div data-role="page" <strong>data-theme="a"</strong>>
|
||||
</code>
|
||||
<h2>Theming collapsible blocks</h2>
|
||||
<p>To set the color of the collapsible header, add the <code>data-theme</code> attribute to the collapsible container. The icon and body aren't currently themable through data attributes but can be styled directly with custom css.</p>
|
||||
|
||||
<code>
|
||||
<div data-role="collapsible" data-state="collapsed" <strong>data-theme="a"></strong>
|
||||
</code>
|
||||
<h2>Themed examples</h2>
|
||||
|
||||
<p><strong>A</strong> theme swatch on content & collapsible</p>
|
||||
<div class="ui-body ui-body-a">
|
||||
<h1>H1 Heading</h1>
|
||||
<p>This is a paragraph that contains <strong>strong</strong>, <em>emphasized</em> and <a href="index.html">linked</a> text. Here is more text so you can see how HTML markup works in content. Here is more text so you can see how HTML markup works in content.</p>
|
||||
<div data-role="collapsible" data-state="collapsed" data-theme="a">
|
||||
<h3>I'm an themed collapsible</h3>
|
||||
<p>I have <code>data-theme</code> attribute set manually on my container to set the color to match the content block I'm in. </p>
|
||||
</div><!-- /collapsible -->
|
||||
</div><!-- /themed container -->
|
||||
|
||||
<p><strong>B</strong> theme swatch on content & collapsible</p>
|
||||
<div class="ui-body ui-body-b">
|
||||
<h1>H1 Heading</h1>
|
||||
<p>This is a paragraph that contains <strong>strong</strong>, <em>emphasized</em> and <a href="index.html">linked</a> text. Here is more text so you can see how HTML markup works in content. Here is more text so you can see how HTML markup works in content.</p>
|
||||
<div data-role="collapsible" data-state="collapsed" data-theme="b">
|
||||
<h3>I'm an themed collapsible</h3>
|
||||
<p>I have <code>data-theme</code> attribute set manually on my container to set the color to match the content block I'm in. </p>
|
||||
</div><!-- /collapsible -->
|
||||
</div><!-- /themed container -->
|
||||
|
||||
<p><strong>C</strong> theme swatch on content & collapsible</p>
|
||||
<div class="ui-body ui-body-c">
|
||||
<h1>H1 Heading</h1>
|
||||
<p>This is a paragraph that contains <strong>strong</strong>, <em>emphasized</em> and <a href="index.html">linked</a> text. Here is more text so you can see how HTML markup works in content. Here is more text so you can see how HTML markup works in content.</p>
|
||||
<div data-role="collapsible" data-state="collapsed" data-theme="c">
|
||||
<h3>I'm an themed collapsible</h3>
|
||||
<p>I have <code>data-theme</code> attribute set manually on my container to set the color to match the content block I'm in. </p>
|
||||
</div><!-- /collapsible -->
|
||||
</div><!-- /themed container -->
|
||||
|
||||
<p><strong>D</strong> theme swatch on content & collapsible</p>
|
||||
<div class="ui-body ui-body-d">
|
||||
<h1>H1 Heading</h1>
|
||||
<p>This is a paragraph that contains <strong>strong</strong>, <em>emphasized</em> and <a href="index.html">linked</a> text. Here is more text so you can see how HTML markup works in content. Here is more text so you can see how HTML markup works in content.</p>
|
||||
<div data-role="collapsible" data-state="collapsed" data-theme="d">
|
||||
<h3>I'm an themed collapsible</h3>
|
||||
<p>I have <code>data-theme</code> attribute set manually on my container to set the color to match the content block I'm in. </p>
|
||||
</div><!-- /collapsible -->
|
||||
</div><!-- /themed container -->
|
||||
|
||||
<p><strong>E</strong> theme swatch on content & collapsible</p>
|
||||
<div class="ui-body ui-body-e">
|
||||
<h1>H1 Heading</h1>
|
||||
<p>This is a paragraph that contains <strong>strong</strong>, <em>emphasized</em> and <a href="index.html">linked</a> text. Here is more text so you can see how HTML markup works in content. Here is more text so you can see how HTML markup works in content.</p>
|
||||
<div data-role="collapsible" data-state="collapsed" data-theme="e">
|
||||
<h3>I'm an themed collapsible</h3>
|
||||
<p>I have <code>data-theme</code> attribute set manually on my container to set the color to match the content block I'm in. </p>
|
||||
</div><!-- /collapsible -->
|
||||
</div><!-- /themed container -->
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</div><!-- /content -->
|
||||
</div><!-- /page -->
|
||||
|
|
|
|||
|
|
@ -1,105 +0,0 @@
|
|||
<!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>
|
||||
|
|
@ -11,25 +11,19 @@
|
|||
<div data-role="page" data-theme="b">
|
||||
|
||||
<div data-role="header">
|
||||
<h1>Content formatting elements</h1>
|
||||
<h1>Content formatting</h1>
|
||||
</div><!-- /header -->
|
||||
|
||||
<div data-role="content">
|
||||
<p>The contents of the page can be anything you want and we designed the styes to respect standard HTML formatting.</p>
|
||||
<p>The contents of the page are completely open-ended but jQuery Mobile provides a number of helpful tools and widgets such as collapsible panels and multiple-column grid layouts to make it easy to format your content for mobile devices.</p>
|
||||
|
||||
|
||||
<ul data-role="listview" data-inset="true">
|
||||
<li data-role="list-divider">Documentation</li>
|
||||
<li><a href="docs-content.html">Content basics</a></li>
|
||||
<li><a href="api-content.html">API documentation</a></li>
|
||||
<li><a href="content-themes.html">Theming content</a></li>
|
||||
</ul>
|
||||
|
||||
<ul data-role="listview" data-inset="true">
|
||||
<li data-role="list-divider">Content formatting examples</li>
|
||||
<li><a href="content-html.html">Basic HTML styles</a></li>
|
||||
|
||||
<li><a href="content-all.html">Basic content formatting</a></li>
|
||||
<li><a href="content-grids.html">Layout grids (columns)</a></li>
|
||||
<li><a href="content-collapsible.html">Collapsible content blocks</a></li>
|
||||
<li><a href="content-themes.html">Theming content</a></li>
|
||||
<li><a href="api-content.html">API documentation</a></li>
|
||||
</ul>
|
||||
</div><!-- /ui-body wrapper -->
|
||||
</div><!-- /page -->
|
||||
|
|
|
|||
Loading…
Reference in a new issue