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

more docs cleanup

Browse source
This commit is contained in:
Todd Parker 2010-10-13 18:23:35 -04:00
parent 3ff819b0dc
commit b5157e4efc
11 changed files with 59 additions and 133 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
docs/buttons.html
View file

@ -11,7 +11,6 @@
<div data-role="header">
<h1>Buttons</h1>
<a href="index.html" class="ui-back" data-icon="arrow-l">Home</a>
</div><!-- /header -->
<div data-role="content">

1
docs/events.html
View file

@ -11,7 +11,6 @@
<div data-role="header">
<h1>Events</h1>
<a href="index.html" class="ui-back" data-icon="arrow-l">Home</a>
</div><!-- /header -->
<div data-role="content">

1
docs/forms.html
View file

@ -11,7 +11,6 @@
<div data-role="header">
<h1>Forms</h1>
<a href="index.html" class="ui-back" data-icon="arrow-l">Home</a>
</div><!-- /header -->
<div data-role="content">

12
docs/forms/index.html
View file

@ -16,18 +16,12 @@
<div data-role="content">
<p>Forms are great!</p>
<ul data-role="listview" data-inset="true">
<li data-role="list-divider">Documentation</li>
<li><a href="docs-forms.html">Form basics</a></li>
<li><a href="api-forms.html">API documentation</a></li>
<li><a href="forms-themes.html">Theming forms</a></li>
</ul>
<ul data-role="listview" data-inset="true">
<li data-role="list-divider">Button examples</li>
<li><a href="forms-all.html">All form elements</a></li>
<li><a href="docs-forms.html">Form basics</a></li>
<li><a href="forms-themes.html">Theming forms</a></li>
<li><a href="api-forms.html">API documentation</a></li>
</ul>
</div><!-- /ui-body wrapper -->
</div><!-- /page -->

1
docs/intro.html
View file

@ -11,7 +11,6 @@
<div data-role="header">
<h1>Getting started</h1>
<a href="index.html" class="ui-back" data-icon="arrow-l">Home</a>
</div><!-- /header -->
<div data-role="content">

1
docs/links.html
View file

@ -11,7 +11,6 @@
<div data-role="header">
<h1>Links</h1>
<a href="index.html" class="ui-back" data-icon="arrow-l">Home</a>
</div><!-- /header -->
<div data-role="content">

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

@ -13,22 +13,37 @@
<h1>Bar theming </h1>
</div>
<div data-role="content">
<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. To set the header or footer bars to a different color in your theme, add the <code>data-theme</code> attribute and specify the letter of the theme swatch (a, b, c, etc.). For example, this will set the bar to swatch "b" (blue in the default theme):</p>
<div class="highlight">
<pre>
<span class="nt">&lt;div</span> <span class="na">data-role=</span><span class="s">"header"</span> <span class="na">data-theme=</span><span class="s">"b"</span><span class="nt">&gt;</span>
<span class="nt">&lt;h1&gt;</span>Page Title<span class="nt">&lt;/h1&gt;</span>
<span class="nt">&lt;/div&gt;</span>
</pre>
</div>
<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>
<h2>Demo description</h2>
<h2>Theming headers and footers</h2>
<p>To set the header or footer bars to a different color in your theme, add the <code>data-theme</code> attribute and specify the letter of the theme swatch (a, b, c, etc.). For example, this will set the bar to swatch "b" (blue in the default theme):</p>
<div class="highlight">
<pre>
<span class="nt">&lt;div</span> <span class="na">data-role=</span><span class="s">"header"</span> <span class="na">data-theme=</span><span class="s">"b"</span><span class="nt">&gt;</span>
<span class="nt">&lt;h1&gt;</span>Page Title<span class="nt">&lt;/h1&gt;</span>
<span class="nt">&lt;/div&gt;</span>
</pre>
</div>
<h2>Theming buttons in toolbars</h2>
<p>Any link added inside the header block will be automatically styled as a button that matches the color of the bar's theme swatch. To make a button stand out as a primary call to action, the <code>data-theme</code> attribute can be used to specify a contrasting button color from a different theme swatch. For example, if we set the header to theme "c" (light gray), both buttons would be styled as the "c" button by default. If we wanted the Save button to visually pop, we can override the color by setting the <code>data-theme</code> attribute to "b" (blue in our default theme) on the Save button's anchor.</p>
<div class="highlight">
<pre>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"add-user.php"</span> <span class="na">data-theme=</span><span class="s">"b"</span><span class="nt">&gt;</span>Save<span class="nt">&lt;/a&gt;</span>
</pre>
</div>
<h2>Theme variations</h2>
<p>This is a demo of the variation that can be achieved by tweaking the theme swatches and buttons inside the headers and footers.</p>
<h3>Headers</h3>
</div>
@ -37,7 +52,7 @@
<h1>Bar theme "a"</h1>
<a href="index.html" data-icon="plus" data-theme="c">New</a>
</div>
<div data-role="header" data-position="inline">
<a href="index.html" data-icon="delete" iconpos="notext">Cancel</a>
<h1>Bar theme "a"</h1>
@ -95,6 +110,7 @@
</div>
</div>
<p></p>
</div>
</body>

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

@ -54,30 +54,7 @@
<p>If there isn't a user-defined button in the left slot, the framework will auto-generate a "back" button in that slot to automate the process of including this common navigation element on every page. To prevent the back button from being added to a header in these situations, add this attribute: <code>data-nobackbtn="true"</code>.</p>
<h2>Bar & button theme styling</h2>
<p>The header 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. To set the header to a different color in your theme, add the <code>data-theme</code> attribute and specify the letter of the theme swatch (a, b, c, etc.). For example, this will set the bar to swatch "b" (blue in the default theme):</p>
<div class="highlight">
<pre>
<span class="nt">&lt;div</span> <span class="na">data-role=</span><span class="s">"header"</span> <span class="na">data-theme=</span><span class="s">"b"</span><span class="nt">&gt;</span>
<span class="nt">&lt;h1&gt;</span>Page Title<span class="nt">&lt;/h1&gt;</span>
<span class="nt">&lt;/div&gt;</span>
</pre>
</div>
<p>Any link added inside the header block will be automatically styled as a button that matches the color of the bar's theme swatch. To make a button stand out as a primary call to action, the <code>data-theme</code> attribute can be used to specify a contrasting button color from a different theme swatch. For example, if we set the header to theme "c" (light gray), both buttons would be styled as the "c" button by default. If we wanted the Save button to visually pop, we can override the color by setting the <code>data-theme</code> attribute to "b" (blue in our default theme) on the Save button's anchor.</p>
<div class="highlight">
<pre>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"add-user.php"</span> <span class="na">data-theme=</span><span class="s">"b"</span><span class="nt">&gt;</span>Save<span class="nt">&lt;/a&gt;</span>
</pre>
</div>
<a href="bars-themes.html" data-role="button" data-icon="arrow-r" data-iconpos="right">Themed header examples</a>
</div><!-- /content -->
</div><!-- /page -->

26
docs/toolbars/docs-navbars.html
View file

@ -1,26 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<title>jQuery Mobile Docs - Toolbars</title>
<link rel="stylesheet" href="../../themes/default" />
<script type="text/javascript" src="../../js/all"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>Navbar basics</h1>
</div><!-- /header -->
<div data-role="content">
<p>The Nav Bar widget can be added to the page to provide a navigation bar that accommodates an unlimited number of options in a compact element that placed inside a header, content, or footer region of the page. It displays up to 4 items in a horizontal bar with out without icons. If more than 4 items are in the navigation list, the 4th slot is used for a "more" link that opens a separate overlay with the full list of items. </p>
<p>The markup for a nav bar is identical to a basic linked list view: an unordered list with a link in each item and an optional icon. This markup is transformed into a nav bar by adding a <code>data-role="navbar" attribute to the list.</code></p>
<a href="navbar.html" data-role="button" data-icon="arrow-r" data-iconpos="right">Nav bar examples</a>
</div><!-- /content -->
</div><!-- /page -->
</body>
</html>

18
docs/toolbars/index.html
View file

@ -19,22 +19,16 @@
<ul data-role="listview" data-inset="true">
<li data-role="list-divider">Documentation</li>
<li><a href="docs-bars.html">Toolbar basics</a></li>
<li><a href="docs-headers.html">Header configuration</a></li>
<li><a href="docs-footers.html">Footer configuration</a></li>
<li><a href="docs-navbars.html">Navbar configuration</a></li>
<li><a href="api-bars.html">API documentation</a></li>
<li><a href="bars-themes.html">Theming toolbars</a></li>
</ul>
<ul data-role="listview" data-inset="true">
<li data-role="list-divider">Toolbar examples</li>
<li><a href="bars-fixed.html">Fixed toolbars</a></li>
<li><a href="bars-inline.html">Inline toolbars</a></li>
<li><a href="bars-fullscreen.html">Fullscreen toolbars</a></li>
<li><a href="navbar.html">Nav bars</a></li>
<li><a href="bars-fixed.html">Fixed toolbar example</a></li>
<li><a href="bars-inline.html">Inline toolbar example</a></li>
<li><a href="bars-fullscreen.html">Fullscreen toolbar example</a></li>
<li><a href="navbar.html">Nav bar example</a></li>
<li><a href="footer-persist.html">Persistent footer</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 -->

66
docs/toolbars/navbar.html
View file

@ -24,56 +24,32 @@
</div><!-- /header -->
<div data-role="content">
<h1>Demo description</h1>
<h1>Nav bar widget</h1>
<p>This page includes a examples of the navbar plugin, which can be called on a div containing a UL.</p>
<p><strong>Pellentesque habitant morbi tristique</strong> 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. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>
<h2>navbar in the content:</h2>
<div data-role="navbar">
<ul>
<li><a href="bars-fixed.html">Fixed</a></li>
<li><a href="bars-inline.html">Inline</a></li>
<li><a href="bars-fullscreen.html">Fullscreen</a></li>
<li><a href="../../_dialog.html" data-transition="pop" data-rel="dialog">Dialog</a></li>
<li><a href="bars-persist.html">Persistent</a></li>
<li><a href="bars-themes.html">Themes</a></li>
</ul>
</div>
</div>
<p>The Nav Bar widget can be added to the page to provide a navigation bar that accommodates an unlimited number of options in a compact element that placed inside a header, content, or footer region of the page. It displays up to 4 items in a horizontal bar with out without icons. If more than 4 items are in the navigation list, the 4th slot is used for a "more" link that opens a separate overlay with the full list of items. </p>
<ol>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
</ol>
<p>The markup for a nav bar is identical to a basic linked list view: an unordered list with a link in each item and an optional icon. This markup is transformed into a nav bar by adding a <code>data-role="navbar" attribute to the list.</code></p>
<h2>Header Level 2</h2>
<ol>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
</ol>
<pre><code>
&lt;div data-role=&quot;navbar&quot;&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href=&quot;bars-fixed.html&quot;&gt;Fixed&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;bars-inline.html&quot;&gt;Inline&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;bars-fullscreen.html&quot;&gt;Fullscreen&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;../../_dialog.html&quot; data-transition=&quot;pop&quot; data-rel=&quot;dialog&quot;&gt;Dialog&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;bars-persist.html&quot;&gt;Persistent&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;bars-themes.html&quot;&gt;Themes&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;&lt;!-- /navbar --&gt;
</pre></code>
<p>The navbar can be added inside the header or footer bar if you want it to persist.</p>
<blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p></blockquote>
<h3>Header Level 3</h3>
<ul>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
</ul>
<pre><code>
#header h1 a {
display: block;
width: 300px;
height: 80px;
}
</code></pre>
<h1>HTML Ipsum Presents</h1>
<h3>Now for some filler content to make the page scroll</h3>
<p><strong>Pellentesque habitant morbi tristique</strong> 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. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>