From 7baa752cd371eeb9e17008d5374260e6c4c102ec Mon Sep 17 00:00:00 2001
From: Todd Parker <todd@filamentgroup.com>
Date: Thu, 17 Nov 2011 02:00:59 -0500
Subject: [PATCH] Added a new Quick start guide page

---
 docs/about/accessibility.html   |   1 +
 docs/about/features.html        |   1 +
 docs/about/getting-started.html | 179 ++++++++++++++++++++++++++++++++
 docs/about/index.html           |   1 +
 docs/about/intro.html           |   1 +
 docs/about/platforms.html       |  13 +--
 docs/index.html                 |  13 +--
 index.html                      |   1 +
 8 files changed, 195 insertions(+), 15 deletions(-)
 create mode 100644 docs/about/getting-started.html
diff --git a/docs/about/accessibility.html b/docs/about/accessibility.html
index 392d5e4e..97399b33 100755
--- a/docs/about/accessibility.html
+++ b/docs/about/accessibility.html
@@ -43,6 +43,7 @@
 					<ul data-role="listview" data-theme="c" data-dividertheme="d">
 						<li data-role="list-divider">Overview</li>
 						<li><a href="../../docs/about/intro.html">Intro to jQuery Mobile</a></li>
+						<li><a href="../../docs/about/getting-started.html">Quick start guide</a></li>				
 						<li><a href="../../docs/about/features.html">Features</a></li>
 						<li data-theme="a"><a href="../../docs/about/accessibility.html">Accessibility</a></li>
 						<li><a href="../../docs/about/platforms.html">Supported platforms</a></li>
diff --git a/docs/about/features.html b/docs/about/features.html
index 100b48ae..58bf0fb5 100755
--- a/docs/about/features.html
+++ b/docs/about/features.html
@@ -52,6 +52,7 @@
 					<ul data-role="listview" data-theme="c" data-dividertheme="d">
 						<li data-role="list-divider">Overview</li>
 						<li><a href="../../docs/about/intro.html">Intro to jQuery Mobile</a></li>
+						<li><a href="../../docs/about/getting-started.html">Quick start guide</a></li>	
 						<li data-theme="a"><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>
diff --git a/docs/about/getting-started.html b/docs/about/getting-started.html
new file mode 100644
index 00000000..e06bc559
--- /dev/null
+++ b/docs/about/getting-started.html
@@ -0,0 +1,179 @@
+<!DOCTYPE html> 
+<html> 
+	<head>
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1"> 
+	<title>jQuery Mobile Docs - Quick start</title> 
+	<link rel="stylesheet"  href="../../css/themes/default/" /> 
+	<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
+	<script src="../../js/jquery.js"></script>
+	<script src="../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
+	<script src="../_assets/js/jqm-docs.js"></script>
+	<script src="../../js/"></script>
+</head> 
+<body> 
+
+<div data-role="page" class="type-interior">
+
+	<div data-role="header" data-theme="f">
+		<h1>Quick start guide</h1>
+		
+		
+		<a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse" class="ui-btn-right jqm-home">Home</a>
+	</div><!-- /header -->
+
+	<div data-role="content">
+		
+		<div class="content-primary">
+		
+		<h2>Getting Started with jQuery Mobile</h2>
+
+		<p>jQuery Mobile provides a set of touch-friendly UI widgets and AJAX-powered navigation system to support animated page transitions. Building your first jQuery Mobile page is easy, here's how:</p>
+		
+		<h3>Create a basic page template</h3>	
+		<p>Pop open your favorite text editor and paste in the <a href="../pages/page-anatomy.html" id="" title="page-anatomy">page template</a> below. In the <code>head</code>, a meta <code>viewport</code> tag and references to jQuery, jQuery Mobile and the mobile theme stylesheet from the CDN are all you need to get started. In the <code>body</code>, add a div with a <code>data-role</code> of <code>page</code> to hold your page contents.</p> 
+
+<pre><code>
+<strong>&lt;!DOCTYPE html&gt; 
+</strong>&lt;html&gt; 
+&lt;head&gt; 
+&lt;title&gt;Page Title&lt;/title&gt; 
+
+<strong>&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt; 
+
+&lt;link rel=&quot;stylesheet&quot; href=&quot;http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css&quot; /&gt;
+&lt;script type=&quot;text/javascript&quot; src=&quot;http://code.jquery.com/jquery-1.6.4.min.js&quot;&gt;&lt;/script&gt;
+&lt;script type=&quot;text/javascript&quot; src=&quot;http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js&quot;&gt;&lt;/script&gt;</strong>
+&lt;/head&gt; 
+
+&lt;body&gt; 
+   <strong>&lt;div data-role=&quot;page&quot;&gt;
+   &lt;/div&gt;</strong>&lt;!-- /page --&gt;
+&lt;/body&gt;
+&lt;/html&gt;
+</code></pre>
+
+		
+		<h3>Add your HTML content</h3>
+		<p>All the normal <a href="../content/content-html.html">HTML elements</a> and styles work as you'd expect - headings, lists, paragraphs. Write your own custom styles to create custom layouts or designs by adding a custom stylesheet to the head and just go to town. There is no required markup in your page. In fact, even the page wrapper is optional.</p> 
+		
+		<h3>Make a button</h3>
+		<p>There are a few ways to make a <a href="../buttons/buttons-types.html" title="buttons-types">buttons</a>, but lets turn a link into a button so it's easy to click. Just start with a link and add a <code>data-role="button"</code> attribute to the link. These are special HTML5 <code>data-</code> attributes used throughout jQuery Mobile to transform basic markup into a widget. Add an <a href="../buttons/buttons-icons.html">icon</a> with the <code>data-icon</code> attribute.</p>
+		
+<pre><code>
+&lt;a href=&quot;#&quot; <strong>data-role=&quot;button&quot; data-icon=&quot;star&quot;</strong>&gt;Star button&lt;/a&gt;
+</code></pre>
+		
+		<a href="#" data-role="button" data-icon="star">Star button</a>
+
+		
+		<h3>Make a listview</h3>
+		<p>jQuery Mobile includes a diverse set of common <a href="../lists/docs-lists.html" id="" title="docs-lists">listviews</a> that are basically built from lists with a <code>data-role="listview"</code>. Here is a simple linked list that has a role of <code>listview</code>. We're going to make this look like an inset module by adding a <code>data-inset="true"</code> and add a dynamic search filer with, you guessed it, <code>data-filter="true"</code>.</p>
+
+<pre><code>
+&lt;ul <strong>data-role=&quot;listview&quot; data-inset=&quot;true&quot; data-filter=&quot;true&quot</strong>;&gt;
+	&lt;li&gt;&lt;a href=&quot;#&quot;&gt;Acura&lt;/a&gt;&lt;/li&gt;
+	&lt;li&gt;&lt;a href=&quot;#&quot;&gt;Audi&lt;/a&gt;&lt;/li&gt;
+	&lt;li&gt;&lt;a href=&quot;#&quot;&gt;BMW&lt;/a&gt;&lt;/li&gt;
+	&lt;li&gt;&lt;a href=&quot;#&quot;&gt;Cadillac&lt;/a&gt;&lt;/li&gt;
+	&lt;li&gt;&lt;a href=&quot;#&quot;&gt;Ferrari&lt;/a&gt;&lt;/li&gt;
+&lt;/ul&gt;
+
+</code></pre>
+
+		<ul data-role="listview" data-inset="true" data-filter="true">
+			<li><a href="#">Acura</a></li>
+			<li><a href="#">Audi</a></li>
+			<li><a href="#">BMW</a></li>
+			<li><a href="#">Cadillac</a></li>
+			<li><a href="#">Ferrari</a></li>
+		</ul>
+
+		<h3>Make a collapsible block</h3>
+		<p>It's easy to make a collapsible block that toggles open and closed <a href="../content/content-collapsible.html" id="" title="content-collapsible">content-collapsible</a>jQuery Mobile includes a diverse set of common <a href="../lists/docs-lists.html" id="" title="docs-lists">listviews</a> that are basically built from lists with a <code>data-role="listview"</code>. Here is a simple linked list that has a role of <code>listview</code>. We're going to make this look like an inset module by adding a <code>data-inset="true"</code> and add a dynamic search filer with, you guessed it, <code>data-filter="true"</code>.</p>
+
+<pre><code>		
+&lt;div <strong>data-role=&quot;collapsible&quot; data-content-theme=&quot;c&quot;</strong>&gt;
+   &lt;h3&gt;Click me to expand!&lt;/h3&gt;
+   &lt;p&gt;I'm the collapsible content block.&lt;/p&gt;
+&lt;/div&gt;
+</code></pre>
+
+		<div data-role="collapsible" data-content-theme="c">
+			<h3>Click me to expand!</h3>
+			<p>I'm the collapsible content block.</p>
+		</div>
+
+
+		
+		<h3>Add a slider</h3>
+		<p>The framework contains a full set of <a href="../forms/forms-all.html">form elements</a> that automatically are enhanced into touch-friendly styled widgets. Here's a slider made with the new HTML5 input type of range, no <code>data-role</code> needed. Be sure to wrap these in a <code>form</code> element and always properly associate a <code>label</code> to every form element.</p> 
+		
+<pre><code>
+&lt;form&gt;
+   &lt;label for=&quot;slider-0&quot;&gt;Input slider:&lt;/label&gt;
+   &lt;input <strong>type=&quot;range&quot;</strong> name=&quot;slider&quot; id=&quot;slider-0&quot; value=&quot;25&quot; min=&quot;0&quot; max=&quot;100&quot;  /&gt;
+&lt;/form&gt;
+</code></pre>
+		
+		<form>
+			<label for="slider-0">Input slider:</label>
+			<input type="range" name="slider-1" id="slider-0" value="25" min="0" max="100"  />
+		</form>
+		
+		<h3>Add a toolbar</h3>
+		<p>Add a header <a href="../toolbars/docs-bars.html" id="" title="docs-bars">toolbar</a> by adding a div. Set the <code>data-role</code> to <code>header</code> and add a heading tag inside (any heading from H1-H6 can be used).</p> 
+	
+<pre><code>&lt;div <strong>data-role=&quot;header&quot;</strong>&gt;
+	&lt;h1&gt;My Page&lt;/h1&gt;
+&lt;/div&gt;</code></pre>
+		
+		<div data-role="header">
+			<h1>My Page</h1>
+		</div>
+		
+		<h3>Tweak the theme</h3>
+		<p>Don't like black? Fine. jQuery Mobile has robust a <a href="../api/themes.html" id="">theme framework</a> that supports up to 26 sets of toolbar, content and button colors, called a "swatch". Just add a <code>data-theme="e"</code> attribute to the header div to turn it yellow. Try different swatch letters in default theme from a-e.</p>
+		
+		<div data-role="header" data-theme="e">
+			<h1>My Page</h1>
+		</div>
+	
+	<p>Extra credit: try adding a <code>data-theme</code> to any of the other widgets on this page: page wrapper, buttons, lists, even the input for the slider - same deal. </p>
+	
+	<p>When you're ready to build a custom theme, use <a href="http://www.jquerymobile.com/themeroller" rel="external">ThemeRoller</a> to drag and drop, then download a custom theme.</p>
+	
+	<h3>Go forth and build stuff</h3>
+	<p>This is just scratching the surface of all the cool things you can build with jQuery Mobile with little effort. Be sure to explore <a href="../pages/page-links.html" id="" title="page-links">linking pages</a>, <a href="../pages/page-transitions.html" id="" title="page-transitions">adding animated page transitions</a>, and <a href="../pages/page-dialogs.html" id="" title="page-dialogs">creating dialogs</a>. Use the <a href="../api/data-attributes.html" id="" title="data-attributes">data-attribute reference</a> to try out some of the other <code>data-</code> attributes you can play with. </p>
+	
+	<p><strong>More of a developer?</strong> Great, forget everything we just covered (kidding). If you don't want to use the <code>data-</code> attribute configuration system, you can take full control of everything and call plugins directly because these are all just standard jQuery plugins built with the UI widget factory. Be sure to dig into <a href="../api/globalconfig.html" id="" title="globalconfig">global configuration</a>, <a href="../api/events.html" id="" title="events">events</a>, and <a href="../api/methods.html" id="" title="methods">methods</a>. Then read up on <a href="../pages/page-scripting.html" id="" title="page-scripting">scripting pages</a>, <a href="../pages/page-dynamic.html" id="" title="page-dynamic">generating dynamic pages</a>, and <a href="../pages/phonegap.html" id="" title="phonegap">building PhoneGap apps</a>.</p>
+		</div><!--/content-primary -->		
+		
+		<div class="content-secondary">
+			
+			<div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d">
+				
+					<h3>More in this section</h3>
+					
+					<ul data-role="listview"  data-theme="c" data-dividertheme="d">
+						<li data-role="list-divider">Overview</li>
+						<li><a href="../../docs/about/intro.html">Intro to jQuery Mobile</a></li>
+						<li data-theme="a"><a href="../../docs/about/getting-started.html">Quick start guide</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>
+					</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>
\ No newline at end of file
diff --git a/docs/about/index.html b/docs/about/index.html
index 567ee011..d8d46c10 100755
--- a/docs/about/index.html
+++ b/docs/about/index.html
@@ -25,6 +25,7 @@
 	<ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="f">
 		<li data-role="list-divider">Overview</li>
 		<li><a href="intro.html">Intro to jQuery Mobile</a></li>
+		<li><a href="getting-started.html">Quick start guide</a></li>	
 		<li><a href="features.html">Features</a></li>
 		<li><a href="accessibility.html">Accessibility</a></li>
 		<li><a href="platforms.html">Supported platforms</a></li>
diff --git a/docs/about/intro.html b/docs/about/intro.html
index ab355974..bed44db7 100755
--- a/docs/about/intro.html
+++ b/docs/about/intro.html
@@ -46,6 +46,7 @@
 					<ul data-role="listview"  data-theme="c" data-dividertheme="d">
 						<li data-role="list-divider">Overview</li>
 						<li data-theme="a"><a href="../../docs/about/intro.html">Intro to jQuery Mobile</a></li>
+						<li><a href="../../docs/about/getting-started.html">Quick start guide</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>
diff --git a/docs/about/platforms.html b/docs/about/platforms.html
index c98edf0b..a506b357 100755
--- a/docs/about/platforms.html
+++ b/docs/about/platforms.html
@@ -33,8 +33,8 @@
 				<ul>
 					<li><strong>Apple iOS 3.2-5.0</strong> - Tested on the original iPad (4.3 / 5.0), iPad 2 (4.3), original iPhone (3.1), iPhone 3 (3.2), 3GS (4.3), and 4 (4.3 / 5.0)</li>
 					<li><strong>Android 2.1-2.3</strong> - Tested on the HTC Incredible (2.2), original Droid (2.2), Nook Color (2.2), HTC Aria (2.1), Google Nexus S (2.3). Functional on 1.5 &amp; 1.6 but performance may be sluggish, tested on Google G1 (1.5)</li>
-					<li><strong>Android Honeycomb</strong>- Tested on the Samsung Galaxy Tab 10.1</li>
-					<li><strong>Windows Phone 7-7.5</strong> - Tested on the HTC Surround (7) HTC Trophy (7.5), and LG-E900 (7.5)</li>
+					<li><strong>Android Honeycomb</strong>- Tested on the Samsung Galaxy Tab 10.1 and Motorola XOOM</li>
+					<li><strong>Windows Phone 7-7.5</strong> - Tested on the HTC Surround (7.0) HTC Trophy (7.5), and LG-E900 (7.5)</li>
 					<li><strong>Blackberry 6.0</strong> - Tested on the Torch 9800 and Style 9670</li>
 					<li><strong>Blackberry 7</strong> - Tested on BlackBerry® Torch 9810</li>
 					<li><strong>Blackberry Playbook</strong> - Tested on PlayBook version 1.0.1 / 1.0.5</li>
@@ -43,9 +43,9 @@
 					<li><strong>Firebox Mobile (Beta)</strong> - Tested on Android 2.2</li>
 					<li><strong>Opera Mobile 11.0</strong>: Tested on the iPhone 3GS and 4 (5.0/6.0), Android 2.2 (5.0/6.0)</li>
 					<li><strong>Meego 1.2</strong> - Tested on Nokia 950 and N9</li>
-					<li><strong>Kindle 3</strong>: Tested on the built-in WebKit browser included in the Kindle 3 device</li>
-					<li><strong>Chrome <strong>Desktop </strong>11-13</strong> - Tested on OS X 10.6.7 and Windows 7</li>
-					<li><strong>Firefox Desktop 3.6-4.0</strong> - Tested on OS X 10.6.7 and Windows 7</li>
+					<li><strong>Kindle 3 and Fire</strong>: Tested on the built-in WebKit browser for each</li>
+					<li><strong>Chrome <strong>Desktop </strong>11-15</strong> - Tested on OS X 10.6.7 and Windows 7</li>
+					<li><strong>Firefox Desktop 4-8</strong> - Tested on OS X 10.6.7 and Windows 7</li>
 					<li><strong>Internet Explorer 7-9</strong> - Tested on Windows XP, Vista and 7 (minor CSS issues)</li>
 					<li><strong>Opera Desktop 10-11</strong> - Tested on OS X 10.6.7 and Windows 7</li>
 				</ul>
@@ -65,7 +65,7 @@
 				<ul>
 					<li><strong>Samsung Bada</strong> - The project doesn't currently have test devices or emulators, but current support is known to be fairly good. Support level undecided for 1.0</li>
 				</ul>
-				
+
 				
 				</div>
 
@@ -78,6 +78,7 @@
 							<ul data-role="listview" data-theme="c" data-dividertheme="d">
 								<li data-role="list-divider">Overview</li>
 								<li><a href="../../docs/about/intro.html">Intro to jQuery Mobile</a></li>
+								<li><a href="../../docs/about/getting-started.html">Quick start guide</a></li>	
 								<li><a href="../../docs/about/features.html">Features</a></li>
 								<li><a href="../../docs/about/accessibility.html">Accessibility</a></li>
 								<li data-theme="a"><a href="../../docs/about/platforms.html">Supported platforms</a></li>
diff --git a/docs/index.html b/docs/index.html
index f9b6148f..0173f5b4 100755
--- a/docs/index.html
+++ b/docs/index.html
@@ -10,6 +10,8 @@
 	<script src="../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
 	<script src="_assets/js/jqm-docs.js"></script>
 	<script src="../js/"></script>
+	<!-- Need to get a proper redirect hooked up. Blech. -->
+	<meta http-equiv="refresh" content="0;url=../index.html">
 </head> 
 <body> 
 	<div data-role="page" class="type-index">
@@ -21,15 +23,8 @@
 
 <div data-role="content">
 	
-	<ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="b">
-		<li data-role="list-divider">Components</li>
-		<li><a href="pages/index.html">Pages &amp; dialogs</a></li>
-		<li><a href="toolbars/index.html">Toolbars</a></li>
-		<li><a href="buttons/index.html">Buttons</a></li>
-		<li><a href="content/index.html">Content formatting</a></li>
-		<li><a href="forms/index.html">Form elements</a></li>
-		<li><a href="lists/index.html">List views</a></li>
-	</ul>
+<p>Nothing to see here folks.</p>
+<a href="../index.html" data-role="button">View the documentation home page</a>
 
 </div>
 
diff --git a/index.html b/index.html
index 24ed9d69..95615bde 100755
--- a/index.html
+++ b/index.html
@@ -31,6 +31,7 @@
 			<ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="f">
 				<li data-role="list-divider">Overview</li>
 				<li><a href="docs/about/intro.html">Intro to jQuery Mobile</a></li>
+				<li><a href="docs/about/getting-started.html">Quick start guide</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>
