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

more docs edits for pages section

Browse source
This commit is contained in:
Todd Parker 2010-10-11 17:49:12 -04:00
parent 0f40e2d28a
commit ac351b92e9
7 changed files with 111 additions and 119 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

0
docs/pages/api-buttons.html → docs/pages/api-pages.html
View file

41
docs/pages/buttons-types.html
View file

@ -1,41 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<title>jQuery Mobile Docs - Lists</title>
<link rel="stylesheet" media="only all" href="css/all" />
<script type="text/javascript" src="js/all"></script>
<script type="text/javascript" src="docs/docs.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>Button markup options</h1>
</div><!-- /header -->
<div data-role="content" class="ui-body">
<p><strong>Link</strong> based button</p>
<a href="index.html" data-role="button">Link element</a>
<p><strong>Button</strong> based button</p>
<button>Button element</button>
<p><strong>Input type="button"</strong> based button</p>
<input type="button" value="Input type=button" />
<p><strong>Input type="submit"</strong> based button</p>
<input type="submit" value="Input type=submit" />
<p><strong>Input type="reset"</strong> based button</p>
<input type="reset" value="Input type=reset" />
<p><strong>Input type="image"</strong> based button</p>
<input type="image" value="Input type=image" />
</div><!-- /content -->
</div><!-- /page -->
</body>
</html>

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

@ -1,7 +1,7 @@
<!DOCTYPE html>
<html>
<head>
<title>jQuery Mobile Docs - Lists</title>
<title>jQuery Mobile Docs - Pages</title>
<link rel="stylesheet" media="only all" href="css/all" />
<script type="text/javascript" src="js/all"></script>
</head>
@ -10,14 +10,11 @@
<div data-role="page">
<div data-role="header">
<h1>Buttons</h1>
<h1>Dialogs</h1>
</div><!-- /header -->
<div data-role="content" class="ui-body">
<h2>Dialogs</h2>
<p>Any page can be presented as a dialog by adding the </a>data-rel="dialog"</code> attribute to the page you're linking to. The framework will add styles to make the page look like a modal dialog by adding rounded corners and margins around the page along with a dark background behind the "dialog".</p>
<p>The dialog will still open with the standard slide transition so to make it feel more dialog-like, we recommend adding a transition of pop, slideup or flip on the link too.</p>

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

@ -1,7 +1,7 @@
<!DOCTYPE html>
<html>
<head>
<title>jQuery Mobile Docs - Lists</title>
<title>jQuery Mobile Docs - Pages</title>
<link rel="stylesheet" media="only all" href="css/all" />
<script type="text/javascript" src="js/all"></script>
</head>
@ -10,7 +10,7 @@
<div data-role="page">
<div data-role="header">
<h1>Buttons</h1>
<h1>Links &amp; transitions</h1>
</div><!-- /header -->
<div data-role="content" class="ui-body">

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

@ -1,7 +1,7 @@
<!DOCTYPE html>
<html>
<head>
<title>jQuery Mobile Docs - Lists</title>
<title>jQuery Mobile Docs - Pages</title>
<link rel="stylesheet" media="only all" href="css/all" />
<script type="text/javascript" src="js/all"></script>
</head>
@ -10,7 +10,7 @@
<div data-role="page">
<div data-role="header">
<h1>Buttons</h1>
<h1>Anatomy of a Page</h1>
</div><!-- /header -->
<div data-role="content" class="ui-body">
@ -27,7 +27,7 @@
<span class="nt">&lt;head&gt;</span>
<span class="nt">&lt;meta</span> <span class="na">charset=</span><span class="s">"UTF-8"</span> <span class="nt">/&gt;</span>
<span class="nt">&lt;title&gt;</span>Page Title<span class="nt">&lt;/title&gt;</span>
<span class="nt">&lt;link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">type=</span><span class="s">"text/css"</span> <span class="na">href=</span><span class="s">"..."</span> <span class="nt">/&gt;</span>
<span class="nt">&lt;link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">type=</span><span class="s">"text/css"</span> <span class="na">href=</span><span class="s">"ui-theme.css"</span> <span class="nt">/&gt;</span>
<span class="nt">&lt;script </span><span class="na">type=</span><span class="s">"text/javascript"</span> <span class="na">src=</span><span class="s">"jquery-min.js"</span><span class="nt">&gt;&lt;/script&gt;</span>
<span class="nt">&lt;script </span><span class="na">type=</span><span class="s">"text/javascript"</span> <span class="na">src=</span><span class="s">"jquery-mobile-min.js"</span><span class="nt">&gt;&lt;/script&gt;</span>
<span class="nt">&lt;/head&gt;</span>
@ -58,78 +58,33 @@
</pre>
</div>
<h2>External page linking</h2>
<p>Most sites or applications will consist of multiple HTML pages that are linked. As long as each page in the standard jQuery Mobile structure, to link between them, simply <code>data-role</code> of <code>"page"</code>, multiple 'pages' can be assembled and loaded together. This allows you to build a small site or application within a single document and jQuery Mobile will simply display the first 'page' it finds in the source order when the page loads.</p>
<p>jQuery Mobile automates the process of building AJAX powered site and applications. By default, when you click on link that points to an external page (ex. products.html), the framework will parse the link's <code>href</code> to formulate an AJAX request (Hijax) and displays the loading spinner.</p>
<p>If the AJAX request is successful, the new page content is added to the DOM, the <code>mobilize()</code> function runs, then the new page is animated into view with a <a href="transitions.html">page transition</a>. </p>
<h2>Local, internal linked "pages"</h2>
<p>A single HTML document can contain either a single 'page' or, by stacking multiple divs with a <code>data-role</code> of <code>"page"</code>, multiple 'pages' can be assembled and loaded together. This allows you to build a small site or application within a single document and jQuery Mobile will simply display the first 'page' it finds in the source order when the page loads.</p>
<p>If a link points to an anchor (#foo), the framework will looks for a page with that ID. If it finds a page in the HTML document, it will transition the new page into view.</p>
<p>Here is an example of a 2 "page" site built with two jQuery Mobile divs navigated by linking to an ID placed on each page wrapper. Note that the IDs on the page wrappers are only needed to support the internal page linking and are optional if each page is a separate HTML document.</p>
<h2>Complete single page template</h2>
<p>Putting it all together, this is the standard boilerplate page template you should start with:</p>
<div class="highlight">
<pre><span class="nt">&lt;div</span> <span class="na">data-role=</span><span class="s">"page"</span> <span class="na">id=</span><span class="s">"foo"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">data-role=</span><span class="s">"content"</span><span class="nt">&gt;</span>
I'm the "foo" page. Since I'm the first page
in the source order, I will be displayed onLoad.
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#bar"</span><span class="nt">&gt;</span>Visit the bar "page"<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;/div&gt;&lt;!-- /content --&gt;</span>
<span class="nt">&lt;/div&gt;&lt;!-- /foo page --&gt;</span>
<span class="nt">&lt;div</span> <span class="na">data-role=</span><span class="s">"page"</span> <span class="na">id=</span><span class="s">"bar"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">data-role=</span><span class="s">"content"</span><span class="nt">&gt;</span>
I'm the "bar" page. I will be shown only if the
anchor link on the <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#foo"</span><span class="nt">&gt;</span>foo<span class="nt">&lt;/a&gt;</span>
page is clicked.
<span class="nt">&lt;/div&gt;</span><span class="nt">&lt;!-- /content --&gt;</span>
<span class="nt">&lt;/div&gt;&lt;!-- /bar page --&gt;</span>
<pre><span class="cp">&lt;!DOCTYPE html&gt;</span>
<span class="nt">&lt;html&gt;</span>
<span class="nt">&lt;head&gt;</span>
<span class="nt">&lt;meta</span> <span class="na">charset=</span><span class="s">"UTF-8"</span> <span class="nt">/&gt;</span>
<span class="nt">&lt;title&gt;</span>Page Title<span class="nt">&lt;/title&gt;</span>
<span class="nt">&lt;link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">type=</span><span class="s">"text/css"</span> <span class="na">href=</span><span class="s">"ui-theme.css"</span> <span class="nt">/&gt;</span>
<span class="nt">&lt;script </span><span class="na">type=</span><span class="s">"text/javascript"</span> <span class="na">src=</span><span class="s">"jquery-min.js"</span><span class="nt">&gt;&lt;/script&gt;</span>
<span class="nt">&lt;script </span><span class="na">type=</span><span class="s">"text/javascript"</span> <span class="na">src=</span><span class="s">"jquery-mobile-min.js"</span><span class="nt">&gt;&lt;/script&gt;</span>
<span class="nt">&lt;/head&gt;</span>
<span class="nt">&lt;body&gt;</span>
<span class="nt">&lt;div</span> <span class="na">data-role=</span><span class="s">"page"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">data-role=</span><span class="s">"header"</span><span class="nt">&gt;</span>...<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">data-role=</span><span class="s">"content"</span><span class="nt">&gt;</span>...<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">data-role=</span><span class="s">"footer"</span><span class="nt">&gt;</span>...<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/body&gt;</span>
<span class="nt">&lt;/html&gt;</span>
</pre>
</div>
</div>
<p>You can seamlessly navigate between local, internal "pages" and external pages in jQuery UI. Both will look the same to the end user except that external pages will display the AJAX spinner while loading. In either situation, jQuery Mobile updates the page's URL hash to enable Back button support, deep-linking and bookmarking. </p>
<h2>Page transitions</h2>
<p>The jQuery Mobile framework includes a set of CSS-based transitions that can be applied to any object or page change event. By default, when navigating to a new page, the framework applies the right to left slide transition effect. When via the Back button, the slide transition direction is reversed.</p>
<p>Learn more about the technical details of the <a href="/jquery/jquery-mobile/wiki/Page-Navigation-Model">Page-Navigation-Model</a>.</p>
<p>To set a custom transition effect, add the <code>data-transition</code> attribute to the link. Possible values include: </p>
<pre><code>
&lt;a href=&quot;index.html&quot; data-transition=&quot;pop&quot;&gt;I'll pop&lt;/a&gt;
</pre></code>
<a href="../_transitions-destination.html" data-role="button" data-inline="true" data-transition="slide">slide</a>
<a href="../_transitions-destination.html" data-role="button" data-inline="true" data-transition="slideup">slideup</a>
<a href="../_transitions-destination.html" data-role="button" data-inline="true" data-transition="slidedown">slidedown</a>
<a href="../_transitions-destination.html" data-role="button" data-inline="true" data-transition="pop">pop</a>
<a href="../_transitions-destination.html" data-role="button" data-inline="true" data-transition="flip">flip</a>
<a href="../_transitions-destination.html" data-role="button" data-inline="true" data-transition="fade">fade</a>
<h2>Dialogs</h2>
<p>Any page can be presented as a dialog by adding the </a>data-rel="dialog"</code> attribute to the page you're linking to. The framework will add styles to make the page look like a modal dialog by adding rounded corners and margins around the page along with a dark background behind the "dialog".</p>
<p>The dialog will still open with the standard slide transition so to make it feel more dialog-like, we recommend adding a transition of pop, slideup or flip on the link too.</p>
<pre><code>
&lt;a href=&quot;../_dialog.html&quot; data-role=&quot;button&quot; data-inline=&quot;true&quot; data-rel=&quot;dialog&quot; data-transition=&quot;pop&quot;&gt;Open dialog: pop&lt;/a&gt;
</pre></code>
<a href="../_dialog.html" data-role="button" data-inline="true" data-rel="dialog" data-transition="pop">Open dialog: pop</a>
<a href="../_dialog.html" data-role="button" data-inline="true" data-rel="dialog" data-transition="slideup">Open dialog: slideup</a>
<a href="../_dialog.html" data-role="button" data-inline="true" data-rel="dialog" data-transition="flip">Open dialog: flip</a>
</div><!-- /content -->
</div><!-- /page -->

4
docs/pages/index.html
View file

@ -22,8 +22,8 @@
<li><a href="docs-pages.html">Anatomy of a page</a></li>
<li><a href="docs-links.html">Links &amp; transitions</a></li>
<li><a href="docs-dialogs.html">Dialogs</a></li>
<li><a href="api-buttons.html">API documentation</a></li>
<li><a href="buttons-themes.html">Theming buttons</a></li>
<li><a href="api-pages.html">API documentation</a></li>
<li><a href="pages-themes.html">Theming pages</a></li>
</ul>
<ul data-role="listview" data-inset="true">

81
docs/pages/pages-themes.html Executable file
View file

@ -0,0 +1,81 @@
<!DOCTYPE html>
<html>
<head>
<title>jQuery Mobile Docs - Buttons</title>
<link rel="stylesheet" media="only all" href="css/all" />
<script type="text/javascript" src="js/all"></script>
<script type="text/javascript" src="docs/docs.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>Theming buttons</h1>
</div><!-- /header -->
<div data-role="content" class="ui-body">
<h2>Theming</h2>
<p>jQuery Mobile has a rich <a href="../themes.html">theming system</a> that gives you full control of how buttons are styled. When a link is added to a container, it is automatically assigned a theme swatch letter that matches it's parent bar or content box to visually integrate the button into the parent container, like a chameleon. So a button placed inside a content container with a theme of "a" (black in the default theme) will be automatically assigned the button theme of "a" (charcoal in the default theme). Here are examples of the button theme pairings in the default theme. All buttons have the same HTML markup: </p>
<div data-role="content" data-theme="a"><h4>A swatch</h4><a href="index.html" data-role="button">Button</a></div>
<div data-role="content" data-theme="b"><h4>B swatch</h4><a href="index.html" data-role="button">Button</a></div>
<div data-role="content" data-theme="c"><h4>C swatch</h4><a href="index.html" data-role="button">Button</a></div>
<div data-role="content" data-theme="d"><h4>D swatch</h4><a href="index.html" data-role="button">Button</a></div>
<h2>Assigning theme swatches</h2>
<p>Button can be manually assigned any of the button color swatches from the theme to add visual contrast with the container they sit inside by adding the <code>data-theme</code> attribute on the button markup and specifying a swatch letter. </p>
<pre><code>
&lt;a href=&quot;index.html&quot; data-role=&quot;button&quot; data-theme=&quot;a&quot;&gt;Theme a&lt;/a&gt;
</pre></code>
<p>Here are 4 buttons with icons that have a different swatch letter assigned via the <code>data-theme</code> attribute.</p>
<a href="index.html" data-role="button" data-theme="a" data-icon="arrow-l" data-inline="true">Theme a</a>
<a href="index.html" data-role="button" data-theme="b" data-icon="arrow-l" data-inline="true">Theme b</a>
<a href="index.html" data-role="button" data-theme="c" data-icon="arrow-l" data-inline="true">Theme c</a>
<a href="index.html" data-role="button" data-theme="d" data-icon="arrow-l" data-inline="true">Theme d</a>
<h2>Theme variations</h2>
<p><strong>"a" theme</strong> on container with themed buttons inside</p>
<div data-role="content" data-theme="a">
<a href="index.html" data-role="button" data-theme="a" data-icon="arrow-l" data-inline="true">Theme a</a>
<a href="index.html" data-role="button" data-theme="b" data-icon="arrow-l" data-inline="true">Theme b</a>
<a href="index.html" data-role="button" data-theme="c" data-icon="arrow-l" data-inline="true">Theme c</a>
<a href="index.html" data-role="button" data-theme="d" data-icon="arrow-l" data-inline="true">Theme d</a>
</div>
<p><strong>"b" theme</strong> on container with themed buttons inside</p>
<div data-role="content" data-theme="b">
<a href="index.html" data-role="button" data-theme="a" data-icon="arrow-l" data-inline="true">Theme a</a>
<a href="index.html" data-role="button" data-theme="b" data-icon="arrow-l" data-inline="true">Theme b</a>
<a href="index.html" data-role="button" data-theme="c" data-icon="arrow-l" data-inline="true">Theme c</a>
<a href="index.html" data-role="button" data-theme="d" data-icon="arrow-l" data-inline="true">Theme d</a>
</div>
<p><strong>"c" theme</strong> on container with themed buttons inside</p>
<div data-role="content" data-theme="c">
<a href="index.html" data-role="button" data-theme="a" data-icon="arrow-l" data-inline="true">Theme a</a>
<a href="index.html" data-role="button" data-theme="b" data-icon="arrow-l" data-inline="true">Theme b</a>
<a href="index.html" data-role="button" data-theme="c" data-icon="arrow-l" data-inline="true">Theme c</a>
<a href="index.html" data-role="button" data-theme="d" data-icon="arrow-l" data-inline="true">Theme d</a>
</div>
<p><strong>"d" theme</strong> on container with themed buttons inside</p>
<div data-role="content" data-theme="d">
<a href="index.html" data-role="button" data-theme="a" data-icon="arrow-l" data-inline="true">Theme a</a>
<a href="index.html" data-role="button" data-theme="b" data-icon="arrow-l" data-inline="true">Theme b</a>
<a href="index.html" data-role="button" data-theme="c" data-icon="arrow-l" data-inline="true">Theme c</a>
<a href="index.html" data-role="button" data-theme="d" data-icon="arrow-l" data-inline="true">Theme d</a>
</div>
</div><!-- /content -->
</div><!-- /page -->
</body>
</html>