From b28acb814bbf18b51b155c927e3f24bfea452ef7 Mon Sep 17 00:00:00 2001 From: PattyToland Date: Fri, 15 Oct 2010 20:18:12 -0400 Subject: [PATCH 1/8] content edits --- docs/toolbars/docs-headers.html | 15 ++++++++++----- 1 file changed, 10 insertions(+), 5 deletions(-) diff --git a/docs/toolbars/docs-headers.html b/docs/toolbars/docs-headers.html index 4882d3c6..7b93bb50 100755 --- a/docs/toolbars/docs-headers.html +++ b/docs/toolbars/docs-headers.html @@ -17,7 +17,9 @@

Header structure

-

The header is an toolbar 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.

+

The header is an toolbar at the top of the page that usually contains the page title text, and optional buttons positioned to the the left and/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.

@@ -27,22 +29,25 @@
-

The header toolbar will be be themed with the "a" swatch by default (black in the default theme) but you can easily set the theme swatch color.

+

Default header features

+

The header toolbar is themed with the "a" swatch by default (black in the default theme) but you can easily set the theme swatch color.

+ +

Page title

-

See that "back" button? The framework automatically generates a "back" button for you to automate the process of including this common navigation element on every page. To prevent the back button from being added to a header either add your own button to the left slot (see below) or, add this attribute: data-nobackbtn="true" to the header container. +

See that "back" button? The framework automatically generates a "back" button on every page, to simplify the process of including this common navigation element. To prevent the back button from being added to a header, either add your own button to the left slot (see below) or, add this attribute: data-nobackbtn="true" to the header container.

Adding buttons

-

In the standard header configuration, there are slots buttons on either side of the text heading. Each button is typically an anchor element but any valid button markup will work. To save space, buttons in toolbars are set to inline styling so the button is only as wide as the text and icons they contain.

+

In the standard header configuration, there are slots for buttons on either side of the text heading. Each button is typically an anchor element, but any valid button markup will work. To save space, buttons in toolbars are set to inline styling so the button is only as wide as the text and icons they contain.

Default button positioning

-

The header plugin looks for immediate children of the header container and will automatically set the first link found into the left button slot and the second link into the right button slot. In this example, the 'Cancel' button will appear in the left slot and 'Save' will appear in the right slot because of their sequence in the source order.

+

The header plugin looks for immediate children of the header container, and automatically sets the first link in the left button slot and the second link in the right. In this example, the 'Cancel' button will appear in the left slot and 'Save' will appear in the right slot based on their sequence in the source order. 

			

From eb76e53f60d0689109e72f43b2ef4819440c582d Mon Sep 17 00:00:00 2001
From: PattyToland 
Date: Fri, 15 Oct 2010 20:22:41 -0400
Subject: [PATCH 2/8] edits

---
 docs/toolbars/docs-headers.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/toolbars/docs-headers.html b/docs/toolbars/docs-headers.html
index 7b93bb50..72e2d368 100755
--- a/docs/toolbars/docs-headers.html
+++ b/docs/toolbars/docs-headers.html
@@ -64,7 +64,7 @@
 				
Edit Contact

 				Save
-

Buttons automatically adapt to the color of the bar they sit in so a link in a header bar with the "a" swatch color will also be styled as "a" colored buttons. To make the right button visually stand out, use add the data-theme attribute and set the color swatch for the button, "b" in this case.

+

Buttons automatically adapt to the swatch color of the bar they sit in, so a link in a header bar with the "a" color will also be styled as "a" colored buttons. It's simple to make a button visually stand out — here, we add the data-theme attribute and set the color swatch for the button to "b" to make the "Save" button pop.

Cancel From 1a7e6876916067528b3f07e52d61b927d97ea599 Mon Sep 17 00:00:00 2001 From: PattyToland Date: Fri, 15 Oct 2010 20:24:33 -0400 Subject: [PATCH 3/8] edits --- docs/toolbars/docs-headers.html | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/docs/toolbars/docs-headers.html b/docs/toolbars/docs-headers.html index 72e2d368..5f0db398 100755 --- a/docs/toolbars/docs-headers.html +++ b/docs/toolbars/docs-headers.html @@ -66,6 +66,14 @@

Buttons automatically adapt to the swatch color of the bar they sit in, so a link in a header bar with the "a" color will also be styled as "a" colored buttons. It's simple to make a button visually stand out — here, we add the data-theme attribute and set the color swatch for the button to "b" to make the "Save" button pop.

+ 

+				Cancel
+				
Edit Contact

+				Save
+
+ + +
Cancel

Edit Contact

From e836e3f9a03820e3472d91c3cd60b17bc5068bd5 Mon Sep 17 00:00:00 2001 From: PattyToland Date: Fri, 15 Oct 2010 20:30:22 -0400 Subject: [PATCH 4/8] edits --- docs/toolbars/docs-headers.html | 16 +++++++++++++--- 1 file changed, 13 insertions(+), 3 deletions(-) diff --git a/docs/toolbars/docs-headers.html b/docs/toolbars/docs-headers.html index 5f0db398..a1121c2f 100755 --- a/docs/toolbars/docs-headers.html +++ b/docs/toolbars/docs-headers.html @@ -54,7 +54,7 @@ <div data-role="header" data-position="inline"> <a href="index.html" data-icon="delete">Cancel</a> <h1>Edit Contact</h1> - <a href="index.html" data-icon="check"</a> + <a href="index.html" data-icon="check">Save</a> </div> @@ -66,8 +66,18 @@

Buttons automatically adapt to the swatch color of the bar they sit in, so a link in a header bar with the "a" color will also be styled as "a" colored buttons. It's simple to make a button visually stand out — here, we add the data-theme attribute and set the color swatch for the button to "b" to make the "Save" button pop.

- 

-				Cancel
+			
			
+<div data-role="header" data-position="inline">
+	<a href="index.html" data-icon="delete">Cancel</a>
+	<h1>Edit Contact</h1>
+	<a href="index.html" data-icon="check" data-theme="b">Save</a>
+</div>
+</div>
+

+
+

+			<div data-role="header" data-position="inline">
+				<a href="index.html" data-icon="delete">Cancel
 				
Edit Contact

 				Save
From faa79e62e0faa39bfa770b2134acc0e93385443b Mon Sep 17 00:00:00 2001 From: PattyToland Date: Fri, 15 Oct 2010 20:31:29 -0400 Subject: [PATCH 5/8] edits --- docs/toolbars/docs-headers.html | 8 -------- 1 file changed, 8 deletions(-) diff --git a/docs/toolbars/docs-headers.html b/docs/toolbars/docs-headers.html index a1121c2f..b772b3ba 100755 --- a/docs/toolbars/docs-headers.html +++ b/docs/toolbars/docs-headers.html @@ -74,14 +74,6 @@ </div> </div> - -

-			<div data-role="header" data-position="inline">
-				<a href="index.html" data-icon="delete">Cancel
-				
Edit Contact

-				Save
-
-
From 749c97a3c4a21385d3f795da631005399f7912c1 Mon Sep 17 00:00:00 2001 From: PattyToland Date: Fri, 15 Oct 2010 20:32:02 -0400 Subject: [PATCH 6/8] edits --- docs/toolbars/docs-headers.html | 1 - 1 file changed, 1 deletion(-) diff --git a/docs/toolbars/docs-headers.html b/docs/toolbars/docs-headers.html index b772b3ba..68392f3a 100755 --- a/docs/toolbars/docs-headers.html +++ b/docs/toolbars/docs-headers.html @@ -72,7 +72,6 @@ <h1>Edit Contact</h1> <a href="index.html" data-icon="check" data-theme="b">Save</a> </div> -</div> From 206f56e526d599bccca413864ed0924e0033b299 Mon Sep 17 00:00:00 2001 From: PattyToland Date: Fri, 15 Oct 2010 20:32:53 -0400 Subject: [PATCH 7/8] edits --- docs/toolbars/docs-headers.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/toolbars/docs-headers.html b/docs/toolbars/docs-headers.html index 68392f3a..3643f6a4 100755 --- a/docs/toolbars/docs-headers.html +++ b/docs/toolbars/docs-headers.html @@ -64,7 +64,7 @@

Edit Contact

Save
-

Buttons automatically adapt to the swatch color of the bar they sit in, so a link in a header bar with the "a" color will also be styled as "a" colored buttons. It's simple to make a button visually stand out — here, we add the data-theme attribute and set the color swatch for the button to "b" to make the "Save" button pop.

+

Buttons automatically adopt the swatch color of the bar they sit in, so a link in a header bar with the "a" color will also be styled as "a" colored buttons. It's simple to make a button visually stand out — here, we add the data-theme attribute and set the color swatch for the button to "b" to make the "Save" button pop.

			
 <div data-role="header" data-position="inline">

From e4ad1e1eb3c3f706f12b9d75de06bf555f1597e7 Mon Sep 17 00:00:00 2001
From: PattyToland 
Date: Fri, 15 Oct 2010 20:34:23 -0400
Subject: [PATCH 8/8] edits

---
 docs/toolbars/docs-headers.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/toolbars/docs-headers.html b/docs/toolbars/docs-headers.html
index 3643f6a4..fd0f07cb 100755
--- a/docs/toolbars/docs-headers.html
+++ b/docs/toolbars/docs-headers.html
@@ -83,7 +83,7 @@
 	
 			
Controlling button position with classes

 	
-			
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 ui-btn-left or ui-btn-right to the anchor.
 
+			
The button position can also be controlled by adding classes to the button anchors, rather than relying on source order. This is especially useful if you only want a button in the right slot. To specify the button position, add the class of ui-btn-left or ui-btn-right to the anchor.
 
 			
 			
In this example, we're adding only a single button to the right slot so the data-nobackbtn="true" needs to be added to the header container to suppress the automatic Back button behavior and the button needs the ui-btn-right class on the link.