Hopiu/jquery-mobile
1
0
Fork 0
mirror of https://github.com/Hopiu/jquery-mobile.git synced 2026-04-09 09:00:57 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

added navigation components to most docs pages

Browse source
This commit is contained in:
scottjehl 2011-06-20 16:35:27 -04:00
parent 6980110d32
commit ebf9bd8535
67 changed files with 1998 additions and 281 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

31
docs/buttons/buttons-grouped.html
View file

@ -21,6 +21,8 @@
</div><!-- /header -->
<div data-role="content">
<div class="content-primary">
<p>Occasionally, you may want to visually group a set of buttons together to form a single block that looks contained like a navigation component. To get this effect, wrap a set of buttons in a container with the <code> data-role="controlgroup"</code> attribute &mdash; the framework will create a vertical button group, remove all margins and drop shadows between the buttons, and only round the first and last buttons of the set to create the effect that they are grouped together. </p>
<pre><code>
&lt;div data-role=&quot;controlgroup&quot;&gt;
@ -62,9 +64,34 @@
</div>
</div><!--/content-primary -->
<div class="content-secondary">
</div><!-- /content -->
<div data-role="collapsible" data-collapsed="true" data-theme="b">
<h3>Demos &amp; Docs Sections</h3>
<ul data-role="listview" data-theme="c" data-dividertheme="d">
<li data-role="list-divider">Components</li>
<li><a href="../../docs/pages/index.html">Pages &amp; dialogs</a></li>
<li><a href="../../docs/toolbars/index.html">Toolbars</a></li>
<li data-theme="a"><a href="../../docs/buttons/index.html">Buttons</a></li>
<li><a href="../../docs/content/index.html">Content formatting</a></li>
<li><a href="../../docs/forms/index.html">Form elements</a></li>
<li><a href="../../docs/lists/index.html">List views</a></li>
</ul>
</div>
</div>
</div><!-- /content -->
<div data-role="footer" class="footer-docs" data-theme="c">
<p>&copy;2011 The jQuery Project</p>
</div>
</div><!-- /page -->
</body>

32
docs/buttons/buttons-icons.html
View file

@ -21,6 +21,7 @@
</div><!-- /header -->
<div data-role="content">
<div class="content-primary">
<h2>Adding Icons to Buttons</h2>
<p>The jQuery Mobile framework includes a selected set of icons most often needed for mobile apps. To minimize download size, jQuery Mobile includes a single white icon sprite, and automatically adds a semi-transparent black circle behind the icon to ensure that it has good contrast on any background color.</p>
@ -181,8 +182,35 @@
<a href="index.html" data-role="button" data-icon="search" data-iconpos="notext" data-theme="c" data-inline="true">My button</a>
</div>
</div><!-- /content -->
</div><!--/content-primary -->
<div class="content-secondary">
<div data-role="collapsible" data-collapsed="true" data-theme="b">
<h3>Demos &amp; Docs Sections</h3>
<ul data-role="listview" data-theme="c" data-dividertheme="d">
<li data-role="list-divider">Components</li>
<li><a href="../../docs/pages/index.html">Pages &amp; dialogs</a></li>
<li><a href="../../docs/toolbars/index.html">Toolbars</a></li>
<li data-theme="a"><a href="../../docs/buttons/index.html">Buttons</a></li>
<li><a href="../../docs/content/index.html">Content formatting</a></li>
<li><a href="../../docs/forms/index.html">Form elements</a></li>
<li><a href="../../docs/lists/index.html">List views</a></li>
</ul>
</div>
</div>
</div><!-- /content -->
<div data-role="footer" class="footer-docs" data-theme="c">
<p>&copy;2011 The jQuery Project</p>
</div>
</div><!-- /page -->
</body>
</html>
</html>

38
docs/buttons/buttons-inline.html
View file

@ -21,6 +21,7 @@
</div><!-- /header -->
<div data-role="content">
<div class="content-primary">
<p>By default, all buttons in the body content are styled as block-level element so they fill the width of the screen:</p>
@ -49,10 +50,35 @@
<p>If you want buttons to sit side-by-side but stretch to fill the width of the screen, you can use the <a href="../content/content-grids.html">content column grids</a> to put normal full-width buttons into 2- or 3-columns.</p>
</div><!-- /content -->
</div><!-- /page -->
</div><!--/content-primary -->
</body>
</html>
<div class="content-secondary">
<div data-role="collapsible" data-collapsed="true" data-theme="b">
<h3>Demos &amp; Docs Sections</h3>
<ul data-role="listview" data-theme="c" data-dividertheme="d">
<li data-role="list-divider">Components</li>
<li><a href="../../docs/pages/index.html">Pages &amp; dialogs</a></li>
<li><a href="../../docs/toolbars/index.html">Toolbars</a></li>
<li data-theme="a"><a href="../../docs/buttons/index.html">Buttons</a></li>
<li><a href="../../docs/content/index.html">Content formatting</a></li>
<li><a href="../../docs/forms/index.html">Form elements</a></li>
<li><a href="../../docs/lists/index.html">List views</a></li>
</ul>
</div>
</div>
</div><!-- /content -->
<div data-role="footer" class="footer-docs" data-theme="c">
<p>&copy;2011 The jQuery Project</p>
</div>
</div><!-- /page -->
</body>
</html>

30
docs/buttons/buttons-themes.html
View file

@ -21,6 +21,7 @@
</div><!-- /header -->
<div data-role="content">
<div class="content-primary">
<h2>Theming</h2>
@ -94,7 +95,34 @@
<a href="index.html" data-role="button" data-theme="e" data-icon="arrow-l" data-inline="true">Theme e</a>
</div>
</div><!-- /content -->
</div><!--/content-primary -->
<div class="content-secondary">
<div data-role="collapsible" data-collapsed="true" data-theme="b">
<h3>Demos &amp; Docs Sections</h3>
<ul data-role="listview" data-theme="c" data-dividertheme="d">
<li data-role="list-divider">Components</li>
<li><a href="../../docs/pages/index.html">Pages &amp; dialogs</a></li>
<li><a href="../../docs/toolbars/index.html">Toolbars</a></li>
<li data-theme="a"><a href="../../docs/buttons/index.html">Buttons</a></li>
<li><a href="../../docs/content/index.html">Content formatting</a></li>
<li><a href="../../docs/forms/index.html">Form elements</a></li>
<li><a href="../../docs/lists/index.html">List views</a></li>
</ul>
</div>
</div>
</div><!-- /content -->
<div data-role="footer" class="footer-docs" data-theme="c">
<p>&copy;2011 The jQuery Project</p>
</div>
</div><!-- /page -->
</body>

30
docs/buttons/buttons-types.html
View file

@ -21,6 +21,7 @@
</div><!-- /header -->
<div data-role="content">
<div class="content-primary">
<p>Buttons that are used for navigation should be coded as anchor links, and those that submit forms as <code>button</code> elements &mdash; each will be styled identically by the framework.</p>
@ -55,7 +56,34 @@
<p><strong>Input type="image"</strong> based button:</p>
<input type="image" value="Input type=image" />
</div><!-- /content -->
</div><!--/content-primary -->
<div class="content-secondary">
<div data-role="collapsible" data-collapsed="true" data-theme="b">
<h3>Demos &amp; Docs Sections</h3>
<ul data-role="listview" data-theme="c" data-dividertheme="d">
<li data-role="list-divider">Components</li>
<li><a href="../../docs/pages/index.html">Pages &amp; dialogs</a></li>
<li><a href="../../docs/toolbars/index.html">Toolbars</a></li>
<li data-theme="a"><a href="../../docs/buttons/index.html">Buttons</a></li>
<li><a href="../../docs/content/index.html">Content formatting</a></li>
<li><a href="../../docs/forms/index.html">Form elements</a></li>
<li><a href="../../docs/lists/index.html">List views</a></li>
</ul>
</div>
</div>
</div><!-- /content -->
<div data-role="footer" class="footer-docs" data-theme="c">
<p>&copy;2011 The jQuery Project</p>
</div>
</div><!-- /page -->
</body>

29
docs/content/content-collapsible.html
View file

@ -21,6 +21,7 @@
</div><!-- /header -->
<div data-role="content">
<div class="content-primary">
<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>
@ -134,8 +135,34 @@
</div>
</div>
</div><!--/content-primary -->
<div class="content-secondary">
<div data-role="collapsible" data-collapsed="true" data-theme="b">
<h3>Demos &amp; Docs Sections</h3>
<ul data-role="listview" data-theme="c" data-dividertheme="d">
<li data-role="list-divider">Components</li>
<li><a href="../../docs/pages/index.html">Pages &amp; dialogs</a></li>
<li><a href="../../docs/toolbars/index.html">Toolbars</a></li>
<li><a href="../../docs/buttons/index.html">Buttons</a></li>
<li data-theme="a"><a href="../../docs/content/index.html">Content formatting</a></li>
<li><a href="../../docs/forms/index.html">Form elements</a></li>
<li><a href="../../docs/lists/index.html">List views</a></li>
</ul>
</div>
</div>
</div><!-- /content -->
<div data-role="footer" class="footer-docs" data-theme="c">
<p>&copy;2011 The jQuery Project</p>
</div>
</div><!-- /content -->
</div><!-- /page -->
</body>

30
docs/content/content-grids.html
View file

@ -21,6 +21,7 @@
</div><!-- /header -->
<div data-role="content">
<div class="content-primary">
<p>Using multiple column layouts isn't generally recommended on a mobile device because of the narrow screen width, but there are times where you may need to place small elements side-by-side (like buttons or navigation tabs, for example). </p>
@ -136,7 +137,34 @@
<div class="ui-block-c"><div class="ui-bar ui-bar-e" style="height:120px">C</div></div>
</div><!-- /grid-c -->
</div><!-- /content -->
</div><!--/content-primary -->
<div class="content-secondary">
<div data-role="collapsible" data-collapsed="true" data-theme="b">
<h3>Demos &amp; Docs Sections</h3>
<ul data-role="listview" data-theme="c" data-dividertheme="d">
<li data-role="list-divider">Components</li>
<li><a href="../../docs/pages/index.html">Pages &amp; dialogs</a></li>
<li><a href="../../docs/toolbars/index.html">Toolbars</a></li>
<li><a href="../../docs/buttons/index.html">Buttons</a></li>
<li data-theme="a"><a href="../../docs/content/index.html">Content formatting</a></li>
<li><a href="../../docs/forms/index.html">Form elements</a></li>
<li><a href="../../docs/lists/index.html">List views</a></li>
</ul>
</div>
</div>
</div><!-- /content -->
<div data-role="footer" class="footer-docs" data-theme="c">
<p>&copy;2011 The jQuery Project</p>
</div>
</div><!-- /page -->
</body>

31
docs/content/content-html.html
View file

@ -21,7 +21,7 @@
</div><!-- /header -->
<div data-role="content">
<div class="content-primary">
<style>
table { width:100%; }
table caption { text-align:left; }
@ -109,7 +109,34 @@
</table>
</div><!-- /content -->
</div><!--/content-primary -->
<div class="content-secondary">
<div data-role="collapsible" data-collapsed="true" data-theme="b">
<h3>Demos &amp; Docs Sections</h3>
<ul data-role="listview" data-theme="c" data-dividertheme="d">
<li data-role="list-divider">Components</li>
<li><a href="../../docs/pages/index.html">Pages &amp; dialogs</a></li>
<li><a href="../../docs/toolbars/index.html">Toolbars</a></li>
<li><a href="../../docs/buttons/index.html">Buttons</a></li>
<li data-theme="a"><a href="../../docs/content/index.html">Content formatting</a></li>
<li><a href="../../docs/forms/index.html">Form elements</a></li>
<li><a href="../../docs/lists/index.html">List views</a></li>
</ul>
</div>
</div>
</div><!-- /content -->
<div data-role="footer" class="footer-docs" data-theme="c">
<p>&copy;2011 The jQuery Project</p>
</div>
</div><!-- /page -->
</body>

31
docs/content/content-themes.html
View file

@ -21,8 +21,7 @@
</div><!-- /header -->
<div data-role="content">
<div class="content-primary">
<h2>Theming the content area</h2>
<p>The main content area of a page (container with the <code> data-role="content"</code> attribute) should 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>
@ -88,10 +87,34 @@
</div><!-- /themed container -->
</div><!--/content-primary -->
<div class="content-secondary">
</div><!-- /content -->
<div data-role="collapsible" data-collapsed="true" data-theme="b">
<h3>Demos &amp; Docs Sections</h3>
<ul data-role="listview" data-theme="c" data-dividertheme="d">
<li data-role="list-divider">Components</li>
<li><a href="../../docs/pages/index.html">Pages &amp; dialogs</a></li>
<li><a href="../../docs/toolbars/index.html">Toolbars</a></li>
<li><a href="../../docs/buttons/index.html">Buttons</a></li>
<li data-theme="a"><a href="../../docs/content/index.html">Content formatting</a></li>
<li><a href="../../docs/forms/index.html">Form elements</a></li>
<li><a href="../../docs/lists/index.html">List views</a></li>
</ul>
</div>
</div>
</div><!-- /content -->
<div data-role="footer" class="footer-docs" data-theme="c">
<p>&copy;2011 The jQuery Project</p>
</div>
</div><!-- /page -->
</body>

31
docs/forms/docs-forms.html
View file

@ -21,7 +21,7 @@
</div><!-- /header -->
<div data-role="content">
<div class="content-primary">
<p>jQuery Mobile provides a complete set of finger-friendly form elements that are based on native HTML form elements.</p>
<h2>Form structure</h2>
@ -115,7 +115,34 @@ myswitch .slider("refresh");
<p>We're considering adding a refresh method to forms to let the framework refresh all the individual elemnts withing but that is a future enhancement.</p>
</div><!-- /content -->
</div><!--/content-primary -->
<div class="content-secondary">
<div data-role="collapsible" data-collapsed="true" data-theme="b">
<h3>Demos &amp; Docs Sections</h3>
<ul data-role="listview" data-theme="c" data-dividertheme="d">
<li data-role="list-divider">Components</li>
<li><a href="../../docs/pages/index.html">Pages &amp; dialogs</a></li>
<li><a href="../../docs/toolbars/index.html">Toolbars</a></li>
<li><a href="../../docs/buttons/index.html">Buttons</a></li>
<li><a href="../../docs/content/index.html">Content formatting</a></li>
<li data-theme="a"><a href="../../docs/forms/index.html">Form elements</a></li>
<li><a href="../../docs/lists/index.html">List views</a></li>
</ul>
</div>
</div>
</div><!-- /content -->
<div data-role="footer" class="footer-docs" data-theme="c">
<p>&copy;2011 The jQuery Project</p>
</div>
</div><!-- /page -->
</body>

31
docs/forms/forms-all-native.html
View file

@ -21,6 +21,7 @@
</div><!-- /header -->
<div data-role="content">
<div class="content-primary">
<form action="#" method="get">
@ -204,8 +205,36 @@
</form>
</div><!-- /content -->
</div><!--/content-primary -->
<div class="content-secondary">
<div data-role="collapsible" data-collapsed="true" data-theme="b">
<h3>Demos &amp; Docs Sections</h3>
<ul data-role="listview" data-theme="c" data-dividertheme="d">
<li data-role="list-divider">Components</li>
<li><a href="../../docs/pages/index.html">Pages &amp; dialogs</a></li>
<li><a href="../../docs/toolbars/index.html">Toolbars</a></li>
<li><a href="../../docs/buttons/index.html">Buttons</a></li>
<li><a href="../../docs/content/index.html">Content formatting</a></li>
<li data-theme="a"><a href="../../docs/forms/index.html">Form elements</a></li>
<li><a href="../../docs/lists/index.html">List views</a></li>
</ul>
</div>
</div>
</div><!-- /content -->
<div data-role="footer" class="footer-docs" data-theme="c">
<p>&copy;2011 The jQuery Project</p>
</div>
</div><!-- /page -->
</body>
</html>

29
docs/forms/forms-all.html
View file

@ -21,6 +21,7 @@
</div><!-- /header -->
<div data-role="content">
<div class="content-primary">
<form action="#" method="get">
@ -202,8 +203,34 @@
</fieldset>
</div>
</form>
</div><!--/content-primary -->
<div class="content-secondary">
<div data-role="collapsible" data-collapsed="true" data-theme="b">
<h3>Demos &amp; Docs Sections</h3>
<ul data-role="listview" data-theme="c" data-dividertheme="d">
<li data-role="list-divider">Components</li>
<li><a href="../../docs/pages/index.html">Pages &amp; dialogs</a></li>
<li><a href="../../docs/toolbars/index.html">Toolbars</a></li>
<li><a href="../../docs/buttons/index.html">Buttons</a></li>
<li><a href="../../docs/content/index.html">Content formatting</a></li>
<li data-theme="a"><a href="../../docs/forms/index.html">Form elements</a></li>
<li><a href="../../docs/lists/index.html">List views</a></li>
</ul>
</div>
</div>
</div><!-- /content -->
</div><!-- /content -->
<div data-role="footer" class="footer-docs" data-theme="c">
<p>&copy;2011 The jQuery Project</p>
</div>
</div><!-- /page -->
</body>

32
docs/forms/forms-checkboxes.html
View file

@ -21,6 +21,7 @@
</div><!-- /header -->
<div data-role="content">
<div class="content-primary">
<form action="#" method="get">
@ -110,8 +111,35 @@ $("input[type='checkbox']").attr("checked",true).checkboxradio("refresh");
</form>
</div><!-- /content -->
</div><!--/content-primary -->
<div class="content-secondary">
<div data-role="collapsible" data-collapsed="true" data-theme="b">
<h3>Demos &amp; Docs Sections</h3>
<ul data-role="listview" data-theme="c" data-dividertheme="d">
<li data-role="list-divider">Components</li>
<li><a href="../../docs/pages/index.html">Pages &amp; dialogs</a></li>
<li><a href="../../docs/toolbars/index.html">Toolbars</a></li>
<li><a href="../../docs/buttons/index.html">Buttons</a></li>
<li><a href="../../docs/content/index.html">Content formatting</a></li>
<li data-theme="a"><a href="../../docs/forms/index.html">Form elements</a></li>
<li><a href="../../docs/lists/index.html">List views</a></li>
</ul>
</div>
</div>
</div><!-- /content -->
<div data-role="footer" class="footer-docs" data-theme="c">
<p>&copy;2011 The jQuery Project</p>
</div>
</div><!-- /page -->
</body>
</html>
</html>

31
docs/forms/forms-radiobuttons.html
View file

@ -21,6 +21,7 @@
</div><!-- /header -->
<div data-role="content">
<div class="content-primary">
<form action="#" method="get">
@ -114,9 +115,35 @@ $("input[type='radio']").attr("checked",true).checkboxradio("refresh");
</form>
</div><!--/content-primary -->
<div class="content-secondary">
<div data-role="collapsible" data-collapsed="true" data-theme="b">
<h3>Demos &amp; Docs Sections</h3>
<ul data-role="listview" data-theme="c" data-dividertheme="d">
<li data-role="list-divider">Components</li>
<li><a href="../../docs/pages/index.html">Pages &amp; dialogs</a></li>
<li><a href="../../docs/toolbars/index.html">Toolbars</a></li>
<li><a href="../../docs/buttons/index.html">Buttons</a></li>
<li><a href="../../docs/content/index.html">Content formatting</a></li>
<li data-theme="a"><a href="../../docs/forms/index.html">Form elements</a></li>
<li><a href="../../docs/lists/index.html">List views</a></li>
</ul>
</div>
</div>
</div><!-- /content -->
<div data-role="footer" class="footer-docs" data-theme="c">
<p>&copy;2011 The jQuery Project</p>
</div>
</div><!-- /content -->
</div><!-- /page -->
</body>
</html>
</html>

32
docs/forms/forms-sample-response.php
View file

@ -21,6 +21,7 @@
</div><!-- /header -->
<div data-role="content" data-theme="c">
<div class="content-primary">
<form action="index.html" method="get">
@ -35,8 +36,35 @@
</form>
</div><!-- /content -->
</div><!--/content-primary -->
<div class="content-secondary">
<div data-role="collapsible" data-collapsed="true" data-theme="b">
<h3>Demos &amp; Docs Sections</h3>
<ul data-role="listview" data-theme="c" data-dividertheme="d">
<li data-role="list-divider">Components</li>
<li><a href="../../docs/pages/index.html">Pages &amp; dialogs</a></li>
<li><a href="../../docs/toolbars/index.html">Toolbars</a></li>
<li><a href="../../docs/buttons/index.html">Buttons</a></li>
<li><a href="../../docs/content/index.html">Content formatting</a></li>
<li data-theme="a"><a href="../../docs/forms/index.html">Form elements</a></li>
<li><a href="../../docs/lists/index.html">List views</a></li>
</ul>
</div>
</div>
</div><!-- /content -->
<div data-role="footer" class="footer-docs" data-theme="c">
<p>&copy;2011 The jQuery Project</p>
</div>
</div><!-- /page -->
</body>
</html>
</html>

32
docs/forms/forms-sample-selfsubmit.php
View file

@ -21,6 +21,7 @@
</div><!-- /header -->
<div data-role="content" data-theme="c">
<div class="content-primary">
<form action="forms-sample-selfsubmit.php" method="post">
@ -36,8 +37,35 @@
<button type="submit">Submit</submit>
</form>
</div><!-- /content -->
</div><!--/content-primary -->
<div class="content-secondary">
<div data-role="collapsible" data-collapsed="true" data-theme="b">
<h3>Demos &amp; Docs Sections</h3>
<ul data-role="listview" data-theme="c" data-dividertheme="d">
<li data-role="list-divider">Components</li>
<li><a href="../../docs/pages/index.html">Pages &amp; dialogs</a></li>
<li><a href="../../docs/toolbars/index.html">Toolbars</a></li>
<li><a href="../../docs/buttons/index.html">Buttons</a></li>
<li><a href="../../docs/content/index.html">Content formatting</a></li>
<li data-theme="a"><a href="../../docs/forms/index.html">Form elements</a></li>
<li><a href="../../docs/lists/index.html">List views</a></li>
</ul>
</div>
</div>
</div><!-- /content -->
<div data-role="footer" class="footer-docs" data-theme="c">
<p>&copy;2011 The jQuery Project</p>
</div>
</div><!-- /page -->
</body>
</html>
</html>

37
docs/forms/forms-sample.html
View file

@ -21,6 +21,7 @@
</div><!-- /header -->
<div data-role="content">
<div class="content-primary">
<h2>Ajax form submission</h2>
@ -48,9 +49,35 @@
</fieldset>
</form>
</div><!-- /content -->
</div><!-- /page -->
</div><!--/content-primary -->
</body>
</html>
<div class="content-secondary">
<div data-role="collapsible" data-collapsed="true" data-theme="b">
<h3>Demos &amp; Docs Sections</h3>
<ul data-role="listview" data-theme="c" data-dividertheme="d">
<li data-role="list-divider">Components</li>
<li><a href="../../docs/pages/index.html">Pages &amp; dialogs</a></li>
<li><a href="../../docs/toolbars/index.html">Toolbars</a></li>
<li><a href="../../docs/buttons/index.html">Buttons</a></li>
<li><a href="../../docs/content/index.html">Content formatting</a></li>
<li data-theme="a"><a href="../../docs/forms/index.html">Form elements</a></li>
<li data-theme="a"><a href="../../docs/lists/index.html">List views</a></li>
</ul>
</div>
</div>
</div><!-- /content -->
<div data-role="footer" class="footer-docs" data-theme="c">
<p>&copy;2011 The jQuery Project</p>
</div>
</div><!-- /page -->
</body>
</html>

37
docs/forms/forms-search.html
View file

@ -21,6 +21,7 @@
</div><!-- /header -->
<div data-role="content">
<div class="content-primary">
<form action="#" method="get">
@ -52,8 +53,36 @@
</form>
</div><!-- /content -->
</div><!-- /page -->
</div><!--/content-primary -->
</body>
</html>
<div class="content-secondary">
<div data-role="collapsible" data-collapsed="true" data-theme="b">
<h3>Demos &amp; Docs Sections</h3>
<ul data-role="listview" data-theme="c" data-dividertheme="d">
<li data-role="list-divider">Components</li>
<li><a href="../../docs/pages/index.html">Pages &amp; dialogs</a></li>
<li><a href="../../docs/toolbars/index.html">Toolbars</a></li>
<li><a href="../../docs/buttons/index.html">Buttons</a></li>
<li><a href="../../docs/content/index.html">Content formatting</a></li>
<li data-theme="a"><a href="../../docs/forms/index.html">Form elements</a></li>
<li><a href="../../docs/lists/index.html">List views</a></li>
</ul>
</div>
</div>
</div><!-- /content -->
<div data-role="footer" class="footer-docs" data-theme="c">
<p>&copy;2011 The jQuery Project</p>
</div>
</div><!-- /page -->
</body>
</html>

31
docs/forms/forms-selects.html
View file

@ -21,6 +21,7 @@
</div><!-- /header -->
<div data-role="content">
<div class="content-primary">
<form action="#" method="get">
@ -430,8 +431,36 @@ myselect.selectmenu("refresh");
</pre></code>
</form>
</div><!-- /content -->
</div><!--/content-primary -->
<div class="content-secondary">
<div data-role="collapsible" data-collapsed="true" data-theme="b">
<h3>Demos &amp; Docs Sections</h3>
<ul data-role="listview" data-theme="c" data-dividertheme="d">
<li data-role="list-divider">Components</li>
<li><a href="../../docs/pages/index.html">Pages &amp; dialogs</a></li>
<li><a href="../../docs/toolbars/index.html">Toolbars</a></li>
<li><a href="../../docs/buttons/index.html">Buttons</a></li>
<li><a href="../../docs/content/index.html">Content formatting</a></li>
<li data-theme="a"><a href="../../docs/forms/index.html">Form elements</a></li>
<li><a href="../../docs/lists/index.html">List views</a></li>
</ul>
</div>
</div>
</div><!-- /content -->
<div data-role="footer" class="footer-docs" data-theme="c">
<p>&copy;2011 The jQuery Project</p>
</div>
</div><!-- /page -->
</body>
</html>

30
docs/forms/forms-slider.html
View file

@ -21,6 +21,7 @@
</div><!-- /header -->
<div data-role="content">
<div class="content-primary">
<form action="#" method="get">
@ -62,7 +63,34 @@ $("input[type=range]").val(60).slider("refresh");
</form>
</div><!-- /content -->
</div><!--/content-primary -->
<div class="content-secondary">
<div data-role="collapsible" data-collapsed="true" data-theme="b">
<h3>Demos &amp; Docs Sections</h3>
<ul data-role="listview" data-theme="c" data-dividertheme="d">
<li data-role="list-divider">Components</li>
<li><a href="../../docs/pages/index.html">Pages &amp; dialogs</a></li>
<li><a href="../../docs/toolbars/index.html">Toolbars</a></li>
<li><a href="../../docs/buttons/index.html">Buttons</a></li>
<li><a href="../../docs/content/index.html">Content formatting</a></li>
<li data-theme="a"><a href="../../docs/forms/index.html">Form elements</a></li>
<li><a href="../../docs/lists/index.html">List views</a></li>
</ul>
</div>
</div>
</div><!-- /content -->
<div data-role="footer" class="footer-docs" data-theme="c">
<p>&copy;2011 The jQuery Project</p>
</div>
</div><!-- /page -->
</body>

31
docs/forms/forms-switch.html
View file

@ -20,6 +20,7 @@
</div><!-- /header -->
<div data-role="content">
<div class="content-primary">
<form action="#" method="get">
@ -59,8 +60,36 @@ myswitch .slider("refresh");
</form>
</div><!-- /content -->
</div><!--/content-primary -->
<div class="content-secondary">
<div data-role="collapsible" data-collapsed="true" data-theme="b">
<h3>Demos &amp; Docs Sections</h3>
<ul data-role="listview" data-theme="c" data-dividertheme="d">
<li data-role="list-divider">Components</li>
<li><a href="../../docs/pages/index.html">Pages &amp; dialogs</a></li>
<li><a href="../../docs/toolbars/index.html">Toolbars</a></li>
<li><a href="../../docs/buttons/index.html">Buttons</a></li>
<li><a href="../../docs/content/index.html">Content formatting</a></li>
<li data-theme="a"><a href="../../docs/forms/index.html">Form elements</a></li>
<li><a href="../../docs/lists/index.html">List views</a></li>
</ul>
</div>
</div>
</div><!-- /content -->
<div data-role="footer" class="footer-docs" data-theme="c">
<p>&copy;2011 The jQuery Project</p>
</div>
</div><!-- /page -->
</body>
</html>

32
docs/forms/forms-text.html
View file

@ -21,6 +21,7 @@
</div><!-- /header -->
<div data-role="content">
<div class="content-primary">
<form action="#" method="get">
@ -107,8 +108,35 @@
</form>
</div><!-- /content -->
</div><!--/content-primary -->
<div class="content-secondary">
<div data-role="collapsible" data-collapsed="true" data-theme="b">
<h3>Demos &amp; Docs Sections</h3>
<ul data-role="listview" data-theme="c" data-dividertheme="d">
<li data-role="list-divider">Components</li>
<li><a href="../../docs/pages/index.html">Pages &amp; dialogs</a></li>
<li><a href="../../docs/toolbars/index.html">Toolbars</a></li>
<li><a href="../../docs/buttons/index.html">Buttons</a></li>
<li><a href="../../docs/content/index.html">Content formatting</a></li>
<li data-theme="a"><a href="../../docs/forms/index.html">Form elements</a></li>
<li><a href="../../docs/lists/index.html">List views</a></li>
</ul>
</div>
</div>
</div><!-- /content -->
<div data-role="footer" class="footer-docs" data-theme="c">
<p>&copy;2011 The jQuery Project</p>
</div>
</div><!-- /page -->
</body>
</html>
</html>

38
docs/forms/forms-themes.html
View file

@ -21,7 +21,8 @@
</div><!-- /header -->
<div data-role="content">
<div class="content-primary">
<h2>Form themes</h2>
<p>jQuery Mobile has a rich <a href="../api/themes.html">theming system</a> that gives you full control of how pages and forms are styled. By default all form elements inside a container will automaticlaly adopt the same theme color swatch as their parent. This allows form elements to blend into their layouts with minimal work. The <code> data-theme</code> attribute can be applied any individual form element to apply any of the lettered theme color swatches to create contrast and emphasis in your designs.</p>
@ -363,8 +364,35 @@
</form>
</div><!-- /content -->
</div><!-- /page -->
</div><!--/content-primary -->
</body>
</html>
<div class="content-secondary">
<div data-role="collapsible" data-collapsed="true" data-theme="b">
<h3>Demos &amp; Docs Sections</h3>
<ul data-role="listview" data-theme="c" data-dividertheme="d">
<li data-role="list-divider">Components</li>
<li><a href="../../docs/pages/index.html">Pages &amp; dialogs</a></li>
<li><a href="../../docs/toolbars/index.html">Toolbars</a></li>
<li><a href="../../docs/buttons/index.html">Buttons</a></li>
<li><a href="../../docs/content/index.html">Content formatting</a></li>
<li data-theme="a"><a href="../../docs/forms/index.html">Form elements</a></li>
<li><a href="../../docs/lists/index.html">List views</a></li>
</ul>
</div>
</div>
</div><!-- /content -->
<div data-role="footer" class="footer-docs" data-theme="c">
<p>&copy;2011 The jQuery Project</p>
</div>
</div><!-- /page -->
</body>
</html>

1
docs/forms/index.html
View file

@ -21,6 +21,7 @@
</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">

38
docs/forms/plugin-eventsmethods.html
View file

@ -21,6 +21,7 @@
</div><!-- /header -->
<div data-role="content">
<div class="content-primary">
<p>After jQuery Mobile auto-enhances form controls into custom controls, you can manipulate many of their properties via plugin methods. The currently available methods are listed below. Check Github for updates - we're working on complete coverage.</p>
@ -176,9 +177,36 @@ $('input').button('disable');
<p>The page plugin contains a list of input types that are set to either true which means they'll degrade to type=text, false which means they'll be left alone, or a string such as "number", which means they'll be converted to that type (such as the case of type=range).</p>
<p>You can configure which types are changed via the page plugin's <code>degradeInputs</code> option, which can be manipulated externally via <code>$.mobile.page.prototype.options.degradeInputs</code>, which has properties: color, date, datetime, "datetime-local", email, month, number, range, search, tel, time, url, and week. Be sure to configure this inside an event handler bound to the <code>mobileinit</code> event, so that it applies to the first page as well as subsequent pages that are loaded.</p>
</div><!-- /content -->
</div><!-- /page -->
</div><!--/content-primary -->
</body>
</html>
<div class="content-secondary">
<div data-role="collapsible" data-collapsed="true" data-theme="b">
<h3>Demos &amp; Docs Sections</h3>
<ul data-role="listview" data-theme="c" data-dividertheme="d">
<li data-role="list-divider">Components</li>
<li><a href="../../docs/pages/index.html">Pages &amp; dialogs</a></li>
<li><a href="../../docs/toolbars/index.html">Toolbars</a></li>
<li><a href="../../docs/buttons/index.html">Buttons</a></li>
<li><a href="../../docs/content/index.html">Content formatting</a></li>
<li data-theme="a"><a href="../../docs/forms/index.html">Form elements</a></li>
<li><a href="../../docs/lists/index.html">List views</a></li>
</ul>
</div>
</div>
</div><!-- /content -->
<div data-role="footer" class="footer-docs" data-theme="c">
<p>&copy;2011 The jQuery Project</p>
</div>
</div><!-- /page -->
</body>
</html>

38
docs/lists/docs-lists.html
View file

@ -21,7 +21,7 @@
</div><!-- /header -->
<div data-role="content">
<div class="content-primary">
<h2>Basic linked lists</h2>
<p>A list view is coded as a simple unordered list containing linked list items with a <code> data-role="listview"</code> attribute. jQuery Mobile will apply all the necessary styles to transform the list into a mobile-friendly list view with right arrow indicator that fills the full width of the browser window. When you tap on the list item, the framework will trigger a click on the first link inside the list item, issue an AJAX request for the URL in the link, create the new page in the DOM, then kick off a page transition. Here is the HTML markup for a basic linked list.</p>
@ -96,8 +96,36 @@
<p>We're currently working on a few improvements to the refresh method, so keep your eye on Github for updates.</p>
</div><!-- /content -->
</div><!-- /page -->
</div><!--/content-primary -->
</body>
</html>
<div class="content-secondary">
<div data-role="collapsible" data-collapsed="true" data-theme="b">
<h3>Demos &amp; Docs Sections</h3>
<ul data-role="listview" data-theme="c" data-dividertheme="d">
<li data-role="list-divider">Components</li>
<li><a href="../../docs/pages/index.html">Pages &amp; dialogs</a></li>
<li><a href="../../docs/toolbars/index.html">Toolbars</a></li>
<li><a href="../../docs/buttons/index.html">Buttons</a></li>
<li><a href="../../docs/content/index.html">Content formatting</a></li>
<li><a href="../../docs/forms/index.html">Form elements</a></li>
<li data-theme="a"><a href="../../docs/lists/index.html">List views</a></li>
</ul>
</div>
</div>
</div><!-- /content -->
<div data-role="footer" class="footer-docs" data-theme="c">
<p>&copy;2011 The jQuery Project</p>
</div>
</div><!-- /page -->
</body>
</html>

12
docs/lists/index.html
View file

@ -55,9 +55,15 @@
<!--<li><a href="api-lists.html">API documentation</a></li>-->
</ul>
</div><!-- /content -->
</div><!-- /page -->
</body>
</html>
<div data-role="footer" class="footer-docs" data-theme="c">
<p>&copy;2011 The jQuery Project</p>
</div>
</div><!-- /page -->
</body>
</html>

38
docs/lists/lists-all-full.html
View file

@ -21,7 +21,7 @@
</div><!-- /header -->
<div data-role="content">
<div class="content-primary">
<form>
<h2>Simple list</h2>
@ -120,9 +120,35 @@
</form>
</div><!-- /content -->
</div><!-- /page -->
</div><!--/content-primary -->
</body>
</html>
<div class="content-secondary">
<div data-role="collapsible" data-collapsed="true" data-theme="b">
<h3>Demos &amp; Docs Sections</h3>
<ul data-role="listview" data-theme="c" data-dividertheme="d">
<li data-role="list-divider">Components</li>
<li><a href="../../docs/pages/index.html">Pages &amp; dialogs</a></li>
<li><a href="../../docs/toolbars/index.html">Toolbars</a></li>
<li><a href="../../docs/buttons/index.html">Buttons</a></li>
<li><a href="../../docs/content/index.html">Content formatting</a></li>
<li><a href="../../docs/forms/index.html">Form elements</a></li>
<li data-theme="a"><a href="../../docs/lists/index.html">List views</a></li>
</ul>
</div>
</div>
</div><!-- /content -->
<div data-role="footer" class="footer-docs" data-theme="c">
<p>&copy;2011 The jQuery Project</p>
</div>
</div><!-- /page -->
</body>
</html>

36
docs/lists/lists-count.html
View file

@ -21,6 +21,7 @@
</div><!-- /header -->
<div data-role="content">
<div class="content-primary">
<ul data-role="listview">
<li><a href="index.html">Inbox <span class="ui-li-count">12</span></a></li>
<li><a href="index.html">Outbox <span class="ui-li-count">0</span></a></li>
@ -28,8 +29,35 @@
<li><a href="index.html">Sent <span class="ui-li-count">328</span></a></li>
<li><a href="index.html">Trash <span class="ui-li-count">62</span></a></li>
</ul>
</div><!-- /content -->
</div><!-- /page -->
</div><!--/content-primary -->
</body>
</html>
<div class="content-secondary">
<div data-role="collapsible" data-collapsed="true" data-theme="b">
<h3>Demos &amp; Docs Sections</h3>
<ul data-role="listview" data-theme="c" data-dividertheme="d">
<li data-role="list-divider">Components</li>
<li><a href="../../docs/pages/index.html">Pages &amp; dialogs</a></li>
<li><a href="../../docs/toolbars/index.html">Toolbars</a></li>
<li><a href="../../docs/buttons/index.html">Buttons</a></li>
<li><a href="../../docs/content/index.html">Content formatting</a></li>
<li><a href="../../docs/forms/index.html">Form elements</a></li>
<li data-theme="a"><a href="../../docs/lists/index.html">List views</a></li>
</ul>
</div>
</div>
</div><!-- /content -->
<div data-role="footer" class="footer-docs" data-theme="c">
<p>&copy;2011 The jQuery Project</p>
</div>
</div><!-- /page -->
</body>
</html>

36
docs/lists/lists-divider.html
View file

@ -21,6 +21,7 @@
</div><!-- /header -->
<div data-role="content">
<div class="content-primary">
<ul data-role="listview">
<li data-role="list-divider">A</li>
<li><a href="index.html">Adam Kinkaid</a></li>
@ -59,8 +60,35 @@
<li data-role="list-divider">S</li>
<li><a href="index.html">Sawyer Wakefield</a></li>
</ul>
</div><!-- /content -->
</div><!-- /page -->
</div><!--/content-primary -->
</body>
</html>
<div class="content-secondary">
<div data-role="collapsible" data-collapsed="true" data-theme="b">
<h3>Demos &amp; Docs Sections</h3>
<ul data-role="listview" data-theme="c" data-dividertheme="d">
<li data-role="list-divider">Components</li>
<li><a href="../../docs/pages/index.html">Pages &amp; dialogs</a></li>
<li><a href="../../docs/toolbars/index.html">Toolbars</a></li>
<li><a href="../../docs/buttons/index.html">Buttons</a></li>
<li><a href="../../docs/content/index.html">Content formatting</a></li>
<li><a href="../../docs/forms/index.html">Form elements</a></li>
<li data-theme="a"><a href="../../docs/lists/index.html">List views</a></li>
</ul>
</div>
</div>
</div><!-- /content -->
<div data-role="footer" class="footer-docs" data-theme="c">
<p>&copy;2011 The jQuery Project</p>
</div>
</div><!-- /page -->
</body>
</html>

37
docs/lists/lists-formatting.html
View file

@ -21,7 +21,7 @@
</div><!-- /header -->
<div data-role="content">
<div class="content-primary">
<ul data-role="listview">
<li data-role="list-divider">Friday, October 8, 2010 <span class="ui-li-count">2</span></li>
<li><a href="index.html">
@ -80,8 +80,35 @@
<p class="ui-li-aside"><strong>6:24</strong>AM</p>
</a></li>
</ul>
</div><!-- /content -->
</div><!-- /page -->
</div><!--/content-primary -->
</body>
</html>
<div class="content-secondary">
<div data-role="collapsible" data-collapsed="true" data-theme="b">
<h3>Demos &amp; Docs Sections</h3>
<ul data-role="listview" data-theme="c" data-dividertheme="d">
<li data-role="list-divider">Components</li>
<li><a href="../../docs/pages/index.html">Pages &amp; dialogs</a></li>
<li><a href="../../docs/toolbars/index.html">Toolbars</a></li>
<li><a href="../../docs/buttons/index.html">Buttons</a></li>
<li><a href="../../docs/content/index.html">Content formatting</a></li>
<li><a href="../../docs/forms/index.html">Form elements</a></li>
<li data-theme="a"><a href="../../docs/lists/index.html">List views</a></li>
</ul>
</div>
</div>
</div><!-- /content -->
<div data-role="footer" class="footer-docs" data-theme="c">
<p>&copy;2011 The jQuery Project</p>
</div>
</div><!-- /page -->
</body>
</html>

37
docs/lists/lists-forms-inset.html
View file

@ -21,7 +21,7 @@
</div><!-- /header -->
<div data-role="content">
<div class="content-primary">
<form>
<ul data-role="listview" data-inset="true">
<li data-role="fieldcontain">
@ -197,8 +197,35 @@
</form>
</div><!-- /content -->
</div><!-- /page -->
</div><!--/content-primary -->
</body>
</html>
<div class="content-secondary">
<div data-role="collapsible" data-collapsed="true" data-theme="b">
<h3>Demos &amp; Docs Sections</h3>
<ul data-role="listview" data-theme="c" data-dividertheme="d">
<li data-role="list-divider">Components</li>
<li><a href="../../docs/pages/index.html">Pages &amp; dialogs</a></li>
<li><a href="../../docs/toolbars/index.html">Toolbars</a></li>
<li><a href="../../docs/buttons/index.html">Buttons</a></li>
<li><a href="../../docs/content/index.html">Content formatting</a></li>
<li><a href="../../docs/forms/index.html">Form elements</a></li>
<li data-theme="a"><a href="../../docs/lists/index.html">List views</a></li>
</ul>
</div>
</div>
</div><!-- /content -->
<div data-role="footer" class="footer-docs" data-theme="c">
<p>&copy;2011 The jQuery Project</p>
</div>
</div><!-- /page -->
</body>
</html>

37
docs/lists/lists-forms.html
View file

@ -21,7 +21,7 @@
</div><!-- /header -->
<div data-role="content">
<div class="content-primary">
<form>
<ul data-role="listview">
<li data-role="fieldcontain">
@ -195,8 +195,35 @@
</form>
</div><!-- /content -->
</div><!-- /page -->
</div><!--/content-primary -->
</body>
</html>
<div class="content-secondary">
<div data-role="collapsible" data-collapsed="true" data-theme="b">
<h3>Demos &amp; Docs Sections</h3>
<ul data-role="listview" data-theme="c" data-dividertheme="d">
<li data-role="list-divider">Components</li>
<li><a href="../../docs/pages/index.html">Pages &amp; dialogs</a></li>
<li><a href="../../docs/toolbars/index.html">Toolbars</a></li>
<li><a href="../../docs/buttons/index.html">Buttons</a></li>
<li><a href="../../docs/content/index.html">Content formatting</a></li>
<li><a href="../../docs/forms/index.html">Form elements</a></li>
<li data-theme="a"><a href="../../docs/lists/index.html">List views</a></li>
</ul>
</div>
</div>
</div><!-- /content -->
<div data-role="footer" class="footer-docs" data-theme="c">
<p>&copy;2011 The jQuery Project</p>
</div>
</div><!-- /page -->
</body>
</html>

37
docs/lists/lists-icons.html
View file

@ -21,7 +21,7 @@
</div><!-- /header -->
<div data-role="content">
<div class="content-primary">
<ul data-role="listview">
<li><a href="index.html"><img src="images/gf.png" alt="France" class="ui-li-icon">France <span class="ui-li-count">4</span></a></li>
<li><a href="index.html"><img src="images/de.png" alt="Germany" class="ui-li-icon">Germany <span class="ui-li-count">4</span></a></li>
@ -35,8 +35,35 @@
</ul>
</div><!-- /content -->
</div><!-- /page -->
</div><!--/content-primary -->
</body>
</html>
<div class="content-secondary">
<div data-role="collapsible" data-collapsed="true" data-theme="b">
<h3>Demos &amp; Docs Sections</h3>
<ul data-role="listview" data-theme="c" data-dividertheme="d">
<li data-role="list-divider">Components</li>
<li><a href="../../docs/pages/index.html">Pages &amp; dialogs</a></li>
<li><a href="../../docs/toolbars/index.html">Toolbars</a></li>
<li><a href="../../docs/buttons/index.html">Buttons</a></li>
<li><a href="../../docs/content/index.html">Content formatting</a></li>
<li><a href="../../docs/forms/index.html">Form elements</a></li>
<li data-theme="a"><a href="../../docs/lists/index.html">List views</a></li>
</ul>
</div>
</div>
</div><!-- /content -->
<div data-role="footer" class="footer-docs" data-theme="c">
<p>&copy;2011 The jQuery Project</p>
</div>
</div><!-- /page -->
</body>
</html>

37
docs/lists/lists-inset.html
View file

@ -21,7 +21,7 @@
</div><!-- /header -->
<div data-role="content">
<div class="content-primary">
<form>
<h2>Simple list</h2>
@ -121,8 +121,35 @@
</form>
</div><!-- /content -->
</div><!-- /page -->
</div><!--/content-primary -->
</body>
</html>
<div class="content-secondary">
<div data-role="collapsible" data-collapsed="true" data-theme="b">
<h3>Demos &amp; Docs Sections</h3>
<ul data-role="listview" data-theme="c" data-dividertheme="d">
<li data-role="list-divider">Components</li>
<li><a href="../../docs/pages/index.html">Pages &amp; dialogs</a></li>
<li><a href="../../docs/toolbars/index.html">Toolbars</a></li>
<li><a href="../../docs/buttons/index.html">Buttons</a></li>
<li><a href="../../docs/content/index.html">Content formatting</a></li>
<li><a href="../../docs/forms/index.html">Form elements</a></li>
<li data-theme="a"><a href="../../docs/lists/index.html">List views</a></li>
</ul>
</div>
</div>
</div><!-- /content -->
<div data-role="footer" class="footer-docs" data-theme="c">
<p>&copy;2011 The jQuery Project</p>
</div>
</div><!-- /page -->
</body>
</html>

37
docs/lists/lists-nested.html
View file

@ -21,6 +21,7 @@
</div><!-- /header -->
<div data-role="content">
<div class="content-primary">
<ul data-role="listview">
<li>
<h3>Animals</h3>
@ -139,9 +140,35 @@
</ul>
</li>
</ul>
</div><!-- /content -->
</div><!-- /page -->
</div><!--/content-primary -->
</body>
</html>
<div class="content-secondary">
<div data-role="collapsible" data-collapsed="true" data-theme="b">
<h3>Demos &amp; Docs Sections</h3>
<ul data-role="listview" data-theme="c" data-dividertheme="d">
<li data-role="list-divider">Components</li>
<li><a href="../../docs/pages/index.html">Pages &amp; dialogs</a></li>
<li><a href="../../docs/toolbars/index.html">Toolbars</a></li>
<li><a href="../../docs/buttons/index.html">Buttons</a></li>
<li><a href="../../docs/content/index.html">Content formatting</a></li>
<li><a href="../../docs/forms/index.html">Form elements</a></li>
<li data-theme="a"><a href="../../docs/lists/index.html">List views</a></li>
</ul>
</div>
</div>
</div><!-- /content -->
<div data-role="footer" class="footer-docs" data-theme="c">
<p>&copy;2011 The jQuery Project</p>
</div>
</div><!-- /page -->
</body>
</html>

36
docs/lists/lists-ol.html
View file

@ -21,6 +21,7 @@
</div><!-- /header -->
<div data-role="content">
<div class="content-primary">
<ol data-role="listview">
<li><a href="index.html">The Godfather</a></li>
<li><a href="index.html">Inception</a></li>
@ -43,8 +44,35 @@
<li><a href="index.html">The Big Lebowski</a></li>
<li><a href="index.html">Psycho</a></li>
</ol>
</div><!-- /content -->
</div><!-- /page -->
</div><!--/content-primary -->
</body>
</html>
<div class="content-secondary">
<div data-role="collapsible" data-collapsed="true" data-theme="b">
<h3>Demos &amp; Docs Sections</h3>
<ul data-role="listview" data-theme="c" data-dividertheme="d">
<li data-role="list-divider">Components</li>
<li><a href="../../docs/pages/index.html">Pages &amp; dialogs</a></li>
<li><a href="../../docs/toolbars/index.html">Toolbars</a></li>
<li><a href="../../docs/buttons/index.html">Buttons</a></li>
<li><a href="../../docs/content/index.html">Content formatting</a></li>
<li><a href="../../docs/forms/index.html">Form elements</a></li>
<li data-theme="a"><a href="../../docs/lists/index.html">List views</a></li>
</ul>
</div>
</div>
</div><!-- /content -->
<div data-role="footer" class="footer-docs" data-theme="c">
<p>&copy;2011 The jQuery Project</p>
</div>
</div><!-- /page -->
</body>
</html>

37
docs/lists/lists-readonly-inset.html
View file

@ -21,7 +21,7 @@
</div><!-- /header -->
<div data-role="content">
<div class="content-primary">
<h2>Simple list</h2>
<ul data-role="listview" data-inset="true">
@ -117,8 +117,35 @@
</div><!-- /content -->
</div><!-- /page -->
</div><!--/content-primary -->
</body>
</html>
<div class="content-secondary">
<div data-role="collapsible" data-collapsed="true" data-theme="b">
<h3>Demos &amp; Docs Sections</h3>
<ul data-role="listview" data-theme="c" data-dividertheme="d">
<li data-role="list-divider">Components</li>
<li><a href="../../docs/pages/index.html">Pages &amp; dialogs</a></li>
<li><a href="../../docs/toolbars/index.html">Toolbars</a></li>
<li><a href="../../docs/buttons/index.html">Buttons</a></li>
<li><a href="../../docs/content/index.html">Content formatting</a></li>
<li><a href="../../docs/forms/index.html">Form elements</a></li>
<li data-theme="a"><a href="../../docs/lists/index.html">List views</a></li>
</ul>
</div>
</div>
</div><!-- /content -->
<div data-role="footer" class="footer-docs" data-theme="c">
<p>&copy;2011 The jQuery Project</p>
</div>
</div><!-- /page -->
</body>
</html>

37
docs/lists/lists-readonly.html
View file

@ -21,7 +21,7 @@
</div><!-- /header -->
<div data-role="content">
<div class="content-primary">
<h2>Simple list</h2>
<ul data-role="listview">
@ -113,8 +113,35 @@
</ul>
</div><!-- /content -->
</div><!-- /page -->
</div><!--/content-primary -->
</body>
</html>
<div class="content-secondary">
<div data-role="collapsible" data-collapsed="true" data-theme="b">
<h3>Demos &amp; Docs Sections</h3>
<ul data-role="listview" data-theme="c" data-dividertheme="d">
<li data-role="list-divider">Components</li>
<li><a href="../../docs/pages/index.html">Pages &amp; dialogs</a></li>
<li><a href="../../docs/toolbars/index.html">Toolbars</a></li>
<li><a href="../../docs/buttons/index.html">Buttons</a></li>
<li><a href="../../docs/content/index.html">Content formatting</a></li>
<li><a href="../../docs/forms/index.html">Form elements</a></li>
<li data-theme="a"><a href="../../docs/lists/index.html">List views</a></li>
</ul>
</div>
</div>
</div><!-- /content -->
<div data-role="footer" class="footer-docs" data-theme="c">
<p>&copy;2011 The jQuery Project</p>
</div>
</div><!-- /page -->
</body>
</html>

36
docs/lists/lists-search-inset.html
View file

@ -21,6 +21,7 @@
</div><!-- /header -->
<div data-role="content">
<div class="content-primary">
<ul data-role="listview" data-filter="true" data-inset="true">
<li><a href="index.html">Acura</a></li>
<li><a href="index.html">Audi</a></li>
@ -45,8 +46,35 @@
<li><a href="index.html">Volkswagon</a></li>
<li><a href="index.html">Volvo</a></li>
</ul>
</div><!-- /content -->
</div><!-- /page -->
</div><!--/content-primary -->
</body>
</html>
<div class="content-secondary">
<div data-role="collapsible" data-collapsed="true" data-theme="b">
<h3>Demos &amp; Docs Sections</h3>
<ul data-role="listview" data-theme="c" data-dividertheme="d">
<li data-role="list-divider">Components</li>
<li><a href="../../docs/pages/index.html">Pages &amp; dialogs</a></li>
<li><a href="../../docs/toolbars/index.html">Toolbars</a></li>
<li><a href="../../docs/buttons/index.html">Buttons</a></li>
<li><a href="../../docs/content/index.html">Content formatting</a></li>
<li><a href="../../docs/forms/index.html">Form elements</a></li>
<li data-theme="a"><a href="../../docs/lists/index.html">List views</a></li>
</ul>
</div>
</div>
</div><!-- /content -->
<div data-role="footer" class="footer-docs" data-theme="c">
<p>&copy;2011 The jQuery Project</p>
</div>
</div><!-- /page -->
</body>
</html>

36
docs/lists/lists-search-with-dividers.html
View file

@ -20,6 +20,7 @@
</div><!-- /header -->
<div data-role="content">
<div class="content-primary">
<ul data-role="listview" data-filter="true" data-filter-placeholder="Search people..." data-filter-theme="b">
<li data-role="list-divider">A</li>
<li><a href="index.html">Adam Kinkaid</a></li>
@ -58,8 +59,35 @@
<li data-role="list-divider">S</li>
<li><a href="index.html">Sawyer Wakefield</a></li>
</ul>
</div><!-- /content -->
</div><!-- /page -->
</div><!--/content-primary -->
</body>
</html>
<div class="content-secondary">
<div data-role="collapsible" data-collapsed="true" data-theme="b">
<h3>Demos &amp; Docs Sections</h3>
<ul data-role="listview" data-theme="c" data-dividertheme="d">
<li data-role="list-divider">Components</li>
<li><a href="../../docs/pages/index.html">Pages &amp; dialogs</a></li>
<li><a href="../../docs/toolbars/index.html">Toolbars</a></li>
<li><a href="../../docs/buttons/index.html">Buttons</a></li>
<li><a href="../../docs/content/index.html">Content formatting</a></li>
<li><a href="../../docs/forms/index.html">Form elements</a></li>
<li data-theme="a"><a href="../../docs/lists/index.html">List views</a></li>
</ul>
</div>
</div>
</div><!-- /content -->
<div data-role="footer" class="footer-docs" data-theme="c">
<p>&copy;2011 The jQuery Project</p>
</div>
</div><!-- /page -->
</body>
</html>

36
docs/lists/lists-search.html
View file

@ -21,6 +21,7 @@
</div><!-- /header -->
<div data-role="content">
<div class="content-primary">
<ul data-role="listview" data-filter="true">
<li><a href="index.html">Acura</a></li>
<li><a href="index.html">Audi</a></li>
@ -45,8 +46,35 @@
<li><a href="index.html">Volkswagon</a></li>
<li><a href="index.html">Volvo</a></li>
</ul>
</div><!-- /content -->
</div><!-- /page -->
</div><!--/content-primary -->
</body>
</html>
<div class="content-secondary">
<div data-role="collapsible" data-collapsed="true" data-theme="b">
<h3>Demos &amp; Docs Sections</h3>
<ul data-role="listview" data-theme="c" data-dividertheme="d">
<li data-role="list-divider">Components</li>
<li><a href="../../docs/pages/index.html">Pages &amp; dialogs</a></li>
<li><a href="../../docs/toolbars/index.html">Toolbars</a></li>
<li><a href="../../docs/buttons/index.html">Buttons</a></li>
<li><a href="../../docs/content/index.html">Content formatting</a></li>
<li><a href="../../docs/forms/index.html">Form elements</a></li>
<li data-theme="a"><a href="../../docs/lists/index.html">List views</a></li>
</ul>
</div>
</div>
</div><!-- /content -->
<div data-role="footer" class="footer-docs" data-theme="c">
<p>&copy;2011 The jQuery Project</p>
</div>
</div><!-- /page -->
</body>
</html>

33
docs/lists/lists-split-purchase.html
View file

@ -21,15 +21,40 @@
</div><!-- /header -->
<div data-role="content">
<div class="content-primary">
<h4>This album costs $10.99 and includes 9 tracks.</h4>
<p>Your download will begin immediately on your mobile device and all tracks will by added your your library next time you sync.</p>
<a href="index.html" data-role="button" data-rel="back" data-theme="b">Purchase album</a>
<a href="index.html" data-role="button" data-rel="back">No thanks</a>
</div><!--/content-primary -->
<div class="content-secondary">
<div data-role="collapsible" data-collapsed="true" data-theme="b">
<h3>Demos &amp; Docs Sections</h3>
<ul data-role="listview" data-theme="c" data-dividertheme="d">
<li data-role="list-divider">Components</li>
<li><a href="../../docs/pages/index.html">Pages &amp; dialogs</a></li>
<li><a href="../../docs/toolbars/index.html">Toolbars</a></li>
<li><a href="../../docs/buttons/index.html">Buttons</a></li>
<li><a href="../../docs/content/index.html">Content formatting</a></li>
<li><a href="../../docs/forms/index.html">Form elements</a></li>
<li data-theme="a"><a href="../../docs/lists/index.html">List views</a></li>
</ul>
</div>
</div>
</div><!-- /content -->
</div><!-- /page -->
<div data-role="footer" class="footer-docs" data-theme="c">
<p>&copy;2011 The jQuery Project</p>
</div>
</div><!-- /page -->
</body>
</html>
</body>
</html>

34
docs/lists/lists-split.html
View file

@ -21,7 +21,7 @@
</div><!-- /header -->
<div data-role="content">
<div class="content-primary">
<ul data-role="listview" data-split-icon="gear" data-split-theme="d">
<li><a href="index.html">
<img src="images/album-bb.jpg" />
@ -93,9 +93,35 @@
</a><a href="lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album
</a></li>
</ul>
</div><!--/content-primary -->
<div class="content-secondary">
<div data-role="collapsible" data-collapsed="true" data-theme="b">
<h3>Demos &amp; Docs Sections</h3>
<ul data-role="listview" data-theme="c" data-dividertheme="d">
<li data-role="list-divider">Components</li>
<li><a href="../../docs/pages/index.html">Pages &amp; dialogs</a></li>
<li><a href="../../docs/toolbars/index.html">Toolbars</a></li>
<li><a href="../../docs/buttons/index.html">Buttons</a></li>
<li><a href="../../docs/content/index.html">Content formatting</a></li>
<li><a href="../../docs/forms/index.html">Form elements</a></li>
<li data-theme="a"><a href="../../docs/lists/index.html">List views</a></li>
</ul>
</div>
</div>
</div><!-- /content -->
</div><!-- /page -->
<div data-role="footer" class="footer-docs" data-theme="c">
<p>&copy;2011 The jQuery Project</p>
</div>
</body>
</html>
</div><!-- /page -->
</body>
</html>

38
docs/lists/lists-themes.html
View file

@ -21,7 +21,7 @@
</div><!-- /header -->
<div data-role="content" class="ui-body">
<div class="content-primary">
<p>All the standard button swatches can be applied to lists. The framework assigns a default list theme swatch of &quot;c&quot; (silver in the default theme) and swatch &quot;b&quot; (blue in default theme) for dividers. Below is a default themed list.</p>
@ -210,9 +210,35 @@
</ul>
</div><!-- /content -->
</div><!-- /page -->
</div><!--/content-primary -->
</body>
</html>
<div class="content-secondary">
<div data-role="collapsible" data-collapsed="true" data-theme="b">
<h3>Demos &amp; Docs Sections</h3>
<ul data-role="listview" data-theme="c" data-dividertheme="d">
<li data-role="list-divider">Components</li>
<li><a href="../../docs/pages/index.html">Pages &amp; dialogs</a></li>
<li><a href="../../docs/toolbars/index.html">Toolbars</a></li>
<li><a href="../../docs/buttons/index.html">Buttons</a></li>
<li><a href="../../docs/content/index.html">Content formatting</a></li>
<li><a href="../../docs/forms/index.html">Form elements</a></li>
<li data-theme="a"><a href="../../docs/lists/index.html">List views</a></li>
</ul>
</div>
</div>
</div><!-- /content -->
<div data-role="footer" class="footer-docs" data-theme="c">
<p>&copy;2011 The jQuery Project</p>
</div>
</div><!-- /page -->
</body>
</html>

33
docs/lists/lists-thumbnails.html
View file

@ -21,7 +21,7 @@
</div><!-- /header -->
<div data-role="content">
<div class="content-primary">
<ul data-role="listview">
<li><a href="index.html">
<img src="images/album-bb.jpg" />
@ -81,10 +81,35 @@
<p>Arcade Fire</p>
</a></li>
</ul>
</div><!--/content-primary -->
<div class="content-secondary">
<div data-role="collapsible" data-collapsed="true" data-theme="b">
<h3>Demos &amp; Docs Sections</h3>
<ul data-role="listview" data-theme="c" data-dividertheme="d">
<li data-role="list-divider">Components</li>
<li><a href="../../docs/pages/index.html">Pages &amp; dialogs</a></li>
<li><a href="../../docs/toolbars/index.html">Toolbars</a></li>
<li><a href="../../docs/buttons/index.html">Buttons</a></li>
<li><a href="../../docs/content/index.html">Content formatting</a></li>
<li><a href="../../docs/forms/index.html">Form elements</a></li>
<li data-theme="a"><a href="../../docs/lists/index.html">List views</a></li>
</ul>
</div>
</div>
</div><!-- /content -->
</div><!-- /page -->
</body>
</html>
<div data-role="footer" class="footer-docs" data-theme="c">
<p>&copy;2011 The jQuery Project</p>
</div>
</div><!-- /page -->
</body>
</html>

37
docs/lists/lists-ul.html
View file

@ -21,7 +21,7 @@
</div><!-- /header -->
<div data-role="content">
<div class="content-primary">
<ul data-role="listview">
<li><a href="index.html">Acura</a></li>
<li><a href="index.html">Audi</a></li>
@ -46,8 +46,35 @@
<li><a href="index.html">Volkswagon</a></li>
<li><a href="index.html">Volvo</a></li>
</ul>
</div><!-- /content -->
</div><!-- /page -->
</div><!--/content-primary -->
</body>
</html>
<div class="content-secondary">
<div data-role="collapsible" data-collapsed="true" data-theme="b">
<h3>Demos &amp; Docs Sections</h3>
<ul data-role="listview" data-theme="c" data-dividertheme="d">
<li data-role="list-divider">Components</li>
<li><a href="../../docs/pages/index.html">Pages &amp; dialogs</a></li>
<li><a href="../../docs/toolbars/index.html">Toolbars</a></li>
<li><a href="../../docs/buttons/index.html">Buttons</a></li>
<li><a href="../../docs/content/index.html">Content formatting</a></li>
<li><a href="../../docs/forms/index.html">Form elements</a></li>
<li data-theme="a"><a href="../../docs/lists/index.html">List views</a></li>
</ul>
</div>
</div>
</div><!-- /content -->
<div data-role="footer" class="footer-docs" data-theme="c">
<p>&copy;2011 The jQuery Project</p>
</div>
</div><!-- /page -->
</body>
</html>

30
docs/pages/docs-dialogs.html
View file

@ -21,6 +21,7 @@
</div><!-- /header -->
<div data-role="content" class="ui-body">
<div class="content-primary">
<h2>Creating dialogs</h2>
<p>Any page can be presented as a modal dialog by adding the <code>data-rel="dialog"</code> attribute to the page anchor link. When the "dialog" attribute is applied, the framework adds styles to add rounded corners, margins around the page and a dark background to make the "dialog" appear to be suspended above the page.</p>
@ -67,7 +68,34 @@
<a href="dialog-buttons.html" data-role="button" data-inline="true" data-rel="dialog" data-transition="slidedown">Share photos...</a>
</div><!-- /content -->
</div><!--/content-primary -->
<div class="content-secondary">
<div data-role="collapsible" data-collapsed="true" data-theme="b">
<h3>Demos &amp; Docs Sections</h3>
<ul data-role="listview" data-theme="c" data-dividertheme="d">
<li data-role="list-divider">Components</li>
<li data-theme="a"><a href="../../docs/pages/index.html">Pages &amp; dialogs</a></li>
<li><a href="../../docs/toolbars/index.html">Toolbars</a></li>
<li><a href="../../docs/buttons/index.html">Buttons</a></li>
<li><a href="../../docs/content/index.html">Content formatting</a></li>
<li><a href="../../docs/forms/index.html">Form elements</a></li>
<li><a href="../../docs/lists/index.html">List views</a></li>
</ul>
</div>
</div>
</div><!-- /content -->
<div data-role="footer" class="footer-docs" data-theme="c">
<p>&copy;2011 The jQuery Project</p>
</div>
</div><!-- /page -->
</body>

38
docs/pages/docs-link-scenarios.html
View file

@ -21,7 +21,7 @@
</div><!-- /header -->
<div data-role="content">
<div class="content-primary">
<p>jQuery Mobile is designed to work with simple page linking conventions. The following list demonstrates how different types of links will be handled, either remotely or through an Ajax Request.</p>
<ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="b">
@ -41,8 +41,36 @@
<li><a href="#">[href="#"]</a></li>
</ul>
</div><!-- /content -->
</div><!-- /page -->
</body>
</html>
</div><!--/content-primary -->
<div class="content-secondary">
<div data-role="collapsible" data-collapsed="true" data-theme="b">
<h3>Demos &amp; Docs Sections</h3>
<ul data-role="listview" data-theme="c" data-dividertheme="d">
<li data-role="list-divider">Components</li>
<li data-theme="a"><a href="../../docs/pages/index.html">Pages &amp; dialogs</a></li>
<li><a href="../../docs/toolbars/index.html">Toolbars</a></li>
<li><a href="../../docs/buttons/index.html">Buttons</a></li>
<li><a href="../../docs/content/index.html">Content formatting</a></li>
<li><a href="../../docs/forms/index.html">Form elements</a></li>
<li><a href="../../docs/lists/index.html">List views</a></li>
</ul>
</div>
</div>
</div><!-- /content -->
<div data-role="footer" class="footer-docs" data-theme="c">
<p>&copy;2011 The jQuery Project</p>
</div>
</div><!-- /page -->
</body>
</html>

4
docs/pages/docs-links-urltest/index.html
View file

@ -13,8 +13,8 @@
</head>
<body>
<div data-role="page" data-url="docs/pages/docs-links-urltest/" data-theme="f">
<div data-role="header">
<div data-role="page" data-url="docs/pages/docs-links-urltest/">
<div data-role="header" data-theme="f">
<h1>URL Test Page</h1>
</div>
<div data-role="content">

39
docs/pages/docs-links.html
View file

@ -21,7 +21,7 @@
</div><!-- /header -->
<div data-role="content">
<div class="content-primary">
<p>jQuery Mobile is designed to work with simple page linking conventions. Essentially, you can link pages and assets as you normally would, and jQuery Mobile will automatically handle page requests in a single-page model, using Ajax when possible. When Ajax isn't possible (such as a non-same-domain url, or if specified using certain attributes on the link), a normal http request is used instead.</p>
<p>The goal of this model is to allow developers to create websites using best practices &mdash; where ordinary links will "just work" without any special configuration &mdash; while creating a rich, native-like experience that can't be achieved with standard HTTP requests.</p>
@ -72,9 +72,36 @@
<p>Learn more about the technical details of the <a href="docs-navmodel.html">Ajax, hashes and history</a> in jQuery mobile.</p>
</div><!-- /content -->
</div><!-- /page -->
</body>
</html>
</div><!--/content-primary -->
<div class="content-secondary">
<div data-role="collapsible" data-collapsed="true" data-theme="b">
<h3>Demos &amp; Docs Sections</h3>
<ul data-role="listview" data-theme="c" data-dividertheme="d">
<li data-role="list-divider">Components</li>
<li data-theme="a"><a href="../../docs/pages/index.html">Pages &amp; dialogs</a></li>
<li><a href="../../docs/toolbars/index.html">Toolbars</a></li>
<li><a href="../../docs/buttons/index.html">Buttons</a></li>
<li><a href="../../docs/content/index.html">Content formatting</a></li>
<li><a href="../../docs/forms/index.html">Form elements</a></li>
<li><a href="../../docs/lists/index.html">List views</a></li>
</ul>
</div>
</div>
</div><!-- /content -->
<div data-role="footer" class="footer-docs" data-theme="c">
<p>&copy;2011 The jQuery Project</p>
</div>
</div><!-- /page -->
</body>
</html>

39
docs/pages/docs-navmodel.html
View file

@ -21,7 +21,7 @@
</div><!-- /header -->
<div data-role="content">
<div class="content-primary">
<h2>jQuery Mobile's navigation model</h2>
<p>A "page" in jQuery Mobile consists of an element (usually a <code>div</code>) with a <code> data-role</code> attribute set to <code>"page"</code>, which generally contains <code>div</code> elements with roles of <code>"header"</code>, <code>"content"</code>, and <code>"footer"</code>, each containing common markup, forms, and custom jQuery Mobile widgets.</p>
@ -94,9 +94,36 @@
<li><p>The "ui-page" key name used in sub-hash url references can be set to any value you'd like, so as to blend into your URL structure. This value is stored in <code>jQuery.mobile.subPageUrlKey</code>.</p></li>
</ul>
</div><!-- /content -->
</div><!-- /page -->
</body>
</html>
</div><!--/content-primary -->
<div class="content-secondary">
<div data-role="collapsible" data-collapsed="true" data-theme="b">
<h3>Demos &amp; Docs Sections</h3>
<ul data-role="listview" data-theme="c" data-dividertheme="d">
<li data-role="list-divider">Components</li>
<li data-theme="a"><a href="../../docs/pages/index.html">Pages &amp; dialogs</a></li>
<li><a href="../../docs/toolbars/index.html">Toolbars</a></li>
<li><a href="../../docs/buttons/index.html">Buttons</a></li>
<li><a href="../../docs/content/index.html">Content formatting</a></li>
<li><a href="../../docs/forms/index.html">Form elements</a></li>
<li><a href="../../docs/lists/index.html">List views</a></li>
</ul>
</div>
</div>
</div><!-- /content -->
<div data-role="footer" class="footer-docs" data-theme="c">
<p>&copy;2011 The jQuery Project</p>
</div>
</div><!-- /page -->
</body>
</html>

36
docs/pages/docs-pages.html
View file

@ -21,7 +21,7 @@
</div><!-- /header -->
<div data-role="content">
<div class="content-primary">
<p>The jQuery Mobile "page" structure is optimized to support either single pages, or local internal linked "pages" within a page.</p>
<p>The goal of this model is to allow developers to create websites using best practices &mdash; where ordinary links will "just work" without any special configuration &mdash; while creating a rich, native-like experience that can't be achieved with standard HTTP requests.</p>
@ -192,9 +192,35 @@
</div><!--/content-primary -->
</div><!-- /content -->
</div><!-- /page -->
<div class="content-secondary">
</body>
</html>
<div data-role="collapsible" data-collapsed="true" data-theme="b">
<h3>Demos &amp; Docs Sections</h3>
<ul data-role="listview" data-theme="c" data-dividertheme="d">
<li data-role="list-divider">Components</li>
<li data-theme="a"><a href="../../docs/pages/index.html">Pages &amp; dialogs</a></li>
<li><a href="../../docs/toolbars/index.html">Toolbars</a></li>
<li><a href="../../docs/buttons/index.html">Buttons</a></li>
<li><a href="../../docs/content/index.html">Content formatting</a></li>
<li><a href="../../docs/forms/index.html">Form elements</a></li>
<li><a href="../../docs/lists/index.html">List views</a></li>
</ul>
</div>
</div>
</div><!-- /content -->
<div data-role="footer" class="footer-docs" data-theme="c">
<p>&copy;2011 The jQuery Project</p>
</div>
</div><!-- /page -->
</body>
</html>

38
docs/pages/docs-transitions.html
View file

@ -21,7 +21,7 @@
</div><!-- /header -->
<div data-role="content">
<div class="content-primary">
<h2>Page transitions</h2>
<p>The jQuery Mobile framework includes a set of six CSS-based transition effects that can be applied to any object or page change event, which apply the chosen transition when navigating to a new page and the reverse transition for the Back button. By default, the framework applies the right to left slide transition.</p>
@ -48,8 +48,36 @@
<p><strong>Transitions from <a href="http://www.jqtouch.com/">jQtouch</a></strong> (<em>with small modifications</em>): Built by David Kaneda and maintained by Jonathan Stark.</p>
</div>
</div><!-- /content -->
</div><!-- /page -->
</body>
</html>
</div><!--/content-primary -->
<div class="content-secondary">
<div data-role="collapsible" data-collapsed="true" data-theme="b">
<h3>Demos &amp; Docs Sections</h3>
<ul data-role="listview" data-theme="c" data-dividertheme="d">
<li data-role="list-divider">Components</li>
<li data-theme="a"><a href="../../docs/pages/index.html">Pages &amp; dialogs</a></li>
<li><a href="../../docs/toolbars/index.html">Toolbars</a></li>
<li><a href="../../docs/buttons/index.html">Buttons</a></li>
<li><a href="../../docs/content/index.html">Content formatting</a></li>
<li><a href="../../docs/forms/index.html">Form elements</a></li>
<li><a href="../../docs/lists/index.html">List views</a></li>
</ul>
</div>
</div>
</div><!-- /content -->
<div data-role="footer" class="footer-docs" data-theme="c">
<p>&copy;2011 The jQuery Project</p>
</div>
</div><!-- /page -->
</body>
</html>

3
docs/pages/index.html
View file

@ -21,7 +21,8 @@
</div><!-- /header -->
<div data-role="content">
<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>
<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>
<ul data-role="listview" data-inset="true">

38
docs/pages/link-formats.html
View file

@ -21,7 +21,7 @@
</div><!-- /header -->
<div data-role="content">
<div class="content-primary">
<p>All standard HTML link types are supported in jQuery Mobile. To make the experience as polished as possible, any links to pages within the same domain will be automatically turned into Ajax requests and displayed with an animated page transition by the framework. </p>
<p>Links that point to other domains or that have <code>rel="external"</code>, <code>data-ajax="false"</code> or <code>target</code> attributes will not be loaded with Ajax and will cause a full page refresh. If multiple "pages" are contained within a single HTML document, they can be linked by referencing the ID of the page as an anchor (#foo).</p>
<p>All other types of links like <code>mailto:</code> and <code>tel:</code> aren't impacted by the framework and will work as expected. Learn more about the <a href="docs-navmodel.html">linking and navigation model</a> in jQuery Mobile</p>
@ -44,8 +44,36 @@
<li data-role="list-divider">Other</li>
<li><a href="#">A href="#" will return false</a></li>
</ul>
</div><!-- /content -->
</div><!-- /page -->
</body>
</html>
</div><!--/content-primary -->
<div class="content-secondary">
<div data-role="collapsible" data-collapsed="true" data-theme="b">
<h3>Demos &amp; Docs Sections</h3>
<ul data-role="listview" data-theme="c" data-dividertheme="d">
<li data-role="list-divider">Components</li>
<li data-theme="a"><a href="../../docs/pages/index.html">Pages &amp; dialogs</a></li>
<li><a href="../../docs/toolbars/index.html">Toolbars</a></li>
<li><a href="../../docs/buttons/index.html">Buttons</a></li>
<li><a href="../../docs/content/index.html">Content formatting</a></li>
<li><a href="../../docs/forms/index.html">Form elements</a></li>
<li><a href="../../docs/lists/index.html">List views</a></li>
</ul>
</div>
</div>
</div><!-- /content -->
<div data-role="footer" class="footer-docs" data-theme="c">
<p>&copy;2011 The jQuery Project</p>
</div>
</div><!-- /page -->
</body>
</html>

37
docs/pages/pages-themes.html
View file

@ -21,7 +21,7 @@
</div><!-- /header -->
<div data-role="content">
<div class="content-primary">
<h2>Page Theming</h2>
<p>jQuery Mobile has a rich <a href="../api/themes.html">theming system</a> that gives you full control of how pages are styled. There is detailed theming documentation within each page widget, but let's look at a few high-level examples of how theming is applied.</p>
@ -185,8 +185,35 @@
</div>
</div><!-- /content -->
</div><!-- /page -->
</div><!--/content-primary -->
</body>
</html>
<div class="content-secondary">
<div data-role="collapsible" data-collapsed="true" data-theme="b">
<h3>Demos &amp; Docs Sections</h3>
<ul data-role="listview" data-theme="c" data-dividertheme="d">
<li data-role="list-divider">Components</li>
<li data-theme="a"><a href="../../docs/pages/index.html">Pages &amp; dialogs</a></li>
<li><a href="../../docs/toolbars/index.html">Toolbars</a></li>
<li><a href="../../docs/buttons/index.html">Buttons</a></li>
<li><a href="../../docs/content/index.html">Content formatting</a></li>
<li><a href="../../docs/forms/index.html">Form elements</a></li>
<li><a href="../../docs/lists/index.html">List views</a></li>
</ul>
</div>
</div>
</div><!-- /content -->
<div data-role="footer" class="footer-docs" data-theme="c">
<p>&copy;2011 The jQuery Project</p>
</div>
</div><!-- /page -->
</body>
</html>

43
docs/toolbars/bars-fixed.html
View file

@ -22,7 +22,8 @@
</div>
<div data-role="content">
<h2>Fixed toolbars will re-appear after you scroll</h2>
<div class="content-primary">
<h2>Fixed toolbars will re-appear after you scroll</h2>
<p>This is a demo of the "fixed" headers and footers used in the jQuery Mobile framework. The page content flows naturally, allowing us to take advantage of native scrolling instead of a scripting a faux-scrolling workaround. The header and footer divs are right in the flow of the document, but whenever they are out of view, you can tap the screen to make them appear. Tapping again or scrolling the page will cause them to appear back in the flow of the page (at the top and bottom). </p>
<p>To set this behavior on a header or footer, add the <code> data-position="fixed"</code> attribute to the toolbar container.</p>
@ -109,14 +110,38 @@
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui.Donec non enim in turpis pulvinar facilisis. Ut felis.</p>
</div>
<div data-role="footer" data-position="fixed" data-theme="a">
<h1>Fixed Footer</h1>
</div>
</div>
</body>
</html>
</div><!--/content-primary -->
<div class="content-secondary">
<div data-role="collapsible" data-collapsed="true" data-theme="b">
<h3>Demos &amp; Docs Sections</h3>
<ul data-role="listview" data-theme="c" data-dividertheme="d">
<li data-role="list-divider">Components</li>
<li><a href="../../docs/pages/index.html">Pages &amp; dialogs</a></li>
<li data-theme="a"><a href="../../docs/toolbars/index.html">Toolbars</a></li>
<li><a href="../../docs/buttons/index.html">Buttons</a></li>
<li><a href="../../docs/content/index.html">Content formatting</a></li>
<li><a href="../../docs/forms/index.html">Form elements</a></li>
<li><a href="../../docs/lists/index.html">List views</a></li>
</ul>
</div>
</div>
</div><!-- /content -->
<div data-role="footer" class="footer-docs" data-theme="a">
<h1>Fixed Footer</h1>
</div>
</div><!-- /page -->
</body>
</html>

43
docs/toolbars/bars-fullscreen.html
View file

@ -21,7 +21,8 @@
</div>
<div data-role="content">
<img src="images/photo-run.jpeg" width="640" height="480" alt="Photo Run">
<div class="content-primary">
<img src="images/photo-run.jpeg" width="640" height="480" alt="Photo Run">
<p class="ui-body">This page demonstrates the "fullscreen" toolbar mode. This toolbar treatment is used in special cases where you want the content to fill the whole screen, and you want the header and footer toolbars to appear and disappear when the page is clicked responsively &mdash; a common scenario for photo, image or video viewers.</p>
@ -29,16 +30,36 @@
<p class="ui-body">Keep in mind that the toolbars in this mode will sit <strong>over</strong> page content, so not all content will be accessible with the toolbars open, just as shown in this demo.</p>
</div>
<div data-role="footer" data-position="fixed">
<h1>Fullscreen fixed footer</h1>
</div>
</div><!--/content-primary -->
</div>
<div class="content-secondary">
</body>
</html>
<div data-role="collapsible" data-collapsed="true" data-theme="b">
<h3>Demos &amp; Docs Sections</h3>
<ul data-role="listview" data-theme="c" data-dividertheme="d">
<li data-role="list-divider">Components</li>
<li><a href="../../docs/pages/index.html">Pages &amp; dialogs</a></li>
<li data-theme="a"><a href="../../docs/toolbars/index.html">Toolbars</a></li>
<li><a href="../../docs/buttons/index.html">Buttons</a></li>
<li><a href="../../docs/content/index.html">Content formatting</a></li>
<li><a href="../../docs/forms/index.html">Form elements</a></li>
<li><a href="../../docs/lists/index.html">List views</a></li>
</ul>
</div>
</div>
</div><!-- /content -->
<div data-role="footer" class="footer-docs" data-theme="a" data-position="fixed">
<h1>Fullscreen Fixed Footer</h1>
</div>
</div><!-- /page -->
</body>
</html>

36
docs/toolbars/bars-themes.html
View file

@ -22,7 +22,7 @@
<div data-role="content">
<div class="content-primary">
<p>Both the header and footer bars will be styled by default with the theme's "a" color swatch (black in the default theme) because these bars are typically primary in the visual hierarchy of a page. </p>
@ -140,7 +140,35 @@
</div>
</div>
</div><!--/content-primary -->
</body>
</html>
<div class="content-secondary">
<div data-role="collapsible" data-collapsed="true" data-theme="b">
<h3>Demos &amp; Docs Sections</h3>
<ul data-role="listview" data-theme="c" data-dividertheme="d">
<li data-role="list-divider">Components</li>
<li><a href="../../docs/pages/index.html">Pages &amp; dialogs</a></li>
<li data-theme="a"><a href="../../docs/toolbars/index.html">Toolbars</a></li>
<li><a href="../../docs/buttons/index.html">Buttons</a></li>
<li><a href="../../docs/content/index.html">Content formatting</a></li>
<li><a href="../../docs/forms/index.html">Form elements</a></li>
<li><a href="../../docs/lists/index.html">List views</a></li>
</ul>
</div>
</div>
</div><!-- /content -->
<div data-role="footer" class="footer-docs" data-theme="c">
<p>&copy;2011 The jQuery Project</p>
</div>
</div><!-- /page -->
</body>
</html>

40
docs/toolbars/docs-bars.html
View file

@ -21,7 +21,7 @@
</div><!-- /header -->
<div data-role="content">
<div class="content-primary">
<h2>Toolbar types</h2>
<p>In jQuery Mobile, there are two standard types of toolbars: Headers and Footers. </p>
@ -45,10 +45,36 @@
<p>A <a href="bars-fullscreen.html"><strong>"fullscreen" position mode</strong></a> works just like the fixed mode except that the toolbars aren't shown at the top and bottom of the page and only appear when the page is clicked. This is useful for immersive apps like photo or video viewers where you want the content to full when whole screen and toolbars can be summoned to appear by tapping the screen. Keep in mind that the toolbars in this mode will sit <strong>over</strong> page content so this is best used for specific situations.</p>
</div><!-- /content -->
</div><!-- /page -->
</body>
</html>
</div><!--/content-primary -->
<div class="content-secondary">
<div data-role="collapsible" data-collapsed="true" data-theme="b">
<h3>Demos &amp; Docs Sections</h3>
<ul data-role="listview" data-theme="c" data-dividertheme="d">
<li data-role="list-divider">Components</li>
<li><a href="../../docs/pages/index.html">Pages &amp; dialogs</a></li>
<li data-theme="a"><a href="../../docs/toolbars/index.html">Toolbars</a></li>
<li><a href="../../docs/buttons/index.html">Buttons</a></li>
<li><a href="../../docs/content/index.html">Content formatting</a></li>
<li><a href="../../docs/forms/index.html">Form elements</a></li>
<li><a href="../../docs/lists/index.html">List views</a></li>
</ul>
</div>
</div>
</div><!-- /content -->
<div data-role="footer" class="footer-docs" data-theme="c">
<p>&copy;2011 The jQuery Project</p>
</div>
</div><!-- /page -->
</body>
</html>

37
docs/toolbars/docs-footers.html
View file

@ -21,7 +21,7 @@
</div><!-- /header -->
<div data-role="content">
<div class="content-primary">
<h2>Footer bar structure</h2>
<p>The <code>footer</code> bar has the same basic structure as the header except it uses the <code> data-role</code> attribute value of <code>footer</code>. </p>
@ -116,11 +116,36 @@
</div><!--/content-primary -->
</div><!-- /content -->
</div><!-- /page -->
<div class="content-secondary">
</body>
</html>
<div data-role="collapsible" data-collapsed="true" data-theme="b">
<h3>Demos &amp; Docs Sections</h3>
<ul data-role="listview" data-theme="c" data-dividertheme="d">
<li data-role="list-divider">Components</li>
<li><a href="../../docs/pages/index.html">Pages &amp; dialogs</a></li>
<li data-theme="a"><a href="../../docs/toolbars/index.html">Toolbars</a></li>
<li><a href="../../docs/buttons/index.html">Buttons</a></li>
<li><a href="../../docs/content/index.html">Content formatting</a></li>
<li><a href="../../docs/forms/index.html">Form elements</a></li>
<li><a href="../../docs/lists/index.html">List views</a></li>
</ul>
</div>
</div>
</div><!-- /content -->
<div data-role="footer" class="footer-docs" data-theme="c">
<p>&copy;2011 The jQuery Project</p>
</div>
</div><!-- /page -->
</body>
</html>

38
docs/toolbars/docs-headers.html
View file

@ -21,7 +21,7 @@
</div><!-- /header -->
<div data-role="content">
<div class="content-primary">
<h2>Header structure</h2>
<p>The <code>header</code> is a toolbar at the top of the page that usually contains the page title text and optional buttons positioned to the the left and/or right of the title for navigation or actions.</p>
@ -133,8 +133,36 @@
<p>If you need to to create a header that doesn't follow the default configuration, simply wrap your custom styled markup in a container <code>div</code> inside the header container and the plugin won't apply the automatic button logic so you can write custom styles for laying out the content in your header.</p>
</div><!-- /content -->
</div><!-- /page -->
</body>
</html>
</div><!--/content-primary -->
<div class="content-secondary">
<div data-role="collapsible" data-collapsed="true" data-theme="b">
<h3>Demos &amp; Docs Sections</h3>
<ul data-role="listview" data-theme="c" data-dividertheme="d">
<li data-role="list-divider">Components</li>
<li><a href="../../docs/pages/index.html">Pages &amp; dialogs</a></li>
<li data-theme="a"><a href="../../docs/toolbars/index.html">Toolbars</a></li>
<li><a href="../../docs/buttons/index.html">Buttons</a></li>
<li><a href="../../docs/content/index.html">Content formatting</a></li>
<li><a href="../../docs/forms/index.html">Form elements</a></li>
<li><a href="../../docs/lists/index.html">List views</a></li>
</ul>
</div>
</div>
</div><!-- /content -->
<div data-role="footer" class="footer-docs" data-theme="c">
<p>&copy;2011 The jQuery Project</p>
</div>
</div><!-- /page -->
</body>
</html>

39
docs/toolbars/docs-navbar.html
View file

@ -21,7 +21,7 @@
</div><!-- /header -->
<div data-role="content">
<div class="content-primary">
<h2>Simple navbar</h2>
<p>jQuery Mobile has a very basic navbar widget that is useful for providing up to 5 buttons with optional icons in a bar , typically within a header or footer. </p>
@ -206,9 +206,36 @@
</div><!-- /navbar -->
</div><!-- /footer -->
</div><!-- /content -->
</div><!-- /page -->
</body>
</html>
</div><!--/content-primary -->
<div class="content-secondary">
<div data-role="collapsible" data-collapsed="true" data-theme="b">
<h3>Demos &amp; Docs Sections</h3>
<ul data-role="listview" data-theme="c" data-dividertheme="d">
<li data-role="list-divider">Components</li>
<li><a href="../../docs/pages/index.html">Pages &amp; dialogs</a></li>
<li data-theme="a"><a href="../../docs/toolbars/index.html">Toolbars</a></li>
<li><a href="../../docs/buttons/index.html">Buttons</a></li>
<li><a href="../../docs/content/index.html">Content formatting</a></li>
<li><a href="../../docs/forms/index.html">Form elements</a></li>
<li><a href="../../docs/lists/index.html">List views</a></li>
</ul>
</div>
</div>
</div><!-- /content -->
<div data-role="footer" class="footer-docs" data-theme="c">
<p>&copy;2011 The jQuery Project</p>
</div>
</div><!-- /page -->
</body>
</html>

41
docs/toolbars/footer-persist-a.html
View file

@ -21,7 +21,7 @@
</div>
<div data-role="content">
<div class="content-primary">
<p>This page is a demo of a persistent footer navigation bar. At the foot of the page, you'll see a persistent horizontal navigation bar. Click on any of the links, and you'll see the page content transition but the footer remain fixed: The footer sticks persistently even when transitioning to a new HTML page, because the footer on all four HTML pages has the same <code>data-id</code> attribute. <strong>Note:</strong> If you'd like an active button in your navbar to remain active when you return to it again, add a class of <code>ui-state-persist</code> in addition to <code>ui-btn-active</code></p>
@ -64,8 +64,38 @@
<li data-role="list-divider">S</li>
<li><a href="index.html">Sawyer Wakefield</a></li>
</ul>
</div>
</div><!--/content-primary -->
<div class="content-secondary">
<div data-role="collapsible" data-collapsed="true" data-theme="b">
<h3>Demos &amp; Docs Sections</h3>
<ul data-role="listview" data-theme="c" data-dividertheme="d">
<li data-role="list-divider">Components</li>
<li><a href="../../docs/pages/index.html">Pages &amp; dialogs</a></li>
<li data-theme="a"><a href="../../docs/toolbars/index.html">Toolbars</a></li>
<li><a href="../../docs/buttons/index.html">Buttons</a></li>
<li><a href="../../docs/content/index.html">Content formatting</a></li>
<li><a href="../../docs/forms/index.html">Form elements</a></li>
<li><a href="../../docs/lists/index.html">List views</a></li>
</ul>
</div>
</div>
</div><!-- /content -->
<div data-role="footer" data-id="foo1" data-position="fixed">
<div data-role="navbar">
<ul>
@ -75,7 +105,8 @@
</ul>
</div><!-- /navbar -->
</div><!-- /footer -->
</div><!-- /page -->
</body>
</html>
</div><!-- /page -->
</body>
</html>

55
docs/toolbars/footer-persist-b.html
View file

@ -21,7 +21,8 @@
</div>
<div data-role="content">
<ul data-role="listview" data-split-icon="gear" data-split-theme="d">
<div class="content-primary">
<ul data-role="listview" data-split-icon="gear" data-split-theme="d">
<li><a href="index.html">
<img src="../lists/images/album-bb.jpg" />
<h3>Broken Bells</h3>
@ -94,18 +95,42 @@
</ul>
</div>
<div data-role="footer" data-id="foo1" data-position="fixed">
<div data-role="navbar">
<ul>
<li><a href="footer-persist-a.html">Friends</a></li>
<li><a href="footer-persist-b.html" class="ui-btn-active ui-state-persist">Albums</a></li>
<li><a href="footer-persist-c.html">Emails</a></li>
</ul>
</div><!-- /navbar -->
</div><!-- /footer -->
</div><!-- /page -->
</body>
</html>
</div><!--/content-primary -->
<div class="content-secondary">
<div data-role="collapsible" data-collapsed="true" data-theme="b">
<h3>Demos &amp; Docs Sections</h3>
<ul data-role="listview" data-theme="c" data-dividertheme="d">
<li data-role="list-divider">Components</li>
<li><a href="../../docs/pages/index.html">Pages &amp; dialogs</a></li>
<li data-theme="a"><a href="../../docs/toolbars/index.html">Toolbars</a></li>
<li><a href="../../docs/buttons/index.html">Buttons</a></li>
<li><a href="../../docs/content/index.html">Content formatting</a></li>
<li><a href="../../docs/forms/index.html">Form elements</a></li>
<li><a href="../../docs/lists/index.html">List views</a></li>
</ul>
</div>
</div>
</div><!-- /content -->
<div data-role="footer" data-id="foo1" data-position="fixed">
<div data-role="navbar">
<ul>
<li><a href="footer-persist-a.html">Friends</a></li>
<li><a href="footer-persist-b.html" class="ui-btn-active ui-state-persist">Albums</a></li>
<li><a href="footer-persist-c.html">Emails</a></li>
</ul>
</div><!-- /navbar -->
</div><!-- /footer -->
</div><!-- /page -->
</body>
</html>

55
docs/toolbars/footer-persist-c.html
View file

@ -21,7 +21,8 @@
</div>
<div data-role="content">
<ul data-role="listview">
<div class="content-primary">
<ul data-role="listview">
<li data-role="list-divider">Friday, October 8, 2010 <span class="ui-li-count">2</span></li>
<li><a href="index.html">
@ -79,18 +80,42 @@
<p class="ui-li-aside"><strong>6:24</strong>AM</p>
</a></li>
</ul>
</div>
<div data-role="footer" data-id="foo1" data-position="fixed">
<div data-role="navbar">
<ul>
<li><a href="footer-persist-a.html">Friends</a></li>
<li><a href="footer-persist-b.html">Albums</a></li>
<li><a href="footer-persist-c.html" class="ui-btn-active ui-state-persist">Emails</a></li>
</ul>
</div><!-- /navbar -->
</div><!-- /footer -->
</div><!-- /page -->
</body>
</html>
</div><!--/content-primary -->
<div class="content-secondary">
<div data-role="collapsible" data-collapsed="true" data-theme="b">
<h3>Demos &amp; Docs Sections</h3>
<ul data-role="listview" data-theme="c" data-dividertheme="d">
<li data-role="list-divider">Components</li>
<li><a href="../../docs/pages/index.html">Pages &amp; dialogs</a></li>
<li data-theme="a"><a href="../../docs/toolbars/index.html">Toolbars</a></li>
<li><a href="../../docs/buttons/index.html">Buttons</a></li>
<li><a href="../../docs/content/index.html">Content formatting</a></li>
<li><a href="../../docs/forms/index.html">Form elements</a></li>
<li><a href="../../docs/lists/index.html">List views</a></li>
</ul>
</div>
</div>
</div><!-- /content -->
<div data-role="footer" data-id="foo1" data-position="fixed">
<div data-role="navbar">
<ul>
<li><a href="footer-persist-a.html">Friends</a></li>
<li><a href="footer-persist-b.html">Albums</a></li>
<li><a href="footer-persist-c.html" class="ui-btn-active ui-state-persist">Emails</a></li>
</ul>
</div><!-- /navbar -->
</div><!-- /footer -->
</div><!-- /page -->
</body>
</html>