Merge branch 'master' into fastclick

Makefile

@@ -17,7 +17,6 @@ FILES = js/jquery.ui.widget.js \
   js/jquery.mobile.page.js \
   js/jquery.mobile.core.js \
   js/jquery.mobile.navigation.js \
-  js/jquery.ui.position.js \
   js/jquery.mobile.fixHeaderFooter.js \
   js/jquery.mobile.forms.checkboxradio.js \
   js/jquery.mobile.forms.textinput.js \
@@ -62,7 +61,7 @@ css:
 
 cssmin: css
 	@@head -8 js/jquery.mobile.core.js | ${SED_VER} > ${CSSMIN}
-	@@java -jar build/yuicompressor-2.4.2.jar --type css ${CSS} >> ${CSSMIN}
+	@@java -jar build/yuicompressor-2.4.4.jar --type css ${CSS} >> ${CSSMIN}
 
 mobile:
 	@@head -8 js/jquery.mobile.core.js | ${SED_VER} > ${MAX}
@@ -93,16 +92,17 @@ deploy: zip
 	@@mkdir -p ${VER}
 	@@cp -r index.html themes experiments docs ${VER}/
 
-	@@find ${VER} -type f -name '*.html' -exec sed -i "" -e 's|"text/javascript" src="../../../js|"text/javascript" src="js|g' {} \;
-	@@find ${VER} -type f -name '*.html' -exec sed -i "" -e 's|"text/javascript" src="../../js|"text/javascript" src="js|g' {} \;
-	@@find ${VER} -type f -name '*.html' -exec sed -i "" -e 's|"text/javascript" src="../js|"text/javascript" src="js|g' {} \;
+	@@find ${VER} -type f -name '*.html' -exec sed -i "" -e 's|src="../../../js|src="js|g' {} \;
+	@@find ${VER} -type f -name '*.html' -exec sed -i "" -e 's|src="../../js|src="js|g' {} \;
+	@@find ${VER} -type f -name '*.html' -exec sed -i "" -e 's|src="../js|src="js|g' {} \;
 
+	@@find ${VER} -type f -name '*.html' -exec sed -i "" -e 's|media="only all"||g' {} \;
 	@@find ${VER} -type f -name '*.html' -exec sed -i "" -e 's|rel="stylesheet"  href="../../../|rel="stylesheet"  href="|g' {} \;
 	@@find ${VER} -type f -name '*.html' -exec sed -i "" -e 's|rel="stylesheet"  href="../../|rel="stylesheet"  href="|g' {} \;
 	@@find ${VER} -type f -name '*.html' -exec sed -i "" -e 's|rel="stylesheet"  href="../|rel="stylesheet"  href="|g' {} \;
 
 	@@find ${VER} -type f -name '*.html' -exec sed -i "" -e 's|href="themes/default/"|href="http://code.jquery.com/mobile/${VER}/${DIR}.min.css"|g' {} \;
-	@@find ${VER} -type f -name '*.html' -exec sed -i "" -e 's|<script type="text/javascript" src="js/all|<script src="http://code.jquery.com/jquery-1.4.3.min.js"></script><script type="text/javascript" src="js/all|' {} \;
-	@@find ${VER} -type f -name '*.html' -exec sed -i "" -e 's|src="js/all"|src="http://code.jquery.com/mobile/${VER}/${DIR}.min.js"|g' {} \;
+	@@find ${VER} -type f -name '*.html' -exec sed -i "" -e 's|src="js/jquery.js"|src="http://code.jquery.com/jquery-1.5.min.js"|' {} \;
+	@@find ${VER} -type f -name '*.html' -exec sed -i "" -e 's|src="js/"|src="http://code.jquery.com/mobile/${VER}/${DIR}.min.js"|g' {} \;
 
 	@@scp -r ${VER} jqadmin@jquerymobile.com:/srv/jquerymobile.com/htdocs/demos/

README.md

@@ -1,27 +1,17 @@
-Early stage development for the jQuery Mobile UI Framework.
-Code is subject to change dramatically!
-
-Usage
+jQuery Mobile Framework
 =====
+http://jquerymobile.com
 
-Early documentation: https://github.com/jquery/jquery-mobile/wiki/_pages
 
-For now, I've set things up with a little combinator script to concat all the css and js files into one request and gzip. (js/ and themes/default)
-You'll need to point your local apache & php webserver at this root directory in order to preview things. 
+Demos and documentation
+===================================
+http://jquerymobile.com/test/
 
-If you don't currently have a webserver running locally, a quick way to get up and running is to download and install Mamp for Mac OSX. Once installed, just open Mamp, click preferences, go to the Apache tab, and select your local jQuery Mobile folder as the root. Then you can open a browser to http://localhost:8888 to preview the code.
-An alternative is XAMPP, which is also available for Windows, though you need to actually modify Apache's httpd.conf to point to your checkout: http://www.apachefriends.org/en/xampp.html
-You need the Rewrite (mod_rewrite.so), Expire (mod_expires.so) and Header (mod_headers.so) modules loaded.
 
-Whenever this configuration becomes inconvenient, we can remove it, obviously it's not meant to stay!
-
-- when adding a js or css file, add it to the manifest in its directory and it'll be included in the request
-- As far as JS files go, jQuery.mobile.core.js is the starting point.
-
-How to build your own jQuery Mobile
+How to build your own jQuery Mobile CSS and JS files
 ===================================
 
-Clone this repo and build the js and css files:
+Clone this repo and build the js and css files (you'll need Git and Make installed):
 
     git clone git://github.com/jquery/jquery-mobile.git
     cd jquery-mobile
@@ -29,3 +19,32 @@ Clone this repo and build the js and css files:
 
 Two complete versions, one minified, one not, of jQuery Mobile js and css files will be created.
 
+
+Submitting bugs
+===================================
+
+If you think you've found a bug, please visit the Issue tracker (https://github.com/jquery/jquery-mobile/issues) and create an issue explaining the problem and expected result. Be sure to include any relevant information for reproducing the issue, such as the browser/device (with version #), and the version of the jQuery Mobile code you're running. It also helps a lot to make sure that the bug still exists on jquerymobile.com/test/, as it's possible we may have fixed it already! 
+
+
+Submitting patches
+===================================
+
+To contribute code and bug fixes to jQuery Mobile: fork this project on Github, make changes to the code in your fork, and then send a 
+"pull request" to notify the team of updates that are ready to be reviewed for inclusion.
+
+
+Running the jQuery Mobile demos & docs locally
+===================================
+
+To preview locally, you'll need to clone a local copy of this repository and point your Apache & PHP webserver at its root directory (a webserver is required, as PHP and .htaccess are used for combining development files).
+
+If you don't currently have a webserver running locally, there are a few options. If you're on a Mac, you can try dropping jQuery Mobile into your sites folder and turning on Web Sharing via System Prefs. From there, you'll find a URL where you can browse folders in your sites directory from a browser.
+
+Another quick way to get up and running is to download and install MAMP for Mac OSX. Once installed, just open MAMP, click preferences, go to the Apache tab, and select your local jQuery Mobile folder as the root. Then you can open a browser to http://localhost:8888 to preview the code.
+
+Another alternative is XAMPP, which is also available for Windows, though you need to actually modify Apache's httpd.conf to point to your checkout: http://www.apachefriends.org/en/xampp.html
+You need the Rewrite (mod_rewrite.so), Expire (mod_expires.so) and Header (mod_headers.so) modules loaded.
+
+
+
+

build.xml

@@ -20,7 +20,6 @@
 	jquery.mobile.theme.css,
 	jquery.mobile.transitions.css"/>
 	<property name="js-sources" value="jquery.js,
-	jquery.ui.position.js,
 	jquery.ui.widget.js,
 	jquery.mobile.widget.js,
 	jquery.mobile.media.js,

docs/_assets/css/jqm-docs.css

@@ -1,3 +1,5 @@
+body { background: #dddddd;}
+
 .ui-mobile #jqm-home {  background: #e5e5e5 url(../images/jqm-sitebg.png) top center repeat-x; }
 .ui-mobile #jqm-homeheader { padding: 55px 25px 0; text-align: center }
 .ui-mobile #jqm-homeheader h1 { margin: 0 0 10px; }
@@ -11,3 +13,6 @@ p code { font-size:1.2em; font-weight:bold; }
 dt { font-weight: bold; margin: 2em 0 .5em; }
 dt code, dd code { font-size:1.3em; line-height:150%; }
 pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; }
+
+.ui-header .jqm-home { top:0.65em; }
+

docs/about/accessibility.html

@@ -12,8 +12,9 @@
 
 <div data-role="page">
 
-	<div data-role="header">
+	<div data-role="header" data-theme="b">
 		<h1>Accessibility</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">

docs/about/features.html

@@ -12,8 +12,9 @@
 
 <div data-role="page">
 
-	<div data-role="header">
-		<h1>Features</h1>
+	<div data-role="header" data-theme="b">
+		<h1>Features</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">

docs/about/index.html

@@ -9,10 +9,11 @@
 	<script type="text/javascript" src="../../js/"></script>
 </head> 
 <body> 
-<div data-role="page" data-theme="b">
+<div data-role="page">
 
-<div data-role="header" data-position="inline">
+<div data-role="header" data-theme="b">
 	<h1>About jQuery Mobile</h1>
+	<a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse" class="ui-btn-right jqm-home">Home</a>
 </div>
 
 <div data-role="content">

docs/about/intro.html

@@ -12,13 +12,15 @@
 
 <div data-role="page">
 
-	<div data-role="header">
+	<div data-role="header" data-theme="b">
 		<h1>Introduction</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">
 		
-		
+		<h2>jQuery Mobile Overview</h2>
+
 		<p>jQuery’s mobile strategy can be summarized simply: Delivering top-of-the-line JavaScript in a unified User Interface that works across the most-used smartphone web browsers and tablet form factors.</p>
 
 		<p>The critical difference with our approach is the <a href="platforms.html">wide variety of mobile platforms we’re targeting</a> with jQuery Mobile. We’ve been working hard at bringing jQuery support to all mobile browsers that are sufficiently-capable and have at least a nominal amount of market share. In this way, we’re treating mobile web browsers exactly how we treat desktop web browsers.</p>

docs/about/platforms.html

@@ -12,27 +12,31 @@
 
 <div data-role="page">
 
-	<div data-role="header">
+	<div data-role="header" data-theme="b">
 		<h1>Supported platforms</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">
 			
-				<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>
+				<h2>Supported platforms in alpha 3</h2>
+				<p>In the alpha 3 release, the following platforms and browsers have a solid jQuery Mobile experience with pages fully functional and rendering as designed. That being said, there are still a fair amount of bugs and performance improvements to be tackled before the 1.0 release. </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 (in progress)</li>
+					<li>Apple iOS (3.1-4.2): tested on iPhone, iPod Touch, iPad</li>
+					<li>Android (1.6-2.3): all devices, tested on the HTC Incredible, Motorola Droid, Google G1 and Nook Color</li>
+					<li>Blackberry 6: tested on Torch and Style</li>
+					<li>Palm WebOS (1.4): tested on Pre, Pixi</li>
+                    <li>Opera Mobile (10.1): Android</li>
+                    <li>Opera Mini (5.02): iOS, Android</li>
+                    <li>Firefox Mobile (beta): Android</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>
+                <h2>Target platform additions for beta</h2>
+				<p>The team is now focusing on bringing support to Blackberry 5, Nokia/Symbian, and Windows Phone 7 for the upcoming beta release. We don't yet have phones to test 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>
 				
-				<p><a href="http://jquerymobile.com/gbs/" rel="external"><strong>View supported browser matrix</strong> on jQuery Mobile</a></p>
+				<p>For more information about browser support, view the <a href="https://github.com/jquery/jquery-mobile/wiki/Current-development-status-">current browser support status and known issues</a> and the project's target <a href="http://jquerymobile.com/gbs/" rel="external"><strong>graded browser matrix</strong>.</p>
 				
 
 						

docs/api/events.html

@@ -12,8 +12,9 @@
 
 <div data-role="page">
 
-	<div data-role="header">
+	<div data-role="header" data-theme="b">
 		<h1>Events</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">

docs/api/globalconfig.html

@@ -12,8 +12,9 @@
 
 <div data-role="page">
 
-	<div data-role="header">
+	<div data-role="header" data-theme="b">
 		<h1>Configuring Defaults</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" data-theme="c">

docs/api/index.html

@@ -9,10 +9,11 @@
 	<script type="text/javascript" src="../../js/"></script>
 </head> 
 <body> 
-<div data-role="page" data-theme="b">
+<div data-role="page">
 
-<div data-role="header" data-position="inline">
+<div data-role="header" data-theme="b">
 	<h1>API</h1>
+	<a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse" class="ui-btn-right jqm-home">Home</a>
 </div>
 
 <div data-role="content">

docs/api/mediahelpers.html

@@ -10,10 +10,11 @@
 </head> 
 <body> 
 
-<div data-role="page">
+<div data-role="page" data-theme="b">
 
 	<div data-role="header">
 		<h1>Responsive Layout Helpers</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" data-theme="c">

docs/api/methods.html

@@ -10,10 +10,11 @@
 </head> 
 <body> 
 
-<div data-role="page">
+<div data-role="page" data-theme="b">
 
 	<div data-role="header">
 		<h1>Methods</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">

docs/api/themes.html

@@ -12,8 +12,9 @@
 
 <div data-role="page">
 
-	<div data-role="header">
+	<div data-role="header" data-theme="b">
 		<h1>Themes</h1>
+		<a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse" class="ui-btn-right jqm-home">Home</a>
 	</div>
 
 	<div data-role="content">
@@ -91,7 +92,7 @@
 			</div>
 			<div class="ui-bar ui-bar-a">
 				<div data-role="controlgroup" data-type="horizontal" >
-					<a href="#" data-inline="true">Button</a><a href="#" data-inline="true">Button</a><a href="#" data-inline="true">Button</a>
+					<a href="#" data-role="button" data-inline="true">Button</a><a href="#" data-role="button" data-inline="true">Button</a><a href="#" data-role="button" data-inline="true">Button</a>
 				</div><!-- /controlgroup -->
 			</div>
 
@@ -154,47 +155,47 @@
 		<div class="swatch-bars">
 			<div data-role="header" data-theme="a" class="ui-bar" data-backbtn="false">
 				<div><!-- wrapper div to have control over butttons -->
-					<a href="index.html" data-icon="arrow-l" data-theme="a">A</a>
-					<a href="index.html" data-icon="arrow-l" data-theme="b">B</a>
-					<a href="index.html" data-icon="arrow-l" data-theme="c">C</a>
-					<a href="index.html" data-icon="arrow-l" data-theme="d">D</a>
-					<a href="index.html" data-icon="arrow-l" data-theme="e">E</a>
+					<a href="index.html" data-role="button" data-icon="arrow-l" data-theme="a">A</a>
+					<a href="index.html" data-role="button" data-icon="arrow-l" data-theme="b">B</a>
+					<a href="index.html" data-role="button" data-icon="arrow-l" data-theme="c">C</a>
+					<a href="index.html" data-role="button" data-icon="arrow-l" data-theme="d">D</a>
+					<a href="index.html" data-role="button" data-icon="arrow-l" data-theme="e">E</a>
 				</div>
 			</div>
 			<div data-role="header" data-theme="b" class="ui-bar" data-backbtn="false">
 				<div><!-- wrapper div to have control over butttons -->
-					<a href="index.html" data-icon="arrow-l" data-theme="a">A</a>
-					<a href="index.html" data-icon="arrow-l" data-theme="b">B</a>
-					<a href="index.html" data-icon="arrow-l" data-theme="c">C</a>
-					<a href="index.html" data-icon="arrow-l" data-theme="d">D</a>
-					<a href="index.html" data-icon="arrow-l" data-theme="e">E</a>
+					<a href="index.html" data-role="button" data-icon="arrow-l" data-theme="a">A</a>
+					<a href="index.html" data-role="button" data-icon="arrow-l" data-theme="b">B</a>
+					<a href="index.html" data-role="button" data-icon="arrow-l" data-theme="c">C</a>
+					<a href="index.html" data-role="button" data-icon="arrow-l" data-theme="d">D</a>
+					<a href="index.html" data-role="button" data-icon="arrow-l" data-theme="e">E</a>
 				</div>
 			</div>
 			<div data-role="header" data-theme="c" class="ui-bar" data-backbtn="false">
 				<div><!-- wrapper div to have control over butttons -->
-					<a href="index.html" data-icon="arrow-l" data-theme="a">A</a>
-					<a href="index.html" data-icon="arrow-l" data-theme="b">B</a>
-					<a href="index.html" data-icon="arrow-l" data-theme="c">C</a>
-					<a href="index.html" data-icon="arrow-l" data-theme="d">D</a>
-					<a href="index.html" data-icon="arrow-l" data-theme="e">E</a>
+					<a href="index.html" data-role="button" data-icon="arrow-l" data-theme="a">A</a>
+					<a href="index.html" data-role="button" data-icon="arrow-l" data-theme="b">B</a>
+					<a href="index.html" data-role="button" data-icon="arrow-l" data-theme="c">C</a>
+					<a href="index.html" data-role="button" data-icon="arrow-l" data-theme="d">D</a>
+					<a href="index.html" data-role="button" data-icon="arrow-l" data-theme="e">E</a>
 				</div>
 			</div>
 			<div data-role="header" data-theme="d" class="ui-bar" data-backbtn="false">
 				<div><!-- wrapper div to have control over butttons -->
-					<a href="index.html" data-icon="arrow-l" data-theme="a">A</a>
-					<a href="index.html" data-icon="arrow-l" data-theme="b">B</a>
-					<a href="index.html" data-icon="arrow-l" data-theme="c">C</a>
-					<a href="index.html" data-icon="arrow-l" data-theme="d">D</a>
-					<a href="index.html" data-icon="arrow-l" data-theme="e">E</a>
+					<a href="index.html" data-role="button" data-icon="arrow-l" data-theme="a">A</a>
+					<a href="index.html" data-role="button" data-icon="arrow-l" data-theme="b">B</a>
+					<a href="index.html" data-role="button" data-icon="arrow-l" data-theme="c">C</a>
+					<a href="index.html" data-role="button" data-icon="arrow-l" data-theme="d">D</a>
+					<a href="index.html" data-role="button" data-icon="arrow-l" data-theme="e">E</a>
 				</div>
 			</div>
 			<div data-role="header" data-theme="e" class="ui-bar" data-backbtn="false">
 				<div><!-- wrapper div to have control over butttons -->
-					<a href="index.html" data-icon="arrow-l" data-theme="a">A</a>
-					<a href="index.html" data-icon="arrow-l" data-theme="b">B</a>
-					<a href="index.html" data-icon="arrow-l" data-theme="c">C</a>
-					<a href="index.html" data-icon="arrow-l" data-theme="d">D</a>
-					<a href="index.html" data-icon="arrow-l" data-theme="e">E</a>
+					<a href="index.html" data-role="button" data-icon="arrow-l" data-theme="a">A</a>
+					<a href="index.html" data-role="button" data-icon="arrow-l" data-theme="b">B</a>
+					<a href="index.html" data-role="button" data-icon="arrow-l" data-theme="c">C</a>
+					<a href="index.html" data-role="button" data-icon="arrow-l" data-theme="d">D</a>
+					<a href="index.html" data-role="button" data-icon="arrow-l" data-theme="e">E</a>
 				</div>
 			</div>
 			
@@ -226,7 +227,8 @@
 			<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>
+            <li><a href="../forms/forms-themes.html">Form theming</a></li>
+            <li><a href="../lists/lists-themes.html">List theming</a></li>
 		</ul>
 	</div><!-- end content -->
 	

docs/buttons/api-buttons.html

@@ -12,8 +12,9 @@
 
 <div data-role="page">
 
-	<div data-role="header">
+	<div data-role="header" data-theme="b">
 		<h1>Button API</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" data-theme="c">

docs/buttons/buttons-grouped.html

@@ -2,7 +2,7 @@
 <html> 
 	<head>
 	<meta charset="utf-8" /> 
-	<title>jQuery Mobile Docs - Buttons</title> 
+	<title>jQuery Mobile Docs - Grouped Buttons</title> 
 	<link rel="stylesheet"  href="../../themes/default/" /> 
 	<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/> 
 	<script type="text/javascript" src="../../js/jquery.js"></script>
@@ -13,8 +13,9 @@
 
 <div data-role="page">
 
-	<div data-role="header">
+	<div data-role="header" data-theme="b">
 		<h1>Grouped buttons</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">

docs/buttons/buttons-icons.html

@@ -2,7 +2,7 @@
 <html> 
 	<head>
 	<meta charset="utf-8" /> 
-	<title>jQuery Mobile Docs - Buttons</title> 
+	<title>jQuery Mobile Docs - Button icons</title> 
 	<link rel="stylesheet"  href="../../themes/default/" />  
 	<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
 	<script type="text/javascript" src="../../js/jquery.js"></script>
@@ -13,8 +13,9 @@
 
 <div data-role="page">
 
-	<div data-role="header">
+	<div data-role="header" data-theme="b">
 		<h1>Button icons</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">
@@ -68,8 +69,10 @@
 			<a href="index.html" data-role="button" data-icon="alert">My button</a>
 			<p><strong>Info</strong> - data-icon="info"</p>
 			<a href="index.html" data-role="button" data-icon="info">My button</a>
-			
-			
+			<p><strong>Home</strong> - data-icon="home"</p>
+			<a href="index.html" data-role="button" data-icon="home">My button</a>
+			<p><strong>Search</strong> - data-icon="search"</p>
+			<a href="index.html" data-role="button" data-icon="search">My button</a>
 			
 
 		<h2>Icon positioning</h2>
@@ -126,6 +129,8 @@
 		<a href="index.html" data-role="button" data-icon="star" data-iconpos="notext" data-theme="a" data-inline="true">My button</a>
 		<a href="index.html" data-role="button" data-icon="alert" data-iconpos="notext" data-theme="a" data-inline="true">My button</a>
 		<a href="index.html" data-role="button" data-icon="info" data-iconpos="notext" data-theme="a" data-inline="true">My button</a>
+        <a href="index.html" data-role="button" data-icon="home" data-iconpos="notext" data-theme="a" data-inline="true">My button</a>
+        <a href="index.html" data-role="button" data-icon="search" data-iconpos="notext" data-theme="a" data-inline="true">My button</a>
 		</div>
 		
 		<!-- B themed -->
@@ -147,6 +152,8 @@
 		<a href="index.html" data-role="button" data-icon="star" data-iconpos="notext" data-theme="b" data-inline="true">My button</a>
 		<a href="index.html" data-role="button" data-icon="alert" data-iconpos="notext" data-theme="b" data-inline="true">My button</a>
 		<a href="index.html" data-role="button" data-icon="info" data-iconpos="notext" data-theme="b" data-inline="true">My button</a>
+        <a href="index.html" data-role="button" data-icon="home" data-iconpos="notext" data-theme="b" data-inline="true">My button</a>
+        <a href="index.html" data-role="button" data-icon="search" data-iconpos="notext" data-theme="b" data-inline="true">My button</a>
 		</div>
 		
 		<!-- C themed -->
@@ -168,6 +175,8 @@
 		<a href="index.html" data-role="button" data-icon="star" data-iconpos="notext" data-theme="c" data-inline="true">My button</a>
 		<a href="index.html" data-role="button" data-icon="alert" data-iconpos="notext" data-theme="c" data-inline="true">My button</a>
 		<a href="index.html" data-role="button" data-icon="info" data-iconpos="notext" data-theme="c" data-inline="true">My button</a>
+        <a href="index.html" data-role="button" data-icon="home" data-iconpos="notext" data-theme="c" data-inline="true">My button</a>
+        <a href="index.html" data-role="button" data-icon="search" data-iconpos="notext" data-theme="c" data-inline="true">My button</a>
 		</div>
 	
 	</div><!-- /content -->

docs/buttons/buttons-inline.html

@@ -2,7 +2,7 @@
 <html> 
 	<head>
 	<meta charset="utf-8" /> 
-	<title>jQuery Mobile Docs - Buttons</title> 
+	<title>jQuery Mobile Docs - Inline buttons</title> 
 	<link rel="stylesheet"  href="../../themes/default/" />  
 	<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
 	<script type="text/javascript" src="../../js/jquery.js"></script>
@@ -13,8 +13,9 @@
 
 <div data-role="page">
 
-	<div data-role="header">
+	<div data-role="header" data-theme="b">
 		<h1>Inline buttons</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">

docs/buttons/buttons-themes.html

@@ -2,7 +2,7 @@
 <html> 
 	<head>
 	<meta charset="utf-8" /> 
-	<title>jQuery Mobile Docs - Buttons</title> 
+	<title>jQuery Mobile Docs - Button Theming</title> 
 	<link rel="stylesheet"  href="../../themes/default/" />  
 	<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
 	<script type="text/javascript" src="../../js/jquery.js"></script>
@@ -13,15 +13,16 @@
 
 <div data-role="page">
 
-	<div data-role="header">
+	<div data-role="header" data-theme="b">
 		<h1>Theming buttons</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">
 			
 			<h2>Theming</h2>
 			
-			<p>jQuery Mobile has a rich <a href="../themes/index.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>
+			<p>jQuery Mobile has a rich <a href="../api/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>

docs/buttons/buttons-types.html

@@ -2,7 +2,7 @@
 <html> 
 	<head>
 	<meta charset="utf-8" /> 
-	<title>jQuery Mobile Docs - Lists</title> 
+	<title>jQuery Mobile Docs - Button types</title> 
 	<link rel="stylesheet"  href="../../themes/default/" />  
 	<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
 	<script type="text/javascript" src="../../js/jquery.js"></script>
@@ -13,8 +13,9 @@
 
 <div data-role="page">
 
-	<div data-role="header">
+	<div data-role="header" data-theme="b">
 		<h1>Button markup options</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">

docs/buttons/index.html

@@ -11,10 +11,11 @@
 </head> 
 <body> 
 
-<div data-role="page" data-theme="b">
+<div data-role="page">
 
 	<div data-role="header" data-theme="b">
 		<h1>Buttons</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">

docs/content/content-collapsible.html

@@ -14,8 +14,9 @@
 
 <div data-role="page">
 
-	<div data-role="header">
+	<div data-role="header" data-theme="b">
 		<h1>Collapsible content</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">

docs/content/content-grids.html

@@ -15,8 +15,9 @@
 
 <div data-role="page">
 
-	<div data-role="header">
+	<div data-role="header" data-theme="b">
 		<h1>Layout grids</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">

docs/content/content-html.html

@@ -15,8 +15,9 @@
 
 <div data-role="page">
 
-	<div data-role="header">
+	<div data-role="header" data-theme="b">
 		<h1>HTML Formatting</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">
@@ -31,7 +32,7 @@
 		
 	
 		
-		<p>The default approach to styling content in jQuery Mobile is simple: Use a light hand.  Our goal is to let the browser's native rendering take precedence; we add a bit of padding for more comfortable readability, and use the <a href="../themes/index.html">theming system</a>  to apply the font family and colors. </p>
+		<p>The default approach to styling content in jQuery Mobile is simple: Use a light hand.  Our goal is to let the browser's native rendering take precedence; we add a bit of padding for more comfortable readability, and use the <a href="../api/themes.html">theming system</a>  to apply the font family and colors. </p>
 		<p>Taking a light hand with content styling gives designers and developers a clean slate to work with, instead of fighting against a lot of complex style overhead.</p>
 		
 		<h2>Default HTML markup styling</h2>

docs/content/content-themes.html

@@ -13,8 +13,9 @@
 
 <div data-role="page">
 
-	<div data-role="header">
+	<div data-role="header" data-theme="b">
 		<h1>Theming content</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">

docs/content/index.html

@@ -11,10 +11,11 @@
 </head> 
 <body> 
 
-<div data-role="page" data-theme="b">
+<div data-role="page">
 
 	<div data-role="header" data-theme="b">
 		<h1>Content formatting</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">

docs/forms/api-forms.html

@@ -12,8 +12,9 @@
 
 <div data-role="page">
 
-	<div data-role="header">
+	<div data-role="header" data-theme="b">
 		<h1>Form API</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" data-theme="c">

docs/forms/docs-forms.html

@@ -13,8 +13,9 @@
 
 <div data-role="page">
 
-	<div data-role="header">
+	<div data-role="header" data-theme="b">
 		<h1>Forms</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">

docs/forms/forms-all.html

@@ -12,8 +12,9 @@
 
 <div data-role="page">
 
-	<div data-role="header">
+	<div data-role="header" data-theme="b">
 		<h1>Forms</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">
@@ -183,7 +184,7 @@
 
 				<div data-role="fieldcontain">
 					<label for="select-choice-native" class="select">Your state:</label>
-					<select name="select-choice-native" id="select-choice-native" data-native="true">
+					<select name="select-choice-native" id="select-choice-native" data-native-menu="true">
 						<option>Native menu...</option>
 						<option value="AL">Alabama</option>
 						<option value="AK">Alaska</option>

docs/forms/forms-checkboxes.html

@@ -13,8 +13,9 @@
 
 <div data-role="page">
 
-	<div data-role="header">
+	<div data-role="header" data-theme="b">
 		<h1>Checkboxes</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">

docs/forms/forms-radiobuttons.html

@@ -13,8 +13,9 @@
 
 <div data-role="page">
 
-	<div data-role="header">
+	<div data-role="header" data-theme="b">
 		<h1>Radio buttons</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">

docs/forms/forms-sample-response.php

@@ -14,6 +14,7 @@
 
 	<div data-role="header" data-theme="e">
 		<h1>Sample form response</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" data-theme="c">

docs/forms/forms-sample.html

@@ -14,6 +14,7 @@
 
 	<div data-role="header">
 		<h1>Forms</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">

docs/forms/forms-search.html

@@ -13,8 +13,9 @@
 
 <div data-role="page">
 
-	<div data-role="header">
+	<div data-role="header" data-theme="b">
 		<h1>Search inputs</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">

docs/forms/forms-selects.html

@@ -13,8 +13,9 @@
 
 <div data-role="page">
 
-	<div data-role="header">
+	<div data-role="header" data-theme="b">
 		<h1>Select Menus</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">
@@ -117,21 +118,21 @@
 
 					<h2>Option to use native menus</h2>
 					<p>The custom select menus add the ability to theme the select and provide visual consistency across platforms In addition, it fixes over some missing functionality on certain platforms: <code>optgroup</code> support on Android, multi-select capability on WebOS, and adds an elegant way to handle placeholder values (explained below).</p>
-					<p>However, there is overhead involved in parsing the native select to build a custom menu and if the number of selects or options within are fairly large, this can impact the performance of the page. By adding the <code>data-native="true"</code> attribute to the <code>select</code>, the framework will use the browser's native select menu when the select button is clicked. Because this option doesn't use any of the custom menu parsing and menu generation logic, it is significantly faster than the custom menu version.</p>
+					<p>However, there is overhead involved in parsing the native select to build a custom menu and if the number of selects or options within are fairly large, this can impact the performance of the page. By adding the <code>data-native-menu="true"</code> attribute to the <code>select</code>, the framework will use the browser's native select menu when the select button is clicked. Because this option doesn't use any of the custom menu parsing and menu generation logic, it is significantly faster than the custom menu version.</p>
 
-			<p>You can also set the global configuration <code>$.mobile.nativeSelectMenus</code> to true in a callback bound to the <code>mobileinit</code> event to achieve the same effect. The following must be included in the page after jQuery is loaded but before jQuery Mobile.</p>
+			<p>You can also programmatically set the select menu's configuration option to true in a callback bound to the <code>mobileinit</code> event to achieve the same effect. The following must be included in the page after jQuery is loaded but before jQuery Mobile is loaded.</p>
 
 			<code>
 				<pre>
 $(document).bind('mobileinit',function(){
-	$.mobile.nativeSelectMenus = true;
+	$.mobile.selectmenu.prototype.options.nativeMenu = true;
 });
 				</pre>
 			</code>
 
 					<div data-role="fieldcontain">
 						<label for="select-choice-3" class="select">Your state:</label>
-						<select name="select-choice-3" id="select-choice-3" data-native="true">
+						<select name="select-choice-3" id="select-choice-3" data-native-menu="true">
 							<option value="AL">Alabama</option>
 							<option value="AK">Alaska</option>
 							<option value="AZ">Arizona</option>

docs/forms/forms-slider.html

@@ -13,8 +13,9 @@
 
 <div data-role="page">
 
-	<div data-role="header">
+	<div data-role="header" data-theme="b">
 		<h1>Slider</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">

docs/forms/forms-switch.html

@@ -13,7 +13,7 @@
 
 <div data-role="page">
 
-	<div data-role="header">
+	<div data-role="header" data-theme="b">
 		<h1>Flip switch</h1>
 	</div><!-- /header -->
 

docs/forms/forms-text.html

@@ -13,8 +13,9 @@
 
 <div data-role="page">
 
-	<div data-role="header">
+	<div data-role="header" data-theme="b">
 		<h1>Text inputs</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">

docs/forms/forms-themes.html

@@ -11,13 +11,20 @@
 </head> 
 <body> 
 
-<div data-role="page" data-theme="a">
+<div data-role="page">
 
-	<div data-role="header">
+	<div data-role="header" data-theme="b">
 		<h1>Theming forms</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">
+    
+    <h2>Form themes</h2>
+    <p>jQuery Mobile has a rich <a href="../api/themes.html">theming system</a> that gives you full control of how pages and forms are styled. By default all form elements inside a container will automaticlaly adopt the same theme color swatch as their parent. This allows form elements to blend into their layouts with minimal work. The <code>data-theme</code> attribute can be applied any individual form element to apply any of the lettered theme color swatches to create contrast and emphasis in your designs.</p> 
+    
+    <p>All the form elements in the examples below use the same HTML code with no theme swatch specified on the individual form elements. The only difference between each example block code is a <code>data-theme</code> swatch color assigned to each parent container. This illustrates the way form elements automatically adopt the theme swatch of their parent.</p>
+			
 		
 	<h2>Body swatch A</h2>
 	<div class="ui-body ui-body-a">

docs/forms/index.html

@@ -11,10 +11,11 @@
 </head> 
 <body> 
 
-<div data-role="page" data-theme="b">
+<div data-role="page">
 
 	<div data-role="header" data-theme="b">
 		<h1>Form elements</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">

docs/forms/plugin-eventsmethods.html

@@ -12,8 +12,9 @@
 
 <div data-role="page">
 
-	<div data-role="header">
+	<div data-role="header" data-theme="b">
 		<h1>Form Plugin Methods</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">

docs/index.html

@@ -10,8 +10,9 @@
 <body> 
 <div data-role="page" data-theme="b">
 
-<div data-role="header" data-position="inline">
+<div data-role="header">
 	<h1>jQuery Mobile Docs</h1>
+	<a href="../index.html" data-icon="home" data-iconpos="notext" class="ui-btn-right">Home</a>
 </div>
 
 <div data-role="content">

docs/lists/docs-lists.html

@@ -12,8 +12,9 @@
 
 <div data-role="page">
 
-	<div data-role="header">
+	<div data-role="header" data-theme="b">
 		<h1>Lists</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">
@@ -54,7 +55,7 @@
 			
 			
 			<h2>List dividers</h2>
-			<p>List items can be turned into dividers to organize and group the list items. This is done by adding the <code>data-role="list-divider"</code> to any list item. These items are styled with the body swatch "b" by default (light gray in the default theme) but you can specify a theme for dividers by adding the <code>data-groupingtheme</code> attribute and specifying a theme swatch letter.</p>
+			<p>List items can be turned into dividers to organize and group the list items. This is done by adding the <code>data-role="list-divider"</code> to any list item. These items are styled with the body swatch "b" by default (light gray in the default theme) but you can specify a theme for dividers by adding the <code>data-dividertheme</code> attribute to the list element (ul or ol) and specifying a theme swatch letter.</p>
 
 			<a href="lists-divider.html" data-role="button" data-icon="arrow-r" data-iconpos="right">List divider example</a>
 			
@@ -96,4 +97,4 @@
 </div><!-- /page -->
 
 </body>
-</html>
+</html>

docs/lists/index.html

@@ -10,10 +10,11 @@
 </head> 
 <body> 
 
-<div data-role="page" data-theme="b">
+<div data-role="page">
 
 	<div data-role="header" data-theme="b">
 		<h1>Lists</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">

docs/lists/lists-count.html

@@ -13,8 +13,9 @@
 
 <div data-role="page">
 
-	<div data-role="header">
+	<div data-role="header" data-theme="b">
 		<h1>Basic list</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">

docs/lists/lists-divider.html

@@ -13,8 +13,9 @@
 
 <div data-role="page">
 
-	<div data-role="header">
+	<div data-role="header" data-theme="b">
 		<h1>List dividers</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">

docs/lists/lists-formatting.html

@@ -13,8 +13,9 @@
 
 <div data-role="page">
 
-	<div data-role="header">
+	<div data-role="header" data-theme="b">
 		<h1>List formatting</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">

docs/lists/lists-icons.html

@@ -13,8 +13,9 @@
 
 <div data-role="page">
 
-	<div data-role="header">
+	<div data-role="header" data-theme="b">
 		<h1>Icons</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">

docs/lists/lists-inset.html

@@ -13,8 +13,9 @@
 
 <div data-role="page">
 
-	<div data-role="header">
+	<div data-role="header" data-theme="b">
 		<h1>Inset list</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">

docs/lists/lists-nested.html

@@ -13,13 +13,15 @@
 
 <div data-role="page">
 
-	<div data-role="header">
+	<div data-role="header" data-theme="b">
 		<h1>Nested list</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">
 		<ul data-role="listview">
-			<li>Animals
+			<li><h3><a href="#">Animals</a></h3>
+			<p>All your favorites from aarkvarks to zebras.</p>
 				<ul>
 					<li>Pets
 						<ul>
@@ -60,11 +62,13 @@
 							<li><a href="index.html">Panda bear</a></li>
 							<li><a href="index.html">Polar bear</a></li>
 							<li><a href="index.html">Tiger</a></li>
+							<li><a href="index.html">Zebra</a></li>
 						</ul>
 					</li>
 				</ul>
 			</li>
-			<li>Colors
+			<li><h3><a href="#">Colors</a></h3>
+			<p>Fresh colors from the magic rainbow.</p>
 				<ul>
 					<li><a href="index.html">Blue</a></li>
 					<li><a href="index.html">Green</a></li>
@@ -72,6 +76,7 @@
 					<li><a href="index.html">Purple</a></li>
 					<li><a href="index.html">Red</a></li>
 					<li><a href="index.html">Yellow</a></li>
+					<li><a href="index.html">Violet</a></li>
 				</ul>
 			</li>
 			<li>

docs/lists/lists-ol.html

@@ -13,8 +13,9 @@
 
 <div data-role="page">
 
-	<div data-role="header">
+	<div data-role="header" data-theme="b">
 		<h1>Numbered list</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">

docs/lists/lists-performance.html

@@ -12,8 +12,9 @@
 
 <div data-role="page">
 
-	<div data-role="header">
+	<div data-role="header" data-theme="b">
 		<h1>500 item list</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">

docs/lists/lists-readonly.html

@@ -13,8 +13,9 @@
 
 <div data-role="page">
 
-	<div data-role="header">
+	<div data-role="header" data-theme="b">
 		<h1>Read-only list</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">

docs/lists/lists-search.html

@@ -13,8 +13,9 @@
 
 <div data-role="page">
 
-	<div data-role="header">
+	<div data-role="header" data-theme="b">
 		<h1>Search filter bar</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">

docs/lists/lists-split-purchase.html

@@ -2,7 +2,7 @@
 <html> 
 	<head>
 	<meta charset="utf-8" /> 
-	<title>jQuery Mobile Docs - Lists</title> 
+	<title>jQuery Mobile Docs - Purchase dialog</title> 
 	<link rel="stylesheet"  href="../../themes/default/" />  
 	<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
 	<script type="text/javascript" src="../../js/jquery.js"></script>
@@ -21,8 +21,8 @@
 		<div data-role="content">
 			<h4>This album costs $10.99 and includes 9 tracks.</h4>
 			<p>Your download will begin immediately on your mobile device and all tracks will by added your your library next time you sync.</p>
-			<a href="index.html" data-role="button" data-theme="b">Purchase album</a>
-			<a href="index.html" data-role="button">No thanks</a>
+			<a href="index.html" data-role="button" data-rel="back" data-theme="b">Purchase album</a>
+			<a href="index.html" data-role="button" data-rel="back">No thanks</a>
 		</div><!-- /content -->
 	</div><!-- /page -->
 

docs/lists/lists-split.html

@@ -13,8 +13,9 @@
 
 <div data-role="page" id="album-list">
 
-	<div data-role="header">
+	<div data-role="header" data-theme="b">
 		<h1>List formatting</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">

docs/lists/lists-themes.html

@@ -13,8 +13,9 @@
 
 <div data-role="page">
 
-	<div data-role="header">
+	<div data-role="header" data-theme="b">
 		<h1>Theming lists</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" class="ui-body">
@@ -46,6 +47,16 @@
 			<li><a href="index.html">Sent</a> <span class="ui-li-count">328</span></li>
 		</ul>
 		
+		<p>Data-theme attributes also work at the LI-level, for styling a single item.</p>
+		
+		<ul data-role="listview" data-inset="true" data-theme="d">
+			<li data-role="list-divider">Divider</li>
+			<li><a href="index.html">Inbox</a> <span class="ui-li-count">12</span></li>
+			<li><a href="index.html">Outbox</a> <span class="ui-li-count">0</span></li>
+			<li><a href="index.html">Sent</a> <span class="ui-li-count">328</span></li>
+			<li data-theme="a"><a href="index.html">Trash</a> <span class="ui-li-count">34</span></li>
+		</ul>
+		
 		<h2>Theming dividers</h2>
 		
 		<p>The theme for <strong>list dividers</strong> can be set by adding the <code>data-dividertheme</code> to the list and specifying a swatch letter. Here is an example of the same list above with swatch &quot;d&quot; set on the dividers.</p>

docs/lists/lists-thumbnails.html

@@ -13,8 +13,9 @@
 
 <div data-role="page">
 
-	<div data-role="header">
+	<div data-role="header" data-theme="b">
 		<h1>Thumbnails</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">

docs/lists/lists-ul.html

@@ -1,4 +1,5 @@
-<!DOCTYPE html> 
+
+<a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse" class="ui-btn-right jqm-home">Home</a><!DOCTYPE html> 
 <html> 
 	<head>
 	<meta charset="utf-8" /> 
@@ -13,7 +14,7 @@
 
 <div data-role="page">
 
-	<div data-role="header">
+	<div data-role="header" data-theme="b">
 		<h1>Basic list</h1>
 	</div><!-- /header -->
 

docs/pages/api-pages.html

@@ -12,7 +12,7 @@
 
 <div data-role="page">
 
-	<div data-role="header">
+	<div data-role="header" data-theme="b">
 		<h1>Pages API</h1>
 	</div><!-- /header -->
 

docs/pages/dialog-alt.html

@@ -19,8 +19,8 @@
 		<div data-role="content" data-theme="e">
 			<h1>I'm colorful</h1>
 			<p>This is a regular page, styled as a dialog. To create a dialog, just link to a normal page and include a transition and <code>data-rel="dialog"</code> attribute.</p>
-			<a href="docs-dialogs.html" data-role="button" data-theme="a">Good for you</a>       
-			<a href="docs-dialogs.html" data-role="button" data-theme="c">Don't care, really</a>    
+			<a href="docs-dialogs.html" data-role="button" data-rel="back" data-theme="a">Good for you</a>       
+			<a href="docs-dialogs.html" data-role="button" data-rel="back" data-theme="c">Don't care, really</a>    
 		</div>
 	</div>
 

docs/pages/dialog.html

@@ -20,8 +20,8 @@
 		<div data-role="content" data-theme="c">
 			<h1>Delete page?</h1>
 			<p>This is a regular page, styled as a dialog. To create a dialog, just link to a normal page and include a transition and <code>data-rel="dialog"</code> attribute.</p>
-			<a href="docs-dialogs.html" data-role="button" data-theme="b">Sounds good</a>       
-			<a href="docs-dialogs.html" data-role="button" data-theme="c">Cancel</a>    
+			<a href="docs-dialogs.html" data-role="button" data-rel="back" data-theme="b">Sounds good</a>       
+			<a href="docs-dialogs.html" data-role="button" data-rel="back" data-theme="c">Cancel</a>    
 		</div>
 	</div>
 

docs/pages/docs-dialogs.html

@@ -12,8 +12,9 @@
 
 <div data-role="page">
 
-	<div data-role="header">
+	<div data-role="header" data-theme="b">
 		<h1>Dialogs</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" class="ui-body">
@@ -51,9 +52,6 @@
 			<h2>History &amp; Back button behavior</h2>
 			<p>Since dialogs are typically used to support actions within a page, the framework does not include dialogs in the hash state history tracking. This means that dialogs will not appear in your browsing history chronology when the Back button is clicked. For example, if you are on a page, click a link to open a dialog, close the dialog, then navigate to another page, if you were to click the browser's Back button at that point you will navigate back to the first page, not the dialog.</p>
 			
-			<h2>Dialogs in Multi-Page templates</h2>
-			<p>To open a page div as a dialog in a multipage template, you'll need to assign that page <code>data-role="dialog"</code>, along with the regular data-rel linking convention.</p>
-			
 			<h2>Styling &amp; theming</h2>
 			<p>Dialogs can be styled with different themes, just like any page. Here is a different dialog design:</p>
 				<a href="dialog-alt.html" data-role="button" data-inline="true" data-rel="dialog" data-transition="pop">An alternate color scheme</a>

docs/pages/docs-link-scenarios.html

@@ -12,8 +12,9 @@
 
 <div data-role="page">
 
-	<div data-role="header">
+	<div data-role="header" data-theme="b">
 		<h1>Linking pages</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">
@@ -27,6 +28,7 @@
 				<li><a href="#somelocalID">[href="#somelocalID"]</a></li>
 				<li>Note: an full URL to the same-domain will also work</li>
 				<li data-role="list-divider">Examples of links that trigger a refresh</li>
+				<li><a href="docs/pages/index.html" data-ajax="false">[data-ajax="false"]</a></li>
 				<li><a href="docs/pages/index.html" rel="external">[rel="external"]</a></li>
 				<li><a href="docs/pages/index.html" target="_blank">[target="_blank"]</a></li>
 				<li><a href="mailto:john@doe.com">[href="mailto:john@doe.com"]</a></li>

docs/pages/docs-links-urltest/index.html

@@ -10,7 +10,7 @@
 </head> 
 <body> 
 
-	<div data-role="page" data-url="docs-links-urltest/">
+	<div data-role="page" data-url="docs/pages/docs-links-urltest/">
 		<div data-role="header">
 			<h1>URL Test Page</h1>
 		</div>

docs/pages/docs-links.html

@@ -12,8 +12,9 @@
 
 <div data-role="page">
 
-	<div data-role="header">
+	<div data-role="header" data-theme="b">
 		<h1>Linking pages</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">

docs/pages/docs-navmodel.html

@@ -12,8 +12,9 @@
 
 <div data-role="page">
 
-	<div data-role="header">
+	<div data-role="header" data-theme="b">
 		<h1>Ajax, hashes &amp; history</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">