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

re-vamp of homepage and new /about/folder

Browse source
This commit is contained in:
Todd Parker 2010-10-14 17:22:38 -04:00
parent aa863b0e22
commit f82fc2cb1b
10 changed files with 82 additions and 239 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

23
docs/about/index.html Executable file
View file

@ -0,0 +1,23 @@
<!DOCTYPE html>
<html>
<head>
<title>jQuery UI Mobile Framework - Documentation</title>
<link rel="stylesheet" href="themes/default" />
<script type="text/javascript" src="js/all"></script>
</head>
<body>
<div data-role="page" data-theme="b">
<div data-role="header" data-position="inline">
<h1>Theme system</h1>
</div>
<div data-role="content">
</div>
</div>
</body>
</html>

0
docs/intro.html → docs/about/intro.html
View file

41
docs/about/platforms.html Executable file
View file

@ -0,0 +1,41 @@
<!DOCTYPE html>
<html>
<head>
<title>jQuery Mobile Docs - Intro</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>Supported platforms</h1>
</div><!-- /header -->
<div data-role="content">
<h2>Supported platforms</h2>
<p>For the alpha release, the following devices have been tested and should have a fairly solid jQuery Mobile experience. That being said, there are still a fair amount of bugs and performance improvements to be tackled before the 1.0 release in January. </p>
<ul>
<li>Apple iOS: iPhone, iPod Touch, iPad (all versions)</li>
<li>Android: all devices (all versions)</li>
<li>Blackberry Torch (version 6)</li>
<li>Palm WebOS Pre, Pixi</li>
<li>Nokia N900</li>
</ul>
<p>Older versions of Blackberry, Nokia/Symbian, and Windows Mobile may work but we're still seeing JavaScript errors and rendering bugs that need to be tracked down. We don't yet have phones to test Windows Mobile 7, bada, or MeeGo but these will be added as soon as we can get devices.</p>
<p>Since jQuery Mobile is built on the jQuery core, all pages should also work great on most recent versions of desktop browsers too - Firefox, Chrome, Safari, Internet Explorer, Opera, etc.</p>
</div><!-- /content -->
</div><!-- /page -->
</body>
</html>

8
docs/themes/themes.html → docs/about/themes.html
View file

@ -186,6 +186,14 @@
<p>The powerful thing about the new jQuery Mobile theme system is that you can now add as many color swatches as you like within a single theme. In the future ThemeRoller tool, you will be able to add new swatches through an easy-to-use web interface. Until then, you can add new swatches manually by copying the block of theme style rules for an existing swatch, renaming the rules a new letter (e) and changing colors.</p>
<p>You can then you can reference the new theme by adding the <code>data-theme="c"</code> attribute to your markup. If you set a theme swatch letter, the framework simply applies classes that include the letter you specify so it's critical that your active theme file include rules for the letters specified in your markup.</p>
<p><strong>Learn more</strong> about theming components</p>
<ul data-role="listview" data-inset="true">
<li><a href="../pages/pages-themes.html">Page theming</a></li>
<li><a href="../toolbars/bars-themes.html">Toolbar theming</a></li>
<li><a href="../content/content-themes.html">Content theming</a></li>
<li><a href="../buttons/buttons-themes.html">Button theming</a></li>
<li><a href="../lists/lists-themes.html">List theming</a></li>
</ul>
</div><!-- end content -->
</div><!-- end page -->

23
docs/buttons.html
View file

@ -1,23 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<title>jQuery Mobile Docs - Buttons</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>Buttons</h1>
</div><!-- /header -->
<div data-role="content">
</div><!-- /content -->
</div><!-- /page -->
</body>
</html>

23
docs/forms.html
View file

@ -1,23 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<title>jQuery Mobile Docs - Forms</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>Forms</h1>
</div><!-- /header -->
<div data-role="content">
</div><!-- /content -->
</div><!-- /page -->
</body>
</html>

23
docs/links.html
View file

@ -1,23 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<title>jQuery Mobile Docs - Links</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>Links</h1>
</div><!-- /header -->
<div data-role="content">
</div><!-- /content -->
</div><!-- /page -->
</body>
</html>

137
docs/page.html
View file

@ -1,137 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<title>jQuery Mobile Docs - Intro</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>Page structure</h1>
</div><!-- /header -->
<div data-role="content">
<p>Following HTML markup conventions is essential to this approach because markup is the primary mechanism used to configure the mobile experience in jQuery Mobile. Validate your code and always avoid the use of inline styles or inline JavaScript event handlers to ensure the best results.</p>
<h2>Mobile page structure</h2>
<p>A jQuery Mobile site starts with an HTML5 'doctype'. In the 'head', references to jQuery, jQuery Mobile and the mobile theme CSS are all required to start things off:</p>
<div class="highlight">
<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">"..."</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;/body&gt;</span>
<span class="nt">&lt;/html&gt;</span>
</pre>
</div>
<p>Inside the <code>&lt;body&gt;</code> tag, each view or "page" on the mobile device is identified with an element (usually a <code>div</code>) with the <code>data-role="page"</code> attribute:</p>
<div class="highlight">
<pre><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&gt;</span>
</pre>
</div>
<p>Within the "page" container, any valid HTML markup can be used, but for typical pages in jQuery Mobile, the immediate children of a "page" are divs with data-roles of <code>"header"</code>, <code>"content"</code>, and <code>"footer"</code>.</p>
<div class="highlight">
<pre><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>
</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>
<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>
</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 -->
</body>
</html>

30
docs/themes/index.html vendored
View file

@ -1,30 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<title>jQuery UI Mobile Framework - Documentation</title>
<link rel="stylesheet" href="themes/default" />
<script type="text/javascript" src="js/all"></script>
</head>
<body>
<div data-role="page" data-theme="b">
<div data-role="header" data-position="inline">
<h1>Theme system</h1>
</div>
<div data-role="content">
<ul data-role="listview" data-inset="true">
<li><a href="themes.html">Overview: Themes & swatches</a></li>
<li><a href="../pages/pages-themes.html">Page theming</a></li>
<li><a href="../toolbars/bars-themes.html">Toolbar theming</a></li>
<li><a href="../content/content-themes.html">Content theming</a></li>
<li><a href="../buttons/buttons-themes.html">Button theming</a></li>
<li><a href="../lists/lists-themes.html">List theming</a></li>
</ul>
</div>
</div>
</body>
</html>

13
index.html
View file

@ -24,9 +24,16 @@
<div data-role="content">
<ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="b">
<li data-role="list-divider">Demos &amp; Documentation</li>
<li><a href="docs/intro.html">Introduction to jQuery Mobile</a></li>
<li><a href="docs/themes/index.html">Theme system</a></li>
<li data-role="list-divider">Overview</li>
<li><a href="docs/about/intro.html">Introduction to jQuery Mobile</a></li>
<li><a href="docs/about/features.html">Features</a></li>
<li><a href="docs/about/accessibility.html">Accessibility</a></li>
<li><a href="docs/about/platforms.html">Supported platforms</a></li>
<li><a href="docs/about/themes.html">Theme system</a></li>
</ul>
<ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="b">
<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>