Committing up Todd's changes to docs.

docs/intro.html

@@ -16,7 +16,34 @@
 
 	<div data-role="content">
 		<div class="ui-body ui-body-c">
-		<a href=""></a>
+		
+			<p>All pages in jQuery Mobile are built with clean, semantic HTML to ensure compatibility with pretty much any web-enabled device. In devices that interpret CSS and JavaScript, jQuery Mobile applies progressive enhancement techniques to unobtrusively transform the page into a rich, interactive experience that leverages the power of jQuery and CSS3. The jQuery Mobile framework is designed to be easy enough to allow designers to build complex mobile-optimized web sites and apps with minimal JavaScript knowledge, yet powerful and extensible enough for experienced developers to build highly customized experiences.Key features include:</p>
+			<ul>
+				<li>Familiar jQuery syntax and patterns and a simple, markup-driven approach for minimal learning curve</li>
+				<li>Very lightweight size (9k compressed for all mobile functionality) minimal image dependencies for speed.</li>
+				<li>Progressive enhancement approach brings core content and functionality to all mobile, tablet and deskstop platforms and a rich, installed application-like experience on newer versions of all major mobile device platforms (iOS, Android, Blackberry, Palm WebOS, Nokia/Symbian, Windows Mobile, bada, MeeGo)</li>
+				<li>Accessibility features such as WAI-ARIA are also included to ensure that the pages work for screen readers (e.g. VoiceOver in iOS) and other assistive technologies.</li>
+				<li>Events are normalized in jQuery Mobile to streamline the process of supporting touch, mouse, and cursor focus-based user input methods with a simple API. </li>
+				<li>Powerful theming framework and ThemeRoller application make highly-branded experiences feast and easy to build.</li>
+			</ul>  </p> 
+			
+			<h2>Markup-driven configuration: Mobilize()</h2>
+			
+			<p>The jQuery Mobile library uses a <code>mobilize()</code> function that automatically initializes plugins for all the jQuery Mobile widgets found on a page. HTML5 <code>data-role</code> attributes in HTML markup act as the trigger for the mobilize function. For example, a <code>data-role="listview"</code> attribute on an simple unordered list tells the <code>mobilize()</code> function to apply all the CSS classes and JavaScript behaviors required to transform a list of links into a finger-friendly mobile list view widget. Developers can choose to omit the <code>mobilize()</code> function and write their own tools to trigger the jQuery Mobile plugins, but it is a convenient way to unobtrusively apply the plugins in consistent way.</p> 
+			
+			<a href="themes.html" data-role="button" data-icon="arrow-r" data-iconpos="right">jQery Mobile core & mobilize</a>
+			
+			<h2>Theming framework</h2>
+			<p>Every layout and widget is designed around a new object-oriented CSS framework to support rich theming of sites and applications built with jQuery Mobile. Theming works similarly to the jQuery UI ThemeRoller system but with a few important improvements:</p> 
+
+			<ul> 
+			<li>Richer designs are now possible because themes now include multiple color "swatches": 4 bars with matching buttons for each, 3 content areas that can be freely mixed and matched to create visual texture</li> 
+			<li>Open-ended theming allows for additional theme swatches can be added to a theme to add almost unlimited more variety to designs</li> 
+			<li>All backgrounds now use CSS3 gradients to dramatically reduce file size and number of server requests</li> 
+			<li>A simplified icon set only includes the most commonly used icons in either black or white colors to reduce image weight</li> 
+			</ul>
+			
+			<a href="themes.html" data-role="button" data-icon="arrow-r" data-iconpos="right">Theming documentation</a>
 		</div><!-- /ui-body wrapper -->	
 	</div><!-- /content -->
 	

docs/lists/docs-lists.html

@@ -16,8 +16,16 @@
 	<div data-role="content">
 		<div class="ui-body ui-body-c">
 			
-			<h2>Basic lists</h2>
-			<p>A list view is coded as a simple unordered list containing linked list items with a <code>data-role="listview"</code> attribute. jQuery Mobile will apply all the necessary styles to transform the list into a mobile-friendly list view that fills the full width of the browser window. When you tap on the list item, the framework will trigger a click on the first link inside the list item, issue an AJAX request for the URL in the link, create the new page in the DOM, then kick off a page transition.</p>
+			<h2>Basic linked lists</h2>
+			<p>A list view is coded as a simple unordered list containing linked list items with a <code>data-role="listview"</code> attribute. jQuery Mobile will apply all the necessary styles to transform the list into a mobile-friendly list view with right arrow indicator that fills the full width of the browser window. When you tap on the list item, the framework will trigger a click on the first link inside the list item, issue an AJAX request for the URL in the link, create the new page in the DOM, then kick off a page transition. Here is the HTML markup for a basic linked list.</p>
+			
+<pre><code>
+&lt;ul data-role=&quot;listview&quot; data-theme=&quot;g&quot;&gt;
+	&lt;li&gt;&lt;a href=&quot;acura.html&quot;&gt;Acura&lt;/a&gt;&lt;/li&gt;
+	&lt;li&gt;&lt;a href=&quot;audi.html&quot;&gt;Audi&lt;/a&gt;&lt;/li&gt;
+	&lt;li&gt;&lt;a href=&quot;bmw.html&quot;&gt;BMW&lt;/a&gt;&lt;/li&gt;
+&lt;/ul&gt;
+</code></pre>
 			
 			<a href="lists-ul.html" data-role="button" data-icon="arrow-r" data-iconpos="right">Basic list example</a>
 			
@@ -30,16 +38,27 @@
 			
 			<a href="lists-ol.html" data-role="button" data-icon="arrow-r" data-iconpos="right">Numbered list example</a>
 			
+			<h2>Read-only lists</h2>
+			<p>List views can also be used to display a non-interactive list of items, usually as an inset list. This list is built from an unordered or ordered list that don't have linked list items. The framework defaults to styling these list with the "c" theme swatch (flat white in the default theme) and sets the text size to a smaller size than the clickable lists to save a bit of space.</p>
+			
+			<a href="lists-readonly.html" data-role="button" data-icon="arrow-r" data-iconpos="right">Read-only list example</a>
+			
+			<h2>Split button lists</h2>
+			<p>In cases where there is more than one possible action per list item, a split button can be used to offer two independently clickable items -- the list item and a small arrow icon in the far right. To make a split list item, simply add a second link inside the <code>li</code> and the framework will add a vertical divider line, style the link as an icon-only arrow button, and sets the <code>title</code> attribute of the link to the text the link for accessibility. You can set the icon for the right icon by specifying a <code>data-icon</code> attribute with the <a href="../themes.html">icon name</a> you want.</p>
+			
+			<a href="lists-split.html" data-role="button" data-icon="arrow-r" data-iconpos="right">Split list example</a>
+			
+			
 			<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 in a header class (swatch "c" by defaut") and won't be clickable.</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-groupingtheme</code> attribute 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>
 			
 			
 			<h2>Search filter</h2>
-			<p>jQuery Mobile provides a very easy way to filter a list client-side with a simple search tol. To make a list filterable, simply add the <code>data-filter="true"</code> attribute to the list. The framework will then append a search box above the list and add the behavior to filter out list items that don't contain the current search string as the user types. The clear (x) icon shows the full list when clicked.</p>
+			<p>jQuery Mobile provides a very easy way to filter a list with a simple client-side search feature. To make a list filterable, simply add the <code>data-filter="true"</code> attribute to the list. The framework will then append a search box above the list and add the behavior to filter out list items that don't contain the current search string as the user types. </p>
 
-			<a href="lists-ul.html" data-role="button" data-icon="arrow-r" data-iconpos="right">Search filter example</a>
+			<a href="lists-search.html" data-role="button" data-icon="arrow-r" data-iconpos="right">Search filter example</a>
 			
 			
 			<h2>Text formatting & counts</h2>
@@ -56,18 +75,13 @@
 			<a href="lists-thumbnails.html" data-role="button" data-icon="arrow-r" data-iconpos="right">List with thumbnail images</a>
 		 
 			
-			<h2>Split button lists</h2>
-			<p>In cases where there is more than one possible action per list item, a split button can be used to offer two independently clickable items -- the list item and a small arrow icon in the far right. To make a split list item, simply add a second link inside the <code>li</code> and the framework will add a vertical divider line, style the link as an icon-only arrow button, and sets the <code>title</code> attribute of the link to the text the link for accessibility.</p>
-			
-			<a href="lists-split.html" data-role="button" data-icon="arrow-r" data-iconpos="right">Split list example</a>
-			
 			<h2>Inset lists</h2>
 			<p>If lists are embedded in a page with other types of content, an inset list packages the list into a block that sits inside the content area with a bit of margin and rounded corners (theme controlled). By adding the <code>data-inset="true"</code> attribute to the list (ul or ol), applies the inset appearance.</p>
 			
 			<a href="lists-inset.html" data-role="button" data-icon="arrow-r" data-iconpos="right">Inset list example</a>
 			
 			<h2>List theming</h2>
-			<p>Themes contain two list theme swatch styles. The default theme is "f" (silver in the default theme). The theme swatch can be changed to any other lit swatch by adding the <code>data-theme="e"</code> attribute to the list, where the letter is the name of any list  swatch in the theme.</p>
+			<p>Themes contain two list theme swatch styles. The default theme is "f" (silver in the default theme). The list appearance can be changed to any other color theme swatch by adding the <code>data-theme="e"</code> attribute to the list, where the letter is the name of any list swatch in the theme. The theme for list dividers can be set by adding the <code>data-groupingtheme</code> to the list and specifying a swatch letter.</p>
 			
 			<a href="lists-themes.html" data-role="button" data-icon="arrow-r" data-iconpos="right">Themed list example</a>
 			

docs/lists/index.html

@@ -26,16 +26,17 @@
 		</ul>
 		
 		<ul data-role="listview" data-inset="true">
-			<li data-role="list-divider">List types</li>	
-			<li><a href="lists-ul.html">Basic list</a></li>
+			<li data-role="list-divider">List examples</li>
+			<li><a href="lists-ul.html">Basic linked list</a></li>
 			<li><a href="lists-nested.html">Nested list</a></li>
 			<li><a href="lists-ol.html">Numbered list</a></li>
+			<li><a href="lists-readonly.html">Read-only list</a></li>
+			<li><a href="lists-split.html">Split button list</a></li>	
 			<li><a href="lists-divider.html">List dividers</a></li>
 			<li><a href="lists-count.html">Count bubble</a></li>
-			<li><a href="lists-formatting.html">Content formatting</a></li>
 			<li><a href="lists-thumbnails.html">Thumbnails</a></li>
-			<li><a href="lists-split.html">Split button list</a></li>
-			<li><a href="lists-readonly.html">Read-only list</a></li>
+			<li><a href="lists-formatting.html">Content formatting</a></li>
+			<li><a href="lists-search.html">Search filter bar</a></li>	
 		</ul>
 		
 		<ul data-role="listview" data-inset="true">

docs/lists/lists-ol.html

@@ -15,7 +15,7 @@
 	</div><!-- /header -->
 
 	<div data-role="content">
-			<ol data-role="listview" data-filter="true">
+			<ol data-role="listview">
 				<li><a href="index.html">The Godfather</a></li>
 				<li><a href="index.html">Inception</a></li>
 				<li><a href="index.html">The Good, the Bad and the Ugly </a></li>

docs/lists/lists-readonly.html

@@ -15,7 +15,7 @@
 	</div><!-- /header -->
 
 	<div data-role="content">
-			<ul data-role="listview">
+			<ul data-role="listview" data-theme="g" data-inset="true">
 				<li>Acura</li>
 				<li>Audi</li>
 				<li>BMW</li>

docs/lists/lists-search.html

@@ -0,0 +1,46 @@
+<!DOCTYPE html> 
+<html> 
+	<head> 
+	<title>jQuery Mobile Docs - Lists</title> 
+	<link rel="stylesheet" media="only all" href="css/all" /> 
+	<script type="text/javascript" src="js/all"></script>
+	<script type="text/javascript" src="docs/docs.js"></script>
+</head> 
+<body> 
+
+<div data-role="page">
+
+	<div data-role="header">
+		<h1>Search filter bar</h1>
+	</div><!-- /header -->
+
+	<div data-role="content">
+			<ul data-role="listview" data-filter="true">
+				<li><a href="index.html">Acura</a></li>
+				<li><a href="index.html">Audi</a></li>
+				<li><a href="index.html">BMW</a></li>
+				<li><a href="index.html">Cadillac</a></li>
+				<li><a href="index.html">Chrysler</a></li>
+				<li><a href="index.html">Dodge</a></li>
+				<li><a href="index.html">Ferrari</a></li>
+				<li><a href="index.html">Ford</a></li>
+				<li><a href="index.html">GMC</a></li>
+				<li><a href="index.html">Honda</a></li>
+				<li><a href="index.html">Hyundai</a></li>
+				<li><a href="index.html">Infiniti</a></li>
+				<li><a href="index.html">Jeep</a></li>
+				<li><a href="index.html">Kia</a></li>
+				<li><a href="index.html">Lexus</a></li>
+				<li><a href="index.html">Mini</a></li>
+				<li><a href="index.html">Nissan</a></li>
+				<li><a href="index.html">Porsche</a></li>
+				<li><a href="index.html">Subaru</a></li>
+				<li><a href="index.html">Toyota</a></li>
+				<li><a href="index.html">Volkswagon</a></li>
+				<li><a href="index.html">Volvo</a></li>
+			</ul>
+	</div><!-- /content -->
+</div><!-- /page -->
+
+</body>
+</html>

docs/lists/lists-themes.html

@@ -14,12 +14,13 @@
 		<h1>List themes</h1>
 	</div><!-- /header -->
 
-	<div data-role="content"data-theme="a">
-		<div class="ui-body ui-body-a">
-		<h2>Theme swatch "a" applied to body, "e" to lists</h2>
-		</div><!-- / body wrapper -->
+	<div data-role="content">
 		
-			<ul data-role="listview" data-inset="true" data-theme="e">
+		<div class="ui-body ui-body-a">
+		<h2>Theme swatch "a" applied to body, "e" to lists, "a" for dividers</h2>
+		
+		
+			<ul data-role="listview" data-inset="true" data-theme="e" data-groupingtheme="a">
 				<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">Drafts</a> <span class="ui-li-count">4</span></li>
@@ -27,15 +28,7 @@
 				<li><a href="index.html">Trash</a> <span class="ui-li-count">62</span></li>
 			</ul>
 			
-			<ol data-role="listview" data-inset="true" data-theme="e">
-				<li><a href="index.html">The Godfather</a></li>
-				<li><a href="index.html">Inception</a></li>
-				<li><a href="index.html">The Good, the Bad and the Ugly </a></li>
-				<li><a href="index.html">Pulp Fiction</a></li>
-				<li><a href="index.html">Schindler's List</a></li>
-			</ol>
-			
-			<ul data-role="listview" data-inset="true" data-theme="e">
+			<ul data-role="listview" data-inset="true" data-theme="e" data-groupingtheme="a">
 				<li>
 					<img src="images/album-bb.jpg" />
 					<h3><a href="index.html">Broken Bells</a></h3>
@@ -66,7 +59,7 @@
 				</li>
 			</ul>
 			
-				<ul data-role="listview" data-inset="true" data-theme="e" data-dividertheme="a">
+				<ul data-role="listview" data-inset="true" data-theme="e" data-groupingtheme="a">
 					<li data-role="list-divider">A</li>
 					<li><a href="index.html">Adam Kinkaid</a></li>
 					<li><a href="index.html">Alex Wickerham</a></li>
@@ -77,7 +70,122 @@
 					<li><a href="index.html">Caleb Booth</a></li>
 					<li><a href="index.html">Christopher Adams</a></li>
 				</ul>
+			</div><!-- / body wrapper -->
+			
+			
+			<div class="ui-body ui-body-b">
+			<h2>Theme swatch "b" applied to body, "f" to lists, "b" for dividers</h2>
+
+
+				<ul data-role="listview" data-inset="true" data-theme="f" data-groupingtheme="b">
+					<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">Drafts</a> <span class="ui-li-count">4</span></li>
+					<li><a href="index.html">Sent</a> <span class="ui-li-count">328</span></li>
+					<li><a href="index.html">Trash</a> <span class="ui-li-count">62</span></li>
+				</ul>
+
+				<ul data-role="listview" data-inset="true" data-theme="f" data-groupingtheme="b">
+					<li>
+						<img src="images/album-bb.jpg" />
+						<h3><a href="index.html">Broken Bells</a></h3>
+						<p>Broken Bells</p>
+						<p class="ui-li-aside">$<strong>11.99</strong></p>
+						<a href="index.html">Purchase album</a>
+					</li>
+					<li>
+						<img src="images/album-hc.jpg" />
+						<h3><a href="index.html">Warning</a></h3>
+						<p>Hot Chip</p>
+						<p class="ui-li-aside">$<strong>12.99</strong></p>
+						<a href="index.html">Purchase album</a>
+					</li>
+					<li>
+						<img src="images/album-p.jpg" />
+						<h3><a href="index.html">Wolfgang Amadeus Phoenix</a></h3>
+						<p>Phoenix</p>
+						<p class="ui-li-aside">$<strong>11.99</strong></p>
+						<a href="index.html">Purchase album</a>
+					</li>
+					<li>
+						<img src="images/album-ok.jpg" />
+						<h3><a href="index.html">Of The Blue Colour Of The Sky</a></h3>
+						<p>Ok Go</p>
+						<p class="ui-li-aside">$<strong>10.99</strong></p>
+						<a href="index.html">Purchase album</a>
+					</li>
+				</ul>
+
+					<ul data-role="listview" data-inset="true" data-theme="f"  data-groupingtheme="b">
+						<li data-role="list-divider">A</li>
+						<li><a href="index.html">Adam Kinkaid</a></li>
+						<li><a href="index.html">Alex Wickerham</a></li>
+						<li><a href="index.html">Avery Johnson</a></li>
+						<li data-role="list-divider">B</li>
+						<li><a href="index.html">Bob Cabot</a></li>
+						<li data-role="list-divider">C</li>
+						<li><a href="index.html">Caleb Booth</a></li>
+						<li><a href="index.html">Christopher Adams</a></li>
+					</ul>
+				</div><!-- / body wrapper -->
 				
+				
+				<div class="ui-body ui-body-c">
+				<h2>Theme swatch "c" applied to body, "g" to lists, "b" for dividers</h2>
+
+
+					<ul data-role="listview" data-inset="true" data-theme="g" data-groupingtheme="b">
+						<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">Drafts</a> <span class="ui-li-count">4</span></li>
+						<li><a href="index.html">Sent</a> <span class="ui-li-count">328</span></li>
+						<li><a href="index.html">Trash</a> <span class="ui-li-count">62</span></li>
+					</ul>
+
+					<ul data-role="listview" data-inset="true" data-theme="g"  data-groupingtheme="b">
+						<li>
+							<img src="images/album-bb.jpg" />
+							<h3><a href="index.html">Broken Bells</a></h3>
+							<p>Broken Bells</p>
+							<p class="ui-li-aside">$<strong>11.99</strong></p>
+							<a href="index.html">Purchase album</a>
+						</li>
+						<li>
+							<img src="images/album-hc.jpg" />
+							<h3><a href="index.html">Warning</a></h3>
+							<p>Hot Chip</p>
+							<p class="ui-li-aside">$<strong>12.99</strong></p>
+							<a href="index.html">Purchase album</a>
+						</li>
+						<li>
+							<img src="images/album-p.jpg" />
+							<h3><a href="index.html">Wolfgang Amadeus Phoenix</a></h3>
+							<p>Phoenix</p>
+							<p class="ui-li-aside">$<strong>11.99</strong></p>
+							<a href="index.html">Purchase album</a>
+						</li>
+						<li>
+							<img src="images/album-ok.jpg" />
+							<h3><a href="index.html">Of The Blue Colour Of The Sky</a></h3>
+							<p>Ok Go</p>
+							<p class="ui-li-aside">$<strong>10.99</strong></p>
+							<a href="index.html">Purchase album</a>
+						</li>
+					</ul>
+
+						<ul data-role="listview" data-inset="true" data-theme="g" data-groupingtheme="b">
+							<li data-role="list-divider">A</li>
+							<li><a href="index.html">Adam Kinkaid</a></li>
+							<li><a href="index.html">Alex Wickerham</a></li>
+							<li><a href="index.html">Avery Johnson</a></li>
+							<li data-role="list-divider">B</li>
+							<li><a href="index.html">Bob Cabot</a></li>
+							<li data-role="list-divider">C</li>
+							<li><a href="index.html">Caleb Booth</a></li>
+							<li><a href="index.html">Christopher Adams</a></li>
+						</ul>
+					</div><!-- / body wrapper -->
+			
 	</div><!-- /content -->
 </div><!-- /page -->
 

docs/lists/lists-ul.html

@@ -15,7 +15,7 @@
 	</div><!-- /header -->
 
 	<div data-role="content">
-			<ul data-role="listview" data-filter="true">
+			<ul data-role="listview" data-theme="g">
 				<li><a href="index.html">Acura</a></li>
 				<li><a href="index.html">Audi</a></li>
 				<li><a href="index.html">BMW</a></li>

docs/page.html

@@ -10,12 +10,72 @@
 <div data-role="page">
 
 	<div data-role="header">
-		<h1>Getting started</h1>
-		<a href="index.html" class="ui-back" data-icon="arrow-l">Home</a>
+		<h1>Page structure</h1>
 	</div><!-- /header -->
 
 	<div data-role="content">
 		<div class="ui-body ui-body-c">
+			
+			<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> 
+
+			<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>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> 
+   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;</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> 
+  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> 
+</pre> 
+</div> 
+
+			<p>jQuery Mobile automates the process of animating between pages, loading external pages via Ajax and tracking page history to support the Back button and deep linking. If linking between 2 "pages" inside the same HTML document, the framework will simply animate between the two page divs. If a link points to an external HTML page, jQuery Mobile will unobtrusively formulate an Ajax request based on the link's <code>ref</code> (Hijax), display the loading spinner, append the new page's content, apply the <code>mobilize()</code> function, then animate the page into view. In either situation, jQuery Mobile updates the page's URL hash to track the current page view and enable Back button support, deep-linking and bookmarking. Learn more about the technical details of the <a class="internal present" href="/jquery/jquery-mobile/wiki/Page-Navigation-Model">Page-Navigation-Model</a>.</p>
 		
 		<pre><code>
 &lt;!DOCTYPE html&gt; 

docs/themes.html

@@ -62,6 +62,17 @@
 			<li><a href="index.html">List item A</a></li>
 		</ul>
 		
+		<h3>Active state</h3>
+		<p>The jQuery Mobile framework uses a single theme swatch called "active" (bright blue in the default theme) to consistently indicate the selected state, regardless of the theme of the widget. We apply this in navigation and form controls to indicate what is currently selected. Because this theme swatch is designed for clear, consistent user feedback, it is not currently a theme swatch that can be overridden via the markup. It is set once in the theme and applied by the framework whenever a selected or active state is needed. The styling for this state is in the theme stylesheet under the <code>ui-btn-active</code> style rules.</p>
+		
+		<fieldset data-role="controlgroup"  data-type="horizontal" data-role="fieldcontain">
+	     	<legend>Active is used for the on state of these toggles:</legend>
+	         	<input type="radio" name="radio-choice-a" id="radio-choice-a" value="on" checked="checked" />
+	         	<label for="radio-choice-a">On</label>
+	         	<input type="radio" name="radio-choice-a" id="radio-choice-b" value="off"  />
+	         	<label for="radio-choice-b">Off</label>
+	    </fieldset>
+		
 		<h3>Buttons</h3>
 		<p>A set of 4 button colors are also included in the default theme. Each button has styles for normal, hover/focus and pressed states. Each button is intentionally styled to match the color of a bar so they feel tightly integrated. </p>
 		
@@ -138,7 +149,8 @@
 
 		
 		<h3>Extensible themes</h3>
-		<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. You can then you can reference the new theme by adding the <code>data-theme="e"</code> attribute to your toolbars.</p>
+		<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="e"</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>
 	
 	</div><!-- end body wrapper -->
 	</div><!-- end content -->

docs/toolbars/docs-bars.html

@@ -16,8 +16,8 @@
 	<div data-role="content">
 		<div class="ui-body ui-body-c">
 			
-			<h2>Header/footer structure</h2>
-			<p>The <code>header</code> div is an optional bar at the top of the page that usually contains the page title text and buttons positioned in the the left or right of the bar for navigation or actions. The title text is normally an H1 heading element but it's possible to use any heading level (H1-H6) to allow for semantic flexibility. For example, a page containing multiple mobile 'pages' may use a H1 element on the home 'page' and a H2 element on the secondary pages. All heading levels are styled identically by default to maintain visual consistency.</p> 
+			<h2>Header &amp; footer bar structure</h2>
+			<p>The <code>header</code> is an bar at the top of the page that usually contains the page title text and optional buttons positioned in the the left or right of the title for navigation or actions. The title text is normally an H1 heading element but it's possible to use any heading level (H1-H6) to allow for semantic flexibility. For example, a page containing multiple mobile 'pages' may use a H1 element on the home 'page' and a H2 element on the secondary pages. All heading levels are styled identically by default to maintain visual consistency.</p> 
 
 <div class="highlight"> 
 <pre>
@@ -25,9 +25,23 @@
 	<span class="nt">&lt;h1&gt;</span>Page Title<span class="nt">&lt;/h1&gt;</span> 
 <span class="nt">&lt;/div&gt;</span> 
 </pre> 
-			</div> 
+</div> 
 
-			<p>A header bar will be styled by default with the theme's "a" color swatch (black in the default theme) because the header is typically primary in the visual hierarchy of a page. To set the header bar to a different color in your theme, add the <code>data-theme</code> attribute and specify the letter of the theme swatch (a, b, c, etc.). For example, this will set the bar to swatch "b" (blue in the default theme):</p> 
+<a href="docs-headers.html" data-role="button" data-icon="arrow-r" data-iconpos="right">Header configuration options</a>
+
+	<p>The <code>footer</code> bar has the same structure as the header except for the <code>data-role</code> attribute and your choice of heading. Footers tend to be more freeform than headers in terms of content and functionality but they are designed to hold text and buttons, just like a header.</p> 
+
+<div class="highlight"> 
+<pre>
+<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;h4&gt;</span>Footer content<span class="nt">&lt;/h4&gt;</span> 
+<span class="nt">&lt;/div&gt;</span> 
+</pre> 
+</div>
+
+<a href="docs-footers.html" data-role="button" data-icon="arrow-r" data-iconpos="right">Footer configuration options</a>
+
+			<p>Both the header and footer bars will be styled by default with the theme's "a" color swatch (black in the default theme) because these bars are typically primary in the visual hierarchy of a page. To set the header or footer bars to a different color in your theme, add the <code>data-theme</code> attribute and specify the letter of the theme swatch (a, b, c, etc.). For example, this will set the bar to swatch "b" (blue in the default theme):</p> 
 
 <div class="highlight"> 
 <pre>
@@ -37,41 +51,12 @@
 </pre> 
 </div> 
 
-			<p>In the standard header configuration, there are slots for up to two buttons that sit on either side of the text heading. Each button is an <code>anchor</code> element that points to any <code>URI</code>. The button's width fits the length of the text and icons it contains. The header plugin looks for immediate children of the header container and will automatically set the first button found in the left slot and the second in the right slot. In this example, the Home button will appear in the left slot and Edit will appear in the right slot. If you want to add custom HTML markup (or embed a widget like Nav Bar) into the header bar, simply wrap the markup in a container <code>div</code> and the plugin won't apply the automatic button slot logic.</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;a</span> <span class="na">href=</span><span class="s">"index.php"</span><span class="nt">&gt;</span>Home<span class="nt">&lt;/a&gt;</span> 
-		<span class="nt">&lt;h1&gt;</span>Page Title<span class="nt">&lt;/h1&gt;</span> 
-		<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"edit.php"</span><span class="nt">&gt;</span>Edit<span class="nt">&lt;/a&gt;</span> 
-	<span class="nt">&lt;/div&gt;</span> 
-<span class="nt">&lt;/div&gt;</span> 
-</pre> 
-</div> 
-
-			<p>The button position can also be controlled by adding classes to the button anchors. This is especially useful if there isn't a left button and you only want a button in the right slot. To specify the button position, add the class of <code>ui-btn-left</code> or <code>ui-btn-right</code> to the anchor.</p> 
-
-<div class="highlight"> 
-<pre>
-<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"tools.php"</span> <span class="na">class=</span><span class="s">"ui-btn-right"</span><span class="nt">&gt;</span>Tools<span class="nt">&lt;/a&gt;</span> 
-
-</pre> 
-</div> 
-
-			<p>Any link added inside the header block will be automatically styled as a button that matches the color of the bar's theme swatch. To make a button stand out as a primary call to action, the <code>data-theme</code> attribute can be used to specify a contrasting button color from a different theme swatch. For example, if we set the header to theme "c" (light gray), both buttons would be styled as the "c" button by default. If we wanted the Save button to visually pop, we can override the color by setting the <code>data-theme</code> attribute to "b" (blue in our default theme) on the Save button's anchor.</p> 
-
-<div class="highlight"> 
-<pre>
-<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"add-user.php"</span> <span class="na">data-theme=</span><span class="s">"b"</span><span class="nt">&gt;</span>Save<span class="nt">&lt;/a&gt;</span> 
-</pre> 
-</div> 
-		
-			<a href="bars-themes.html" data-role="button" data-icon="arrow-r" data-iconpos="right">Themed header examples</a>
+<a href="../themes.html" data-role="button" data-icon="arrow-r" data-iconpos="right">Theming documentation</a>
 			
-				<h2>Bar positioning and behavior</h2>
-				<p>Header and footers can be positioned on the page in a few different ways. By default, the toolbars use the "fixed" positioning mode. In this mode, the headers and footer are sitting in the natural document flow, which ensures that they are visible on all devices, regardless of JavaScript support.</p>
-				<p>To achieve the convenience of static toolbars without the drawbacks of implementing faux-scrolling in JavaScript, the framework adds logic to detect when a bar has been scrolled out of view and animates them back into place by dynamically re-positioning the bar to the top or bottom of the viewport. At any time,tapping the screen will toggle the visibility of the toolbars: tapping when they aren't visible brings the toolbars into view, tapping again hides them until you tap again. This gives users the option to hide the toolbars until needed to maximize screen real estate.</p>
+			<h2>Bar positioning and behavior</h2>
+			
+			<p>Header and footers can be positioned on the page in a few different ways. By default, the toolbars use the "fixed" positioning mode. In this mode, the headers and footer are sitting in the natural document flow, which ensures that they are visible on all devices, regardless of JavaScript support.</p>
+			<p>To achieve the convenience of static toolbars without the drawbacks of implementing faux-scrolling in JavaScript, the framework adds logic to detect when a bar has been scrolled out of view and animates them back into place by dynamically re-positioning the bar to the top or bottom of the viewport. At any time,tapping the screen will toggle the visibility of the toolbars: tapping when they aren't visible brings the toolbars into view, tapping again hides them until you tap again. This gives users the option to hide the toolbars until needed to maximize screen real estate.</p>
 				
 					<a href="bars-fixed.html" data-role="button" data-icon="arrow-r" data-iconpos="right">Fixed bar positioning example</a>
 					
@@ -83,15 +68,11 @@
 				
 				<a href="bars-fullscreen.html" data-role="button" data-icon="arrow-r" data-iconpos="right">Fullscreeen bar positioning example</a>
 				
-					<h2>Persistent footers</h2>
-					<p>If you want the footer to appear persistent as you navigate between pages (especially useful if using a nav bar, see below), you can achieve this effect by adding a <code>data-id</code> attribute to each page that should have the persistent footer. Giving a set of pages the same <code>data-id</code> attribute value (like "foo"), tells the framework to use the persistent footer transition when animating.</p>
-					
-					<a href="bars-persist.html" data-role="button" data-icon="arrow-r" data-iconpos="right">Persistent footer example</a>
-					
-					<h2>Nav bar widget</h2>
-					<p>The Nav Bar widget can be added to the page to provide a navigation bar that accommodates an unlimited number of options in a compact element that placed inside a  header, content, or footer region of the page. It displays up to 4 items in a horizontal bar with out without icons. If more than 4 items are in the navigation list, the 4th slot is used for a "more" link that opens a separate overlay with the full list of items. </p>
-					<p>The markup for a nav bar is identical to a basic linked list view: an unordered list with a link in each item and an optional icon. This markup is transformed into a nav bar by adding a <code>data-role="navbar" attribute to the list.</code></p>
-					<a href="navbar.html" data-role="button" data-icon="arrow-r" data-iconpos="right">Nav bar examples</a>
+					<h2>Navbars</h2>
+
+					<p>A navbar plugin makes it easy to add a horizontal list of links to the header, footer or even main content body of the page. </p>
+
+						<a href="docs-navbar.html" data-role="button" data-icon="arrow-r" data-iconpos="right">Navbar configuration</a>
 		
 		</div><!-- /ui-body wrapper -->	
 	</div><!-- /content -->

docs/toolbars/docs-footers.html

@@ -0,0 +1,80 @@
+<!DOCTYPE html> 
+<html> 
+	<head> 
+	<title>jQuery Mobile Docs - Toolbars</title> 
+	<link rel="stylesheet" media="only all" href="css/all" /> 
+	<script type="text/javascript" src="js/all"></script>
+</head> 
+<body> 
+
+<div data-role="page">
+
+	<div data-role="header">
+		<h1>Footer configuration</h1>
+	</div><!-- /header -->
+
+	<div data-role="content">
+		<div class="ui-body ui-body-c">
+			
+			<h2>Footer bar structure</h2>
+
+	<p>The <code>footer</code> bar has the same structure as the header except for the <code>data-role</code> attribute and your choice of heading. Footers tend to be more freeform than headers in terms of content and functionality but they are designed to hold text and buttons, just like a header.</p> 
+
+<div class="highlight"> 
+<pre>
+<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;h4&gt;</span>Footer content<span class="nt">&lt;/h4&gt;</span> 
+<span class="nt">&lt;/div&gt;</span> 
+</pre> 
+</div>
+
+					
+					<p>The page footer is very similar to the header in terms of options and configuration. The primary differences are that the footer is designed to be less structured than the header to allow for more flexibility, so the framework doesn't automatically place buttons to the left or right based on source order as it does in the header. A footer is identified with the <code>data-role="footer</code> attribute and can contain any markup.</p> 
+
+<div class="highlight"> 
+<pre><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> 
+</pre> 
+</div> 
+					
+					
+					<h2>Theming options</h2>
+					<p>Both the header and footer bars will be styled by default with the theme's "a" color swatch (black in the default theme) because these bars are typically primary in the visual hierarchy of a page. To set the header or footer bars to a different color in your theme, add the <code>data-theme</code> attribute and specify the letter of the theme swatch (a, b, c, etc.). For example, this will set the bar to swatch "b" (blue in the default theme):</p> 
+
+<div class="highlight"> 
+<pre>
+<span class="nt">&lt;div</span> <span class="na">data-role=</span><span class="s">"header"</span> <span class="na">data-theme=</span><span class="s">"b"</span><span class="nt">&gt;</span> 
+	<span class="nt">&lt;h4&gt;</span>Footer content goes here<span class="nt">&lt;/h4&gt;</span> 
+<span class="nt">&lt;/div&gt;</span> 
+</pre> 
+</div>
+		
+		
+					<p>One common scenario is to have a few buttons in the footer. Just like the header, adding a set of anchor links inside the footer bar will trigger the <code>mobilize()</code> function to transform the links into the styled mobile buttons. In the footer, each button will be as wide as the text and icon contents and the buttons will sit side-by-side because each has the CSS <code>display:inline-block</code> property.</p>
+
+<div class="highlight"> 
+<pre><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;a</span> <span class="na">href=</span><span class="s">"index.html"</span> <span class="na">data-icon=</span><span class="s">"plus"</span><span class="nt">&gt;</span>New<span class="nt">&lt;/a&gt;</span> 
+	<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"index.html"</span> <span class="na">data-icon=</span><span class="s">"delete"</span><span class="nt">&gt;</span>Delete<span class="nt">&lt;/a&gt;</span> 
+	<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"index.html"</span> <span class="na">data-icon=</span><span class="s">"search"</span><span class="nt">&gt;</span>Search<span class="nt">&lt;/a&gt;</span> 
+<span class="nt">&lt;/div&gt;</span> 
+</pre> 
+</div> 
+					
+					<h2>Persistent footers</h2>
+					<p>In situations where the footer is being used as a global navigation element, you may want the footer to appear like it is fixed in place between page transitions. This can be accomplished by using the persistent footer feature included in jQuery Mobile. To make a footer appear to stay in place between transitions, simply add the <code>data-id</code> attribute to the footer of both pages and use the same <code>id</code> value for each. For example, by adding <code>data-id="myfooter"</code> to the current page and the target page, the framework will keep the footer anchors in the same spot during the page animation. This effect will only work correctly if the header and footer toolbars are set to sticky so they are in view during the transition.</p>
+					
+					
+					<p>If you want the footer to appear persistent as you navigate between pages (especially useful if using a nav bar, see below), you can achieve this effect by adding a <code>data-id</code> attribute to each page that should have the persistent footer. Giving a set of pages the same <code>data-id</code> attribute value (like "foo"), tells the framework to use the persistent footer transition when animating.</p>
+					
+					<a href="bars-persist.html" data-role="button" data-icon="arrow-r" data-iconpos="right">Persistent footer example</a>
+					
+
+		
+		</div><!-- /ui-body wrapper -->	
+	</div><!-- /content -->
+</div><!-- /page -->
+
+</body>
+</html>

docs/toolbars/docs-headers.html

@@ -0,0 +1,88 @@
+<!DOCTYPE html> 
+<html> 
+	<head> 
+	<title>jQuery Mobile Docs - Toolbars</title> 
+	<link rel="stylesheet" media="only all" href="css/all" /> 
+	<script type="text/javascript" src="js/all"></script>
+</head> 
+<body> 
+
+<div data-role="page">
+
+	<div data-role="header">
+		<h1>Header configuration</h1>
+	</div><!-- /header -->
+
+	<div data-role="content">
+		<div class="ui-body ui-body-c">
+			
+			<h2>Header bar structure</h2>
+			<p>The <code>header</code> is an bar at the top of the page that usually contains the page title text and optional buttons positioned in the the left or right of the title for navigation or actions. The title text is normally an H1 heading element but it's possible to use any heading level (H1-H6) to allow for semantic flexibility. For example, a page containing multiple mobile 'pages' may use a H1 element on the home 'page' and a H2 element on the secondary pages. All heading levels are styled identically by default to maintain visual consistency.</p> 
+
+<div class="highlight"> 
+<pre>
+<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;h1&gt;</span>Page Title<span class="nt">&lt;/h1&gt;</span> 
+<span class="nt">&lt;/div&gt;</span> 
+</pre> 
+</div> 
+
+	<h2>Header buttons</h2>
+	
+			<p>In the standard header configuration, there are slots for up to two buttons on either side of the text heading. Each button is an <code>anchor</code> element that points to any <code>URI</code>. The button's width fits the length of the text and icons it contains. The header plugin looks for immediate children of the header container and will automatically set the first link found in the left button slot and the second link in the right button slot.</p>
+					
+			<p>In this example, the Home button will appear in the left slot and Edit will appear in the right slot. If you want to add custom HTML markup (or embed a widget like Nav Bar) into the header bar, simply wrap the markup in a container <code>div</code> and the plugin won't apply the automatic button slot logic.</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;a</span> <span class="na">href=</span><span class="s">"index.php"</span><span class="nt">&gt;</span>Home<span class="nt">&lt;/a&gt;</span> 
+		<span class="nt">&lt;h1&gt;</span>Page Title<span class="nt">&lt;/h1&gt;</span> 
+		<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"edit.php"</span><span class="nt">&gt;</span>Edit<span class="nt">&lt;/a&gt;</span> 
+	<span class="nt">&lt;/div&gt;</span> 
+<span class="nt">&lt;/div&gt;</span> 
+</pre> 
+</div> 
+
+			<p>The button position can also be controlled by adding classes to the button anchors instead of relying on source order. This is especially useful if there isn't a left button and you only want a button in the right slot. To specify the button position, add the class of <code>ui-btn-left</code> or <code>ui-btn-right</code> to the anchor.</p> 
+
+<div class="highlight"> 
+<pre>
+<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"tools.php"</span> <span class="na">class=</span><span class="s">"ui-btn-right"</span><span class="nt">&gt;</span>Tools<span class="nt">&lt;/a&gt;</span> 
+
+</pre> 
+</div> 
+
+				<p>If there isn't a user-defined button in the left slot, the framework will auto-generate a "back" button in that slot to automate the process of including this common navigation element on every page. To prevent the back button from being added to a header in these situations, add this attribute: <code>data-nobackbtn="true"</code>.</p>
+
+	<h2>Bar & button theme styling</h2>
+	
+	<p>The header will be styled by default with the theme's "a" color swatch (black in the default theme) because these bars are typically primary in the visual hierarchy of a page. To set the header to a different color in your theme, add the <code>data-theme</code> attribute and specify the letter of the theme swatch (a, b, c, etc.). For example, this will set the bar to swatch "b" (blue in the default theme):</p> 
+
+<div class="highlight"> 
+<pre>
+<span class="nt">&lt;div</span> <span class="na">data-role=</span><span class="s">"header"</span> <span class="na">data-theme=</span><span class="s">"b"</span><span class="nt">&gt;</span> 
+<span class="nt">&lt;h1&gt;</span>Page Title<span class="nt">&lt;/h1&gt;</span> 
+<span class="nt">&lt;/div&gt;</span> 
+</pre> 
+</div>
+
+	
+			<p>Any link added inside the header block will be automatically styled as a button that matches the color of the bar's theme swatch. To make a button stand out as a primary call to action, the <code>data-theme</code> attribute can be used to specify a contrasting button color from a different theme swatch. For example, if we set the header to theme "c" (light gray), both buttons would be styled as the "c" button by default. If we wanted the Save button to visually pop, we can override the color by setting the <code>data-theme</code> attribute to "b" (blue in our default theme) on the Save button's anchor.</p> 
+
+<div class="highlight"> 
+<pre>
+<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"add-user.php"</span> <span class="na">data-theme=</span><span class="s">"b"</span><span class="nt">&gt;</span>Save<span class="nt">&lt;/a&gt;</span> 
+</pre> 
+</div> 
+		
+			<a href="bars-themes.html" data-role="button" data-icon="arrow-r" data-iconpos="right">Themed header examples</a>
+			
+		
+		
+		</div><!-- /ui-body wrapper -->	
+	</div><!-- /content -->
+</div><!-- /page -->
+
+</body>
+</html>

docs/toolbars/docs-navbars.html

@@ -0,0 +1,28 @@
+<!DOCTYPE html> 
+<html> 
+	<head> 
+	<title>jQuery Mobile Docs - Toolbars</title> 
+	<link rel="stylesheet" media="only all" href="css/all" /> 
+	<script type="text/javascript" src="js/all"></script>
+</head> 
+<body> 
+
+<div data-role="page">
+
+	<div data-role="header">
+		<h1>Navbar basics</h1>
+	</div><!-- /header -->
+
+	<div data-role="content">
+		<div class="ui-body ui-body-c">
+		
+					<p>The Nav Bar widget can be added to the page to provide a navigation bar that accommodates an unlimited number of options in a compact element that placed inside a  header, content, or footer region of the page. It displays up to 4 items in a horizontal bar with out without icons. If more than 4 items are in the navigation list, the 4th slot is used for a "more" link that opens a separate overlay with the full list of items. </p>
+					<p>The markup for a nav bar is identical to a basic linked list view: an unordered list with a link in each item and an optional icon. This markup is transformed into a nav bar by adding a <code>data-role="navbar" attribute to the list.</code></p>
+					<a href="navbar.html" data-role="button" data-icon="arrow-r" data-iconpos="right">Nav bar examples</a>
+		
+		</div><!-- /ui-body wrapper -->	
+	</div><!-- /content -->
+</div><!-- /page -->
+
+</body>
+</html>

docs/toolbars/index.html

@@ -21,12 +21,15 @@
 		<ul data-role="listview" data-inset="true">
 			<li data-role="list-divider">Documentation</li>
 			<li><a href="docs-bars.html">Toolbar basics</a></li>
+			<li><a href="docs-headers.html">Header configuration</a></li>
+			<li><a href="docs-footers.html">Footer configuration</a></li>
+			<li><a href="docs-navbars.html">Navbar configuration</a></li>
 			<li><a href="api-bars.html">API documentation</a></li>
 			
 		</ul>
 		
 		<ul data-role="listview" data-inset="true">
-			<li data-role="list-divider">Toolbar types</li>	
+			<li data-role="list-divider">Toolbar examples</li>	
 			<li><a href="bars-fixed.html">Fixed toolbars</a></li>
 			<li><a href="bars-inline.html">Inline toolbars</a></li>
 			<li><a href="bars-fullscreen.html">Fullscreen toolbars</a></li>

docs/toolbars/navbar.html

@@ -11,7 +11,6 @@
 	<div data-role="header">
 		<h1>Navbar Example</h1>
 		
-		
 		<div data-role="navbar">
 			<ul>
 				<li><a href="bars-fixed.html">Fixed</a></li>
@@ -21,10 +20,10 @@
 				<li><a href="bars-persist.html">Persistent</a></li>
 				<li><a href="bars-themes.html">Themes</a></li>
 			</ul>
-		</div>
-	</div>
+		</div><!-- /navbar -->
+	</div><!-- /header -->
 	
-	<div data-role="content" class=" ui-body">
+	<div data-role="content" class="ui-body">
 						<h1>Demo description</h1>
 						
 						<p>This page includes a examples of the navbar plugin, which can be called on a div containing a UL.</p>
@@ -105,11 +104,8 @@
 						<h1>HTML Ipsum Presents</h1>
 							       
 						<p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>
-						
 
-	
-			
-	</div>
+	</div><!-- /content-->
 
 	<div data-role="footer">
 		<div data-role="navbar">
@@ -121,11 +117,12 @@
 				<li><a href="bars-persist.html">Persistent</a></li>
 				<li><a href="bars-themes.html">Themes</a></li>
 			</ul>
-		</div>
-		</div>
-	</div>
+		</div><!-- /navbar -->
+	</div><!-- /footer -->
+		
 
-</div>	
+
+</div><!-- /page -->