Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

Added two pane layout for all landing pages with better intro content

  • Loading branch information...
commit df5753248518216d0000e97927002ceb98c267c1 1 parent 2c08a3c
@toddparker toddparker authored
View
46 docs/buttons/index.html
@@ -14,30 +14,46 @@
</head>
<body>
-<div data-role="page" class="type-index">
+ <div data-role="page" class="type-interior">
- <div data-role="header" data-theme="f">
+ <div data-role="header" data-theme="f">
<h1>Buttons</h1>
<a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
<a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
</div><!-- /header -->
<div data-role="content">
- <p>Buttons are core widgets in jQuery Mobile, and are used within a wide range of other plugins.</p>
+ <div class="content-primary">
+ <h2>Buttons</h2>
+ <p>Buttons are core widgets in jQuery Mobile, and are used within a wide range of other plugins. The <a href="buttons-types.html"> button markup</a> is flexible and can be created from links or form buttons.</p>
+ <p>Each button has a range of styling options including <a href="buttons-icons.html">icons and positioning</a>, <a href="buttons-inline.html">inline and mini sizing</a>, <a href="buttons-grouped.html">grouping sets</a>, and <a href="buttons-themes.html">theming</a>.</p>
+
+ </div>
+ <!--/content-primary -->
- <ul data-role="listview" data-inset="true">
- <li><a href="buttons-types.html">Button basics</a></li>
- <li><a href="buttons-icons.html">Button icons</a></li>
- <li><a href="buttons-inline.html">Inline buttons</a></li>
- <li><a href="buttons-grouped.html">Grouped buttons</a></li>
- <li><a href="buttons-themes.html">Theming buttons</a></li>
- </ul>
- </div>
- </div><!-- /content -->
+ <div class="content-secondary">
+ <div data-role="collapsible" data-collapsed="false" data-theme="b" data-content-theme="d">
+ <h3>In this section</h3>
- </div><!-- /page -->
+ <ul data-role="listview" data-theme="c" data-dividertheme="d">
+ <li><a href="buttons-types.html">Button basics</a></li>
+ <li><a href="buttons-icons.html">Button icons</a></li>
+ <li><a href="buttons-inline.html">Inline buttons</a></li>
+ <li><a href="buttons-grouped.html">Grouped buttons</a></li>
+ <li><a href="buttons-themes.html">Theming buttons</a></li>
+ </ul>
+ </div>
+ </div>
- </body>
- </html>
+ </div><!-- /content -->
+
+ <div data-role="footer" class="footer-docs" data-theme="c">
+ <p>&copy; 2012 jQuery Foundation and other contributors</p>
+ </div>
+
+ </div><!-- /page -->
+
+</body>
+</html>
View
45 docs/content/index.html
@@ -3,7 +3,7 @@
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
- <title>jQuery Mobile Docs - Content formatting</title>
+ <title>jQuery Mobile Docs - Content Formatting</title>
<link rel="stylesheet" href="../../css/themes/default/jquery.mobile.css" />
<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
@@ -14,32 +14,45 @@
</head>
<body>
-<div data-role="page" class="type-index">
+ <div data-role="page" class="type-interior">
<div data-role="header" data-theme="f">
- <h1>Content formatting</h1>
+ <h1>Content Formatting</h1>
<a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
<a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
</div><!-- /header -->
<div data-role="content">
+ <div class="content-primary">
+ <h2>Content Formatting</h2>
+ <p>jQuery Mobile includes a set of widgets and utilities for displaying content. There are simple <a href="content-html.html"> default HTML styles</a> and <a href="content-grids.html">layout grids</a> for multi-column layouts.</p>
+ <p>Also included are <a href="content-collapsible.html">collapsibles</a> and <a href="content-collapsible-set.html">accordions</a> to manage content on smaller screens. </p>
+ </div>
+ <!--/content-primary -->
- <p>The content of pages in jQuery Mobile is completely open-ended, but the jQuery Mobile framework provides a number of helpful tools and widgets &mdash; such as collapsible panels and multiple-column grid layouts &mdash; to make it easy to format your content for mobile devices.</p>
+ <div class="content-secondary">
-
+ <div data-role="collapsible" data-collapsed="false" data-theme="b" data-content-theme="d">
-
- <ul data-role="listview" data-inset="true">
- <li><a href="content-html.html">Basic HTML styles</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-collapsible-set.html">Collapsible sets (accordions)</a></li>
- <li><a href="content-themes.html">Theming content</a></li>
- <!--<li><a href="api-content.html">API documentation</a></li>-->
- </ul>
+ <h3>In this section</h3>
- </div><!-- /ui-body wrapper -->
-</div><!-- /page -->
+ <ul data-role="listview" data-theme="c" data-dividertheme="d">
+ <li><a href="content-html.html">Basic HTML styles</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-collapsible-set.html">Collapsible sets (accordions)</a></li>
+ <li><a href="content-themes.html">Theming content</a></li>
+ </ul>
+ </div>
+ </div>
+
+ </div><!-- /content -->
+
+ <div data-role="footer" class="footer-docs" data-theme="c">
+ <p>&copy; 2012 jQuery Foundation and other contributors</p>
+ </div>
+
+ </div><!-- /page -->
</body>
</html>
View
66 docs/forms/index.html
@@ -4,7 +4,7 @@
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery Mobile Docs - Forms</title>
- <link rel="stylesheet" href="../../css/themes/default/jquery.mobile.css" />
+ <link rel="stylesheet" href="../../css/themes/default/jquery.mobile.css" />
<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
<script src="../../js/jquery.js"></script>
@@ -14,37 +14,53 @@
</head>
<body>
- <div data-role="page" class="type-index">
+ <div data-role="page" class="type-interior">
<div data-role="header" data-theme="f">
- <h1>Form elements</h1>
+ <h1>Forms</h1>
<a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
<a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
</div><!-- /header -->
<div data-role="content">
-
- <p>All form elements begin with standard HTML controls that are enhanced to make them more attractive and easy to use. In browsers that don't support the custom controls, they will still have a usable experience because these are all based on native form elements.</p>
-
- <ul data-role="listview" data-inset="true">
- <li><a href="docs-forms.html">Form basics</a></li>
- <li><a href="forms-all.html">Form element gallery</a></li>
- <li><a href="forms-all-mini.html">Mini form element gallery</a></li>
- <li><a href="textinputs/">Text inputs</a></li>
- <li><a href="search/">Search inputs</a></li>
- <li><a href="slider/">Slider</a></li>
- <li><a href="switch/">Flip toggle switch</a></li>
- <li><a href="radiobuttons/">Radio buttons</a></li>
- <li><a href="checkboxes/">Checkboxes</a></li>
- <li><a href="selects/">Select menus</a></li>
- <li><a href="forms-themes.html">Theming forms</a></li>
- <li><a href="forms-all-native.html">Native form elements</a></li>
- <li><a href="forms-sample.html">Submitting forms</a></li>
-
- </ul>
-
- </div><!-- /ui-body wrapper -->
-</div><!-- /page -->
+ <div class="content-primary">
+ <h2>Form Elements</h2>
+ <p>All forms widgets begin with <a href="forms-all-native.html">native</a> form elements with rich <a href="docs-forms.html">HTML semantics</a> that are enhanced to make them more attractive and easy to use. In browsers that don't support the custom controls, they will still have a usable experience.</p>
+ <p>Most common form elements are included: <a href="textinputs/">text inputs</a>, <a href="search/">search</a>, <a href="slider/">sliders</a>, <a href="switch/">flip toggle switches</a>, <a href="radiobuttons/">radio buttons</a>, <a href="checkboxes/">checkboxes</a>, and <a href="selects/">select menus</a>. Available in <a href="forms-all.html">standard</a> and <a href="forms-all-mini.html">mini</a> sized versions.</p>
+ </div>
+ <!--/content-primary -->
+
+ <div class="content-secondary">
+
+ <div data-role="collapsible" data-collapsed="false" data-theme="b" data-content-theme="d">
+
+ <h3>In this section</h3>
+
+ <ul data-role="listview" data-theme="c" data-dividertheme="d">
+ <li><a href="docs-forms.html">Form basics</a></li>
+ <li><a href="forms-all.html">Form element gallery</a></li>
+ <li><a href="forms-all-mini.html">Mini form element gallery</a></li>
+ <li><a href="textinputs/">Text inputs</a></li>
+ <li><a href="search/">Search inputs</a></li>
+ <li><a href="slider/">Slider</a></li>
+ <li><a href="switch/">Flip toggle switch</a></li>
+ <li><a href="radiobuttons/">Radio buttons</a></li>
+ <li><a href="checkboxes/">Checkboxes</a></li>
+ <li><a href="selects/">Select menus</a></li>
+ <li><a href="forms-themes.html">Theming forms</a></li>
+ <li><a href="forms-all-native.html">Native form elements</a></li>
+ <li><a href="forms-sample.html">Submitting forms</a></li>
+ </ul>
+ </div>
+ </div>
+
+ </div><!-- /content -->
+
+ <div data-role="footer" class="footer-docs" data-theme="c">
+ <p>&copy; 2012 jQuery Foundation and other contributors</p>
+ </div>
+
+ </div><!-- /page -->
</body>
</html>
View
107 docs/lists/index.html
@@ -3,7 +3,7 @@
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
- <title>jQuery Mobile Docs - Lists</title>
+ <title>jQuery Mobile Docs - Listviews</title>
<link rel="stylesheet" href="../../css/themes/default/jquery.mobile.css" />
<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
@@ -14,59 +14,68 @@
</head>
<body>
- <div data-role="page" class="type-index">
+ <div data-role="page" class="type-interior">
<div data-role="header" data-theme="f">
- <h1>Lists</h1>
+ <h1>Listviews</h1>
<a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
<a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
</div><!-- /header -->
<div data-role="content">
+ <div class="content-primary">
+ <h2>Listviews</h2>
+ <p>Lists are used for data display, navigation, result lists, and data entry so jQuery Mobile includes a wide range of list types and formatting examples to cover most common design patterns. All lists start with simple <a href="docs-lists.html">HTML list markup</a> and include styling for <a href="lists-readonly.html">read-only</a>, <a href="lists-ul.html">linked</a>, <a href="lists-ol.html">numbered</a>, <a href="lists-nested.html">nested</a>, <a href="lists-collapsible.html">collapsible</a> lists and more.</p>
+ <p>Listviews are full width by default but can be set to be <a href="lists-inset.html">inset styled</a>. To make development easy, there are simple ways to add a <a href="lists-search.html">search filter</a> and <a href="lists-autodividers.html">Automatic dividers</a>.</p>
+ </div>
+ <!--/content-primary -->
- <p>Lists are used for data display, navigation, result lists, and data entry so jQuery Mobile includes a wide range of list types and formatting examples to cover most common design patterns.</p>
-
- <ul data-role="listview" data-inset="true">
- <li><a href="docs-lists.html">List basics &amp; API</a></li>
- <li><a href="lists-ul.html">Basic linked list</a></li>
- <li><a href="lists-nested.html">Nested list</a></li>
- <li><a href="lists-ol.html">Numbered list</a></li>
-
- <li><a href="lists-split.html">Split button list</a></li>
- <li><a href="lists-divider.html">List dividers</a></li>
- <li><a href="lists-autodividers.html">Autodividers</a></li>
- <li><a href="lists-count.html">Count bubble</a></li>
- <li><a href="lists-thumbnails.html">Thumbnails</a></li>
- <li><a href="lists-icons.html">Icons</a></li>
- <li><a href="lists-formatting.html">Content formatting</a></li>
- <li><a href="lists-inset.html">Inset styled lists</a></li>
-
- <li><a href="lists-search.html">Search filter bar</a></li>
- <li><a href="lists-search-inset.html">Inset search filter bar</a></li>
- <li><a href="lists-search-with-dividers.html">Search filter bar with dividers</a></li>
- <li><a href="lists-search-filtertext.html">Search filter hidden data</a></li>
-
- <li><a href="lists-readonly.html">Read-only lists</a></li>
- <li><a href="lists-readonly-inset.html">Read-only inset lists</a></li>
- <li><a href="lists-forms.html">Lists with forms</a></li>
- <li><a href="lists-forms-inset.html">Inset lists with forms</a></li>
-
- <li><a href="lists-collapsible.html">Collapsible lists</a></li>
-
- <li><a href="lists-performance.html">List performance test</a></li>
- <li><a href="lists-themes.html">Theming lists</a></li>
- <!--<li><a href="api-lists.html">API documentation</a></li>-->
- </ul>
-
-
-
- </div><!-- /content -->
-
- <div data-role="footer" class="footer-docs" data-theme="c">
- <p>&copy; 2012 jQuery Foundation and other contributors</p>
- </div>
-
- </div><!-- /page -->
-
- </body>
- </html>
+ <div class="content-secondary">
+
+ <div data-role="collapsible" data-collapsed="false" data-theme="b" data-content-theme="d">
+
+ <h3>In this section</h3>
+
+ <ul data-role="listview" data-theme="c" data-dividertheme="d">
+ <li><a href="docs-lists.html">List basics &amp; API</a></li>
+ <li><a href="lists-ul.html">Basic linked list</a></li>
+ <li><a href="lists-nested.html">Nested list</a></li>
+ <li><a href="lists-ol.html">Numbered list</a></li>
+
+ <li><a href="lists-split.html">Split button list</a></li>
+ <li><a href="lists-divider.html">List dividers</a></li>
+ <li><a href="lists-autodividers.html">Autodividers</a></li>
+ <li><a href="lists-count.html">Count bubble</a></li>
+ <li><a href="lists-thumbnails.html">Thumbnails</a></li>
+ <li><a href="lists-icons.html">Icons</a></li>
+ <li><a href="lists-formatting.html">Content formatting</a></li>
+ <li><a href="lists-inset.html">Inset styled lists</a></li>
+
+ <li><a href="lists-search.html">Search filter bar</a></li>
+ <li><a href="lists-search-inset.html">Inset search filter bar</a></li>
+ <li><a href="lists-search-with-dividers.html">Search filter bar with dividers</a></li>
+ <li><a href="lists-search-filtertext.html">Search filter hidden data</a></li>
+
+ <li><a href="lists-readonly.html">Read-only lists</a></li>
+ <li><a href="lists-readonly-inset.html">Read-only inset lists</a></li>
+ <li><a href="lists-forms.html">Lists with forms</a></li>
+ <li><a href="lists-forms-inset.html">Inset lists with forms</a></li>
+
+ <li><a href="lists-collapsible.html">Collapsible lists</a></li>
+
+ <li><a href="lists-performance.html">List performance test</a></li>
+ <li><a href="lists-themes.html">Theming lists</a></li>
+ </ul>
+ </div>
+ </div>
+
+ </div><!-- /content -->
+
+ <div data-role="footer" class="footer-docs" data-theme="c">
+ <p>&copy; 2012 jQuery Foundation and other contributors</p>
+ </div>
+
+ </div><!-- /page -->
+
+</body>
+</html>
View
3  docs/nav.html
@@ -63,6 +63,9 @@
<li data-filtertext="events api animationComplete transition css">
<a href="api/events.html">Animation events</a>
</li>
+ <li data-filtertext="listview autodivider">
+ <a href="lists/lists-autodividers.html">Automatic listview dividers</a>
+ </li>
<li data-filtertext="button link submit cancel image reset mini buttonmarkup enable disable">
<a href="buttons/buttons-types.html">Buttons</a>
</li>
View
33 docs/pages/index.html
@@ -14,20 +14,31 @@
</head>
<body>
- <div data-role="page" class="type-index">
+ <div data-role="page" class="type-interior">
<div data-role="header" data-theme="f">
- <h1>Pages</h1>
+ <h1>Navigation System</h1>
<a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
<a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
</div><!-- /header -->
<div data-role="content">
+ <div class="content-primary">
+ <h2>Navigation: Pages &amp; dialogs</h2>
+ <p>jQuery Mobile includes a navigation system to load linked pages into the DOM via AJAX, enhance the new content, then display pages with a rich set of animated page <a href="page-transitions.html">transitions</a>. The navigation system automatically transforms all <a href="page-links.html">links</a> and forms by using progressive enhancement to hijack links and issue AJAX requests. </p>
+ <p>The back button is fully supported so <a href="page-anatomy.html">pages</a>, <a href="page-dialogs.html">dialogs</a>, and <a href="popup/index.html">popups</a> all seamlessly work with the navigation system. There are tools to <a href="page-cache.html">prefetch &amp; cache</a>, <a href="page-dynamic.html">dynamically inject</a>, and <a href="page-scripting.html">script</a> pages for advanced use cases.</p>
+ </div>
+ <!--/content-primary -->
- <p>jQuery Mobile includes automatic AJAX page loading of external pages with back button history support, a set of animated page transitions and simple tools for displaying pages as dialogs.</p>
+ <div class="content-secondary">
-
- <ul data-role="listview" data-inset="true">
+ <div data-role="collapsible" data-collapsed="false" data-theme="b" data-content-theme="d">
+
+ <h3>In this section</h3>
+
+ <ul data-role="listview" data-theme="c" data-dividertheme="d">
+
+ <li data-role="list-divider">Pages &amp; Dialogs</li>
<li><a href="page-anatomy.html">Anatomy of a page</a></li>
<li><a href="page-template.html" data-ajax="false">Single page template</a></li>
<li><a href="multipage-template.html" data-ajax="false">Multi-page template</a></li>
@@ -44,11 +55,17 @@
<li><a href="phonegap.html">PhoneGap apps</a></li>
<li><a href="touchoverflow.html">touchOverflow feature</a></li>
<li><a href="pages-themes.html">Theming pages</a></li>
- </ul>
+ </ul>
+ </div>
+ </div>
+
+ </div><!-- /content -->
+ <div data-role="footer" class="footer-docs" data-theme="c">
+ <p>&copy; 2012 jQuery Foundation and other contributors</p>
+ </div>
- </div><!-- /ui-body wrapper -->
-</div><!-- /page -->
+ </div><!-- /page -->
</body>
</html>
View
52 docs/toolbars/index.html
@@ -14,7 +14,7 @@
</head>
<body>
- <div data-role="page" class="type-index">
+ <div data-role="page" class="type-interior">
<div data-role="header" data-theme="f">
<h1>Toolbars</h1>
@@ -23,23 +23,39 @@
</div><!-- /header -->
<div data-role="content">
-
- <p>Toolbars are used for headers, footers, and utility bars throughout mobile sites and applications. jQuery Mobile provides a standard set of bars and navigation tools to cover most standard scenarios.</p>
-
-
- <ul data-role="listview" data-inset="true">
- <li><a href="docs-bars.html">Toolbar basics</a></li>
- <li><a href="docs-headers.html">Header bars</a></li>
- <li><a href="docs-footers.html">Footer bars</a></li>
- <li><a href="docs-navbar.html">Navbars</a></li>
- <li><a href="bars-fixed.html">Fixed positioning</a></li>
- <li><a href="footer-persist-a.html">Persistent toolbars</a></li>
- <li><a href="bars-themes.html">Theming toolbars</a></li>
- <!--<li><a href="api-bars.html">API documentation</a></li>-->
- </ul>
-
- </div><!-- /content -->
-</div><!-- /page -->
+ <div class="content-primary">
+ <h2>Toolbars: Headers &amp; Footers</h2>
+ <p>Toolbars page elements are used for <a href="docs-headers.html">headers</a> and <a href="docs-footers.html">footer</a> throughout many mobile sites and applications. These scroll with the page by default, but can have <a href="bars-fixed.html">fixed positioning</a> and be <a href="footer-persist-a.html">persistent</a> across pages.</p>
+ <p>jQuery Mobile also provides a <a href="docs-navbar.html">navbar</a> component that can be used within any toolbar or the page content.</p>
+ </div>
+ <!--/content-primary -->
+
+ <div class="content-secondary">
+
+ <div data-role="collapsible" data-collapsed="false" data-theme="b" data-content-theme="d">
+
+ <h3>In this section</h3>
+
+ <ul data-role="listview" data-theme="c" data-dividertheme="d">
+ <li><a href="docs-bars.html">Toolbar basics</a></li>
+ <li><a href="docs-headers.html">Header bars</a></li>
+ <li><a href="docs-footers.html">Footer bars</a></li>
+ <li><a href="docs-navbar.html">Navbars</a></li>
+ <li><a href="bars-fixed.html">Fixed positioning</a></li>
+ <li><a href="footer-persist-a.html">Persistent toolbars</a></li>
+ <li><a href="bars-themes.html">Theming toolbars</a></li>
+ <!--<li><a href="api-bars.html">API documentation</a></li>-->
+ </ul>
+ </div>
+ </div>
+
+ </div><!-- /content -->
+
+ <div data-role="footer" class="footer-docs" data-theme="c">
+ <p>&copy; 2012 jQuery Foundation and other contributors</p>
+ </div>
+
+ </div><!-- /page -->
</body>
</html>
Please sign in to comment.
Something went wrong with that request. Please try again.