Demos: Added single page template example. Fixes #5716

jquery-archive · Mar 11, 2013 · 6b41a21 · 6b41a21
1 parent 7cbfa20
commit 6b41a21
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 3 deletions.
diff --git a/demos/widgets/pages/index.php b/demos/widgets/pages/index.php
@@ -122,6 +122,8 @@
 &lt;/html&gt;
 </code></pre>
 
+		<a href="page-template.html" class="jqm-button" data-ajax="false" data-role="button" data-inline="true" data-mini="true" data-icon="arrow-r" data-iconpos="right">View page template</a>
+
 		<h2>Multi-page template structure</h2>
 
 			<p>A single HTML document can contain multiple "pages" that are loaded together by stacking multiple divs with a <code>data-role</code> of <code>"page"</code>. Each "page" block needs a unique id (<code>id="foo"</code>) that will be used to link internally between "pages" (<code>href="#foo"</code>). When a link is clicked, the framework will look for an internal "page" with the id and transition it into view.</p>
@@ -167,8 +169,7 @@
 &lt;/body&gt;
 </code></pre>
 
-		<a href="multipage-template.php" class="jqm-button" data-ajax="false" data-role="button" data-inline="true" data-mini="true" data-icon="arrow-r" data-iconpos="right">View multi-page template</a>
-		<p> </p>
+		<a href="multipage-template.html" class="jqm-button" data-ajax="false" data-role="button" data-inline="true" data-mini="true" data-icon="arrow-r" data-iconpos="right">View multi-page template</a>
 
 		<p>PLEASE NOTE: Since we are using the hash to track navigation history for all the AJAX "pages", it's not currently possible to deep link to an anchor (<code>index.html#foo</code>) on a page in jQuery Mobile, because the framework will look for a "page" with an <code>id</code> of <code>#foo</code> instead of the native behavior of scrolling to the content with that <code>id</code>.</p>
 

diff --git a/demos/widgets/pages/multipage-template.php → demos/widgets/pages/multipage-template.html b/demos/widgets/pages/multipage-template.php → demos/widgets/pages/multipage-template.html
@@ -8,7 +8,6 @@
 	<link rel="stylesheet"  href="../../../css/themes/default/jquery.mobile.css">
 	<link rel="stylesheet" href="../../_assets/css/jqm-demos.css">
 	<link rel="shortcut icon" href="../../favicon.ico">
-	<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,700">
 	<script src="../../../js/jquery.js"></script>
 	<script src="../../_assets/js/"></script>
 	<script src="../../../js/"></script>

diff --git a/demos/widgets/pages/page-template.html b/demos/widgets/pages/page-template.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+	<title>Multi-page template</title>
+	<link rel="stylesheet"  href="../../../css/themes/default/jquery.mobile.css">
+	<link rel="stylesheet" href="../../_assets/css/jqm-demos.css">
+	<link rel="shortcut icon" href="../../favicon.ico">
+	<script src="../../../js/jquery.js"></script>
+	<script src="../../_assets/js/"></script>
+	<script src="../../../js/"></script>
+</head>
+
+<body>
+
+<div data-role="page">
+
+	<div data-role="header">
+		<h1>Single page</h1>
+	</div><!-- /header -->
+
+	<div data-role="content">	
+		<p>This is a single page boilerplate template that you can copy to build your first jQuery Mobile page. Each link or form from here will pull a new page in via Ajax to support the animated page transitions.</p>		
+		<p>Just view the source and copy the code to get started. All the CSS and JS is linked to the jQuery CDN versions so this is super easy to set up. Remember to include a meta viewport tag in the head to set the zoom level.</p>
+		<p>This template is standard HTML document with a single "page" container inside, unlike a <a href="multipage-template.html" data-ajax="false">multi-page template</a> that has multiple pages within it. We strongly recommend building your site or app as a series of separate pages like this because it's cleaner, more lightweight and works better without JavaScript.</p>
+	</div><!-- /content -->
+
+	<div data-role="footer">
+		<h4>Footer content</h4>
+	</div><!-- /footer -->
+
+</div><!-- /page -->
+
+</body>
+</html>