From 9e91fa67525f7da4b9561609bee3ca839518d4c6 Mon Sep 17 00:00:00 2001 From: scottjehl Date: Sun, 20 Feb 2011 14:29:22 -0500 Subject: [PATCH] updated docs with jq namespace, found some more stragglers --- docs/about/features.html | 2 +- docs/api/themes.html | 4 +- docs/buttons/buttons-grouped.html | 2 +- docs/buttons/buttons-icons.html | 16 +-- docs/buttons/buttons-inline.html | 4 +- docs/buttons/buttons-themes.html | 4 +- docs/buttons/buttons-types.html | 4 +- docs/content/content-collapsible.html | 2 +- docs/content/content-themes.html | 18 +-- docs/forms/docs-forms.html | 8 +- docs/forms/forms-checkboxes.html | 6 +- docs/forms/forms-radiobuttons.html | 4 +- docs/forms/forms-search.html | 2 +- docs/forms/forms-selects.html | 2 +- docs/forms/forms-slider.html | 2 +- docs/forms/forms-switch.html | 2 +- docs/forms/forms-text.html | 6 +- docs/forms/forms-themes.html | 4 +- docs/lists/docs-lists.html | 8 +- docs/lists/lists-themes.html | 12 +- docs/pages/dialog-alt.html | 2 +- docs/pages/dialog.html | 2 +- docs/pages/docs-dialogs.html | 14 +- docs/pages/docs-links.html | 10 +- docs/pages/docs-navmodel.html | 2 +- docs/pages/docs-pages.html | 16 +-- docs/pages/docs-transitions.html | 4 +- docs/pages/pages-themes.html | 2 +- docs/pages/transition-success.html | 2 +- docs/toolbars/bars-fullscreen.html | 2 +- docs/toolbars/bars-themes.html | 8 +- docs/toolbars/docs-headers.html | 12 +- docs/toolbars/docs-navbar.html | 8 +- experiments/scrollview/sv-test-02.html | 2 +- .../jquery.mobile.themeswitcher.js | 8 +- external/qunit.css | 2 +- js/jquery.mobile.core.js | 2 +- js/jquery.mobile.dialog.js | 4 +- js/jquery.mobile.forms.select.js | 2 +- js/jquery.mobile.listview.js | 18 +-- js/jquery.mobile.navigation.js | 6 +- js/jquery.mobile.page.js | 2 +- tests/functional/eventlogger.html | 8 +- tests/speed/basic-page.html | 6 +- tests/speed/lists-ul.html | 8 +- tests/unit/core/core.js | 122 ++++++++++++++++++ tests/unit/dialog/index.html | 8 +- tests/unit/listview/index.html | 76 +++++------ .../navigation/data-url-tests/data-url.html | 2 +- .../navigation/data-url-tests/nested.html | 2 +- .../data-url-tests/non-data-url.html | 2 +- .../data-url-tests/reverse-attr.html | 2 +- .../data-url-tests/single-quotes.html | 2 +- tests/unit/navigation/index.html | 42 +++--- tests/unit/page/index.html | 6 +- tests/unit/page/page_core.js | 2 +- tests/unit/select/index.html | 10 +- tests/unit/slider/index.html | 26 ++-- themes/default/jquery.mobile.core.css | 2 +- 59 files changed, 343 insertions(+), 225 deletions(-) diff --git a/docs/about/features.html b/docs/about/features.html index 7158a1e1..fe038128 100755 --- a/docs/about/features.html +++ b/docs/about/features.html @@ -26,7 +26,7 @@
  • Lightweight size (12k compressed for all mobile functionality) and minimal image dependencies for speed.
  • HTML5 Markup-driven configuration of pages and behavior for fast development and minimal required scripting.
  • Progressive enhancement approach brings core content and functionality to all mobile, tablet and desktop platforms and a rich, installed application-like experience on newer mobile platforms.
    • -
  • Automatic initialization by using HTML5 data-role attributes in the HTML markup to act as the trigger to automatically initialize all jQuery Mobile widgets found on a page.
    • +
  • Automatic initialization by using HTML5 data-jq-role attributes in the HTML markup to act as the trigger to automatically initialize all jQuery Mobile widgets found on a page.
  • 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.
  • New events streamline the process of supporting touch, mouse, and cursor focus-based user input methods with a simple API.
  • New plugins enhance native controls with touch-optimized, themable controls.
    • diff --git a/docs/api/themes.html b/docs/api/themes.html index f1f58e3a..837df80c 100755 --- a/docs/api/themes.html +++ b/docs/api/themes.html @@ -54,7 +54,7 @@
    Bar E
    -

    By default, the framework assigns the "a" swatch to all headers and footers, because these are typically given high visual priority in an application. To set the color of a bar to a different swatch color, simply add the data-theme attribute to your header or footer and specify an alternate swatch letter ('b' or 'd', for example) and the specified theme swatch color will be applied. Learn more about toolbar theming.

    +

    By default, the framework assigns the "a" swatch to all headers and footers, because these are typically given high visual priority in an application. To set the color of a bar to a different swatch color, simply add the data-jq-theme attribute to your header or footer and specify an alternate swatch letter ('b' or 'd', for example) and the specified theme swatch color will be applied. Learn more about toolbar theming.

    @@ -150,7 +150,7 @@

    This default behavior makes it easy to ripple a theme change through a page by setting a theme swatch on a parent because you know the buttons will maintain the same relative visual weight across themes. Since form elements use the button styles, they will also adapt to their parent container too.

    -

    If you want to add visual emphasis to a button and help it stand out visually from its parent toolbar, an alternate swatch color can be set by adding a data-theme="a" to the anchor. Once an alternate swatch color is set on a button in the markup, the framework won't override that color if the parent theme is changed, because you made a conscious decision to set it.

    +

    If you want to add visual emphasis to a button and help it stand out visually from its parent toolbar, an alternate swatch color can be set by adding a data-jq-theme="a" to the anchor. Once an alternate swatch color is set on a button in the markup, the framework won't override that color if the parent theme is changed, because you made a conscious decision to set it.

    diff --git a/docs/buttons/buttons-grouped.html b/docs/buttons/buttons-grouped.html index 1ebc843e..02413f3a 100755 --- a/docs/buttons/buttons-grouped.html +++ b/docs/buttons/buttons-grouped.html @@ -19,7 +19,7 @@
    -

    Occasionally, you may want to visually group a set of buttons together to form a single block that looks contained like a navigation component. To get this effect, wrap a set of buttons in a container with the data-role="controlgroup" attribute — the framework will create a vertical button group, remove all margins and drop shadows between the buttons, and only round the first and last buttons of the set to create the effect that they are grouped together.

    +

    Occasionally, you may want to visually group a set of buttons together to form a single block that looks contained like a navigation component. To get this effect, wrap a set of buttons in a container with the data-jq-role="controlgroup" attribute — the framework will create a vertical button group, remove all margins and drop shadows between the buttons, and only round the first and last buttons of the set to create the effect that they are grouped together. 

    
 <div data-jq-role="controlgroup">
 <a href="index.html" data-jq-role="button">Yes</a>
diff --git a/docs/buttons/buttons-icons.html b/docs/buttons/buttons-icons.html
index 031e302c..49fcbe2e 100755
--- a/docs/buttons/buttons-icons.html
+++ b/docs/buttons/buttons-icons.html
@@ -24,10 +24,10 @@
 		
    The jQuery Mobile framework includes a selected set of icons most often needed for mobile apps. To minimize download size, jQuery Mobile includes a single white icon sprite, and automatically adds a semi-transparent black circle behind the icon to ensure that it has good contrast on any background color.
     
 		
 			
-			
    An icon can be added to a button by adding a data-icon attribute on the anchor specifying the icon to display.  For example, the following markup:
     
+			
    An icon can be added to a button by adding a  data-jq-icon attribute on the anchor specifying the icon to display.  For example, the following markup:
     
 			
 			
-			<a href="index.html" data-jq-role="button" data-icon="delete">Delete</a>
+			<a href="index.html" data-jq-role="button"  data-jq-icon="delete">Delete</a>
 			
 			
 			
    Creates this button with an icon:
    
@@ -35,7 +35,7 @@
 			
 			
    Icon set
    
 			
-			
    The following data-icon attributes can be referenced to create the icons shown below:
    
+			
    The following  data-jq-icon attributes can be referenced to create the icons shown below:
    
 			
 			
    Left arrow - data-jq-icon="arrow-l"
    
 			My button
@@ -79,7 +79,7 @@
 		
    By default, all icons in buttons are placed to the left of the button text. 
    
 		Delete
 		
-		
    This default may be overridden using the data-iconpos attribute to set the icon to the right, above (top) or below (bottom) the text. For example, the markup:
     
+		
    This default may be overridden using the  data-jq-iconpos attribute to set the icon to the right, above (top) or below (bottom) the text. For example, the markup:
     
 
 
 <a href="index.html" data-jq-role="button" data-jq-icon="delete" data-jq-iconpos="right">Delete</a>
@@ -88,13 +88,13 @@
 		
    Creates this button with right-aligned icon:
    
 		Delete
 
-		
    Icons can also be positioned above the text by specifying data-iconpos="top"
    
+		
    Icons can also be positioned above the text by specifying  data-jq-iconpos="top"
    
 		Delete
 		
-		
    Or icons can also be positioned below the text by specifying data-iconpos="bottom"
    
+		
    Or icons can also be positioned below the text by specifying  data-jq-iconpos="bottom"
    
 		Delete
 		
-		
    You can also create an icon-only button, by setting the data-iconpos attribute to notext. The button plugin will hide the text on-screen, but add it as a title attribute on the link to provide context for screen readers and devices that support tooltips. For example, replacing data-iconpos="right" on the previous example with data-iconpos="notext":
    
+		
    You can also create an icon-only button, by setting the  data-jq-iconpos attribute to notext. The button plugin will hide the text on-screen, but add it as a title attribute on the link to provide context for screen readers and devices that support tooltips. For example, replacing  data-jq-iconpos="right" on the previous example with  data-jq-iconpos="notext":
    
 
 
 <a href="index.html" data-jq-role="button" data-jq-icon="delete" data-jq-iconpos="notext">Delete</a>
@@ -104,7 +104,7 @@
 			Delete
 
 		
    Custom Icons
    
-		
    To use custom icons, specify a data-icon value that has a unique name like myapp-email and the button plugin will generate a class by prefixing ui-icon- to the data-icon value and apply it to the button. You can then write a CSS rule that targets the ui-icon-myapp-email class to specify the icon background source. To maintain visual consistency, create a white icon 18x18 pixels saved as a PNG-8 with alpha transparency.
    
+		
    To use custom icons, specify a  data-jq-icon value that has a unique name like myapp-email and the button plugin will generate a class by prefixing ui-icon- to the  data-jq-icon value and apply it to the button. You can then write a CSS rule that targets the ui-icon-myapp-email class to specify the icon background source. To maintain visual consistency, create a white icon 18x18 pixels saved as a PNG-8 with alpha transparency.
    
 			
 		 	
 		
    Icons and themes
    
diff --git a/docs/buttons/buttons-inline.html b/docs/buttons/buttons-inline.html
index e8d6c973..185bb0a2 100755
--- a/docs/buttons/buttons-inline.html
+++ b/docs/buttons/buttons-inline.html
@@ -25,12 +25,12 @@
 		Button
 		
 			
-		
    However, if you want a more compact button that is only as wide as the text and icons inside, add the data-inline="true" attribute to the button:
    
+		
    However, if you want a more compact button that is only as wide as the text and icons inside, add the  data-jq-inline="true" attribute to the button:
    
 		
 		
 		Button
 		
-		
    If you have multiple buttons that should sit side-by-side on the same line, wrap the buttons in a container that has a data-inline="true" attribute. This will style the buttons to be the width of their content and float the buttons so they sit on the same line. 
    
+		
    If you have multiple buttons that should sit side-by-side on the same line, wrap the buttons in a container that has a  data-jq-inline="true" attribute. This will style the buttons to be the width of their content and float the buttons so they sit on the same line. 
    
 			
 
    
 <div data-jq-inline="true">
diff --git a/docs/buttons/buttons-themes.html b/docs/buttons/buttons-themes.html
index c73f866a..9c690237 100755
--- a/docs/buttons/buttons-themes.html
+++ b/docs/buttons/buttons-themes.html
@@ -31,13 +31,13 @@
 			
    E swatch
    Button
    
 			
 			
    Assigning theme swatches
    
-			
    Button can be manually assigned any of the button color swatches from the theme to add visual contrast with the container they sit inside by adding the data-theme attribute on the button markup and specifying a swatch letter. 
    
+			
    Button can be manually assigned any of the button color swatches from the theme to add visual contrast with the container they sit inside by adding the  data-jq-theme attribute on the button markup and specifying a swatch letter. 
    
 
 
    			
 <a href="index.html" data-jq-role="button" data-jq-theme="a">Theme a</a>			
 
    
 				
-		
    Here are 4 buttons with icons that have a different swatch letter assigned via the data-theme attribute.
    
+		
    Here are 4 buttons with icons that have a different swatch letter assigned via the  data-jq-theme attribute.
    
 	
 		Theme a
 		Theme b
diff --git a/docs/buttons/buttons-types.html b/docs/buttons/buttons-types.html
index 838c000b..2479d4f1 100755
--- a/docs/buttons/buttons-types.html
+++ b/docs/buttons/buttons-types.html
@@ -24,7 +24,7 @@
 	
 		
    Styling links as buttons
    
 
-		
    In the main content block of a page, you can style any anchor link as a button by adding the data-role="button" to the link. The framework will add all necessary classes to style the link as a button. For example, this markup: 
    
+		
    In the main content block of a page, you can style any anchor link as a button by adding the  data-jq-role="button" to the link. The framework will add all necessary classes to style the link as a button. For example, this markup: 
    
 
 
 <a href="index.html" data-jq-role="button">Link button</a>
@@ -34,7 +34,7 @@
 		Link button
 		
 		
    Form buttons
    
-		
    For ease of styling, the framework automatically converts any button element or input with a type of submit, reset, button, or image into a custom styled link-based button — there is no need to add the data-role="button" attribute. 
    
+		
    For ease of styling, the framework automatically converts any button element or input with a type of submit, reset, button, or image into a custom styled link-based button — there is no need to add the  data-jq-role="button" attribute. 
    
 		
    The original form-based button is hidden, but remains in the markup.  When a click event fires on a link button, it triggers a click on the original form button.
    
 
 
diff --git a/docs/content/content-collapsible.html b/docs/content/content-collapsible.html
index 92cd1048..996be329 100755
--- a/docs/content/content-collapsible.html
+++ b/docs/content/content-collapsible.html
@@ -22,7 +22,7 @@
 	
    
 		
 		
    Collapsible content markup
    
-		
    To create a collapsible blocks of content, create a container and add the data-role="collapsible" attribute.
    
+		
    To create a collapsible blocks of content, create a container and add the  data-jq-role="collapsible" attribute.
    
 		
 		
    Directly inside this container, add any header element (H1-H6). The framework will style the header to look like a clickable button and add a "+" icon to the left to indicate it's expandable.
    
 	
diff --git a/docs/content/content-themes.html b/docs/content/content-themes.html
index dde019bc..05c673e7 100755
--- a/docs/content/content-themes.html
+++ b/docs/content/content-themes.html
@@ -22,16 +22,16 @@
 			
 			
 		
    Theming the content area
    
-		
    The main content area of a page (container with the data-role="content" attribute) should be themed by adding the data-theme attribute to the data-role="page" container to ensure that the background colors are applied to the full page, regardless of the content length. (If you add to the data-theme to the content container, the background color will stop after the content so there may be a gap in color between the content and fixed footer.)
    
+		
    The main content area of a page (container with the  data-jq-role="content" attribute) should be themed by adding the  data-jq-theme attribute to the  data-jq-role="page" container to ensure that the background colors are applied to the full page, regardless of the content length. (If you add to the  data-jq-theme to the content container, the background color will stop after the content so there may be a gap in color between the content and fixed footer.)
    
 		
 
-<div data-jq-role="page" data-theme="a">
+<div data-jq-role="page"  data-jq-theme="a">
 	
 		
    Theming collapsible blocks
    
-		
    To set the color of the collapsible header, add the data-theme attribute to the collapsible container. The icon and body are not currently themable through data attributes, but can be styled directly with custom css.
    
+		
    To set the color of the collapsible header, add the  data-jq-theme attribute to the collapsible container. The icon and body are not currently themable through data attributes, but can be styled directly with custom css.
    
 
 		
-<div data-jq-role="collapsible" data-jq-collapsed="true" data-theme="a">
+<div data-jq-role="collapsible" data-jq-collapsed="true"  data-jq-theme="a">
 
 		
    Themed examples
    
 		
@@ -41,7 +41,7 @@
 			
    This is a paragraph that contains strong, emphasized and linked text. Here is more text so you can see how HTML markup works in content. Here is more text so you can see how HTML markup works in content.
    
 			
    
 				
    I'm an themed collapsible
    
-				
    I have data-theme attribute set manually on my container to set the color to match the content block I'm in. 
    
+				
    I have  data-jq-theme attribute set manually on my container to set the color to match the content block I'm in. 
    
 			
    
 		
    
 		
@@ -51,7 +51,7 @@
 			
    This is a paragraph that contains strong, emphasized and linked text. Here is more text so you can see how HTML markup works in content. Here is more text so you can see how HTML markup works in content.
    
 			
    
 				
    I'm an themed collapsible
    
-				
    I have data-theme attribute set manually on my container to set the color to match the content block I'm in. 
    
+				
    I have  data-jq-theme attribute set manually on my container to set the color to match the content block I'm in.
    @@ -61,7 +61,7 @@

    This is a paragraph that contains strong, emphasized and linked text. Here is more text so you can see how HTML markup works in content. Here is more text so you can see how HTML markup works in content.

    I'm an themed collapsible

    -

    I have data-theme attribute set manually on my container to set the color to match the content block I'm in.

    +

    I have data-jq-theme attribute set manually on my container to set the color to match the content block I'm in.

    @@ -71,7 +71,7 @@

    This is a paragraph that contains strong, emphasized and linked text. Here is more text so you can see how HTML markup works in content. Here is more text so you can see how HTML markup works in content.

    I'm an themed collapsible

    -

    I have data-theme attribute set manually on my container to set the color to match the content block I'm in.

    +

    I have data-jq-theme attribute set manually on my container to set the color to match the content block I'm in.

    @@ -81,7 +81,7 @@

    This is a paragraph that contains strong, emphasized and linked text. Here is more text so you can see how HTML markup works in content. Here is more text so you can see how HTML markup works in content.

    I'm an themed collapsible

    -

    I have data-theme attribute set manually on my container to set the color to match the content block I'm in.

    +

    I have data-jq-theme attribute set manually on my container to set the color to match the content block I'm in.

    diff --git a/docs/forms/docs-forms.html b/docs/forms/docs-forms.html index 4a4b1bcc..d2795b8f 100755 --- a/docs/forms/docs-forms.html +++ b/docs/forms/docs-forms.html @@ -40,10 +40,10 @@

    By default, jQuery Mobile will automatically enhance certain native form controls into rich touch-friendly components. This is handled internally by finding form elements by tag name and running a plugin method on them, so for instance, a select element will be found and initialized with the "selectmenu" plugin, while an input element with a type="checkbox" will be enhanced with the "checkboxradio" plugin. Once initialized, you can address these enhanced components programmatically through their jQuery UI widget API methods (see documentation on available methods here: Form Plugin Methods).

    Preventing auto-initialization of form elements

    -

    If you'd prefer that a particular form control be left untouched by jQuery Mobile, simply give that element the attribute data-role="none". For example:

    +

    If you'd prefer that a particular form control be left untouched by jQuery Mobile, simply give that element the attribute data-jq-role="none". For example:

    
 <label for="foo">
-<select name="foo" id="foo" data-role="none">
+<select name="foo" id="foo"  data-jq-role="none">
 	<option value="a" >A</option>
 	<option value="b" >B</option>
 	<option value="c" >C</option>
@@ -51,7 +51,7 @@
    -

    Or, if you'd like to prevent auto-initialization without adding attributes to your markup, you can customize the selector that is used for preventing auto-initialization by setting the page plugin's keepNative option (which defaults to "[data-role="none"]. Be sure to configure this option inside an event handler bound to the mobileinit event, so that it applies to the first page as well as subsequent pages that are loaded.

    +

    Or, if you'd like to prevent auto-initialization without adding attributes to your markup, you can customize the selector that is used for preventing auto-initialization by setting the page plugin's keepNative option (which defaults to "[ data-jq-role="none"]. Be sure to configure this option inside an event handler bound to the mobileinit event, so that it applies to the first page as well as subsequent pages that are loaded.

    
 $(document).bind('mobileinit',function(){
 	$.mobile.page.prototype.options.keepNative = "select, input.foo, textarea.bar";
@@ -68,7 +68,7 @@ $(document).bind('mobileinit',function(){
 
 			
    Field containers
    
 
-			
    To improve the styling to labels and form elements on wider screens, we recommend wrapping a div or fieldset with the data-role="fieldcontain" attribute around each label/form element. The framework will add a thin vertical bottom border on this container to act as a field separator and visually align the label and form elements for quick scanning.
    
+			
    To improve the styling to labels and form elements on wider screens, we recommend wrapping a div or fieldset with the  data-jq-role="fieldcontain" attribute around each label/form element. The framework will add a thin vertical bottom border on this container to act as a field separator and visually align the label and form elements for quick scanning.
    
 
 
    
 <div data-jq-role="fieldcontain">
diff --git a/docs/forms/forms-checkboxes.html b/docs/forms/forms-checkboxes.html
index 6e429ec7..52c10bd6 100755
--- a/docs/forms/forms-checkboxes.html
+++ b/docs/forms/forms-checkboxes.html
@@ -29,9 +29,9 @@
 
 		
    To create a single checkbox, add an input with a type="checkbox" attribute and a corresponding label. Set the for attribute of the label to match the ID of the input so they are semantically associated.
    
 		
-		
    Because checkboxes use the label element for the text displayed next to the checkbox form element, we recommend wrapping the checkbox in a fieldset element that has a legend which acts as the title for the question. Add the  data-role="controlgroup" attribute to the fieldset so it can be styled in a parallel way as text inputs, selects or other form elements.
    
+		
    Because checkboxes use the label element for the text displayed next to the checkbox form element, we recommend wrapping the checkbox in a fieldset element that has a legend which acts as the title for the question. Add the   data-jq-role="controlgroup" attribute to the fieldset so it can be styled in a parallel way as text inputs, selects or other form elements.
    
 		
-		
    Lastly, need to wrap the fieldset in a div with data-role="controlgroup" attribute to the fieldset so it can be styled in a parallel way as text inputs, selects or other form elements.
    
+		
    Lastly, need to wrap the fieldset in a div with  data-jq-role="controlgroup" attribute to the fieldset so it can be styled in a parallel way as text inputs, selects or other form elements.
    
 
 
 
    	
@@ -54,7 +54,7 @@
 		
 		
    Vertically grouped checkboxes
    
 		
-		
    Typically, there are multiple checkboxes listed under a question title. To visually integrate multiple checkboxes into a grouped button set, the framework will automatically remove all margins between buttons and round only the top and bottom corners of the set if there is a data-role="controlgroup" attribute on the fie.
    
+		
    Typically, there are multiple checkboxes listed under a question title. To visually integrate multiple checkboxes into a grouped button set, the framework will automatically remove all margins between buttons and round only the top and bottom corners of the set if there is a  data-jq-role="controlgroup" attribute on the fie.
    
 
 			
    
 			 	
    
diff --git a/docs/forms/forms-radiobuttons.html b/docs/forms/forms-radiobuttons.html
index 0d769aca..360f71c8 100755
--- a/docs/forms/forms-radiobuttons.html
+++ b/docs/forms/forms-radiobuttons.html
@@ -33,7 +33,7 @@
 		
 		
    Because radio buttons use the label element for the text displayed next to the checkbox form element, we recommend wrapping the radio buttons in a fieldset element that has a legend which acts as the title for the question.
    
 		
-		
    Lastly, need to wrap the fieldset in a div with data-role="controlgroup" attribute to the fieldset so it can be styled in a parallel way as text inputs, selects or other form elements.
    
+		
    Lastly, need to wrap the fieldset in a div with  data-jq-role="controlgroup" attribute to the fieldset so it can be styled in a parallel way as text inputs, selects or other form elements.
    
 				
 
    	
 <div data-jq-role="fieldcontain">
@@ -54,7 +54,7 @@
 </div>
 
    
 
-		
    To visually integrate multiple radio buttons into a vertically grouped button set, the framework will automatically remove all margins between buttons and round only the top and bottom corners of the set if there is a data-role="controlgroup" attribute on the fie.
    
+		
    To visually integrate multiple radio buttons into a vertically grouped button set, the framework will automatically remove all margins between buttons and round only the top and bottom corners of the set if there is a  data-jq-role="controlgroup" attribute on the fie.
    
 		
 	
    
 	    
    
diff --git a/docs/forms/forms-search.html b/docs/forms/forms-search.html
index e2187c3f..fdfdd09e 100755
--- a/docs/forms/forms-search.html
+++ b/docs/forms/forms-search.html
@@ -24,7 +24,7 @@
 
 			
    Search inputs
    
 			
    Search inputs are a new HTML type that is styled with pill-shaped corners and adds a "x" icon to clear the field once you start typing. Start with an input with a type="search" attribute in your markup. 
    
-			
    Set the for attribute of the label to match the ID of the input so they are semantically associated and wrap them in a div with the data-role="fieldcontain" attribute to group them.
    
+			
    Set the for attribute of the label to match the ID of the input so they are semantically associated and wrap them in a div with the  data-jq-role="fieldcontain" attribute to group them.
    
 
 
    	
 <div data-jq-role="fieldcontain">
diff --git a/docs/forms/forms-selects.html b/docs/forms/forms-selects.html
index 63d9b1ab..c769638b 100644
--- a/docs/forms/forms-selects.html
+++ b/docs/forms/forms-selects.html
@@ -27,7 +27,7 @@
 			
    The select menus are driven off native select elements, but the native selects are hidden from view and replaced with more style-friendly markup. The replacement buttons and menus are ARIA-enabled and are keyboard accessible on the desktop as well. 
    
 			
    When clicked, if the menu has room it will appear as an overlay listbox, but if there are too many options to fit in the window without scrolling, the page content is wrapped in a div and hidden, and the menu is appended as a whole new page. This lets us take advantage of native scrolling while the menu is in use. 
    
 
-			
    To add a select widget to your page, start with a standard select element populated with a set of option elements. Set the for attribute of the label to match the ID of the select so they are semantically associated. Wrap them in a div with the data-role="fieldcontain" attribute to help visually group it in a longer form. 
    
+			
    To add a select widget to your page, start with a standard select element populated with a set of option elements. Set the for attribute of the label to match the ID of the select so they are semantically associated. Wrap them in a div with the  data-jq-role="fieldcontain" attribute to help visually group it in a longer form. 
    
 
 			
    The framework will find all select elements and automatically enhance them into the custom select menus.
    
 
diff --git a/docs/forms/forms-slider.html b/docs/forms/forms-slider.html
index 0b6003be..b4ccbcd4 100755
--- a/docs/forms/forms-slider.html
+++ b/docs/forms/forms-slider.html
@@ -24,7 +24,7 @@
 
 			
    Sliders
    
 			
    To add a slider widget to your page, start with an input with a new HTML5 type="range" attribute. Specify the value (current value), min and max attribute values to configure the slider. The framework will parse these attributes to configure the slider. 
    
-			
    As you drag the slider, the input will update and vice-versa so they are always in sync so you can submit the slider value with form in a simple way. Set the for attribute of the label to match the ID of the input so they are semantically associated and wrap them in a div with the data-role="fieldcontain" attribute to group them.
    
+			
    As you drag the slider, the input will update and vice-versa so they are always in sync so you can submit the slider value with form in a simple way. Set the for attribute of the label to match the ID of the input so they are semantically associated and wrap them in a div with the  data-jq-role="fieldcontain" attribute to group them.
    
 
 
    
 <div data-jq-role="fieldcontain">
diff --git a/docs/forms/forms-switch.html b/docs/forms/forms-switch.html
index 0eac2ab4..91d1f742 100755
--- a/docs/forms/forms-switch.html
+++ b/docs/forms/forms-switch.html
@@ -23,7 +23,7 @@
 
 				
    Flip toggle switches
    
 				
    A binary "flip" switch is a common UI element on mobile devices that is used for any binary on/off or true/false type of data input. You can either drag the flip handle like a slider or tap on each half of the switch.
    
-				
    To create a flip toggle,  To add a slider widget to your page, start with an select with two options. The first option will be styled as the "on" state switch and the second will be styled as the "off" state so write your options in the correct order. Set the for attribute of the label to match the ID of the input so they are semantically associated and wrap them in a div with the data-role="fieldcontain" attribute to group them.
    
+				
    To create a flip toggle,  To add a slider widget to your page, start with an select with two options. The first option will be styled as the "on" state switch and the second will be styled as the "off" state so write your options in the correct order. Set the for attribute of the label to match the ID of the input so they are semantically associated and wrap them in a div with the  data-jq-role="fieldcontain" attribute to group them.
    
 
 
    	
 <div data-jq-role="fieldcontain">
diff --git a/docs/forms/forms-text.html b/docs/forms/forms-text.html
index 5db64a99..50c95b67 100755
--- a/docs/forms/forms-text.html
+++ b/docs/forms/forms-text.html
@@ -26,7 +26,7 @@
 			
    Text inputs and textareas are coded with standard HTML elements, then enhanced by jQuery Mobile to make them more attractive and useable on a mobile.
    
 			
 						
    Text inputs
    
-			
    To collect standard alphanmeric text, use an input with a type="text" attribute. It's important to  set the for attribute of the label to match the ID of the input so they are semantically associated and wrap them in a div with the data-role="fieldcontain" attribute to group them.
    
+			
    To collect standard alphanmeric text, use an input with a type="text" attribute. It's important to  set the for attribute of the label to match the ID of the input so they are semantically associated and wrap them in a div with the  data-jq-role="fieldcontain" attribute to group them.
    
 
 
    	
 <div data-jq-role="fieldcontain">
@@ -44,7 +44,7 @@
 			
 			
 			
    Password inputs
    
-			
    For password fields, use an input with a type="password" attribute. Set the for attribute of the label to match the ID of the input so they are semantically associated and wrap them in a div with the data-role="fieldcontain" attribute to group them.
    
+			
    For password fields, use an input with a type="password" attribute. Set the for attribute of the label to match the ID of the input so they are semantically associated and wrap them in a div with the  data-jq-role="fieldcontain" attribute to group them.
    
 
 
    	
 <div data-jq-role="fieldcontain">
@@ -86,7 +86,7 @@
 
 			
    Textareas
    
 			
    For multi-line text inputs, use a textarea element. The framework will auto-grow the height of the textarea to avoid the need for an internal scrollbar which is very hard to use on a mobile device. 
    
-			
    Set the for attribute of the label to match the ID of the input so they are semantically associated and wrap them in a div with the data-role="fieldcontain" attribute to group them.
    
+			
    Set the for attribute of the label to match the ID of the input so they are semantically associated and wrap them in a div with the  data-jq-role="fieldcontain" attribute to group them.
    
 
 
    	
 <div data-jq-role="fieldcontain">
diff --git a/docs/forms/forms-themes.html b/docs/forms/forms-themes.html
index 2096585d..539f85ac 100755
--- a/docs/forms/forms-themes.html
+++ b/docs/forms/forms-themes.html
@@ -21,9 +21,9 @@
 	
    
     
     
    Form themes
    
-    
    jQuery Mobile has a rich theming system 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 data-theme 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.
     
+    
    jQuery Mobile has a rich theming system 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  data-jq-theme 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.
     
     
-    
    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 data-theme swatch color assigned to each parent container. This illustrates the way form elements automatically adopt the theme swatch of their parent.
    
+    
    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  data-jq-theme swatch color assigned to each parent container. This illustrates the way form elements automatically adopt the theme swatch of their parent.
    
 			
 		
 	
    Body swatch A
    
diff --git a/docs/lists/docs-lists.html b/docs/lists/docs-lists.html
index 75e1f4a9..216a9f20 100755
--- a/docs/lists/docs-lists.html
+++ b/docs/lists/docs-lists.html
@@ -20,7 +20,7 @@
 	
    
 			
 			
    Basic linked lists
    
-			
    A list view is coded as a simple unordered list containing linked list items with a data-role="listview" 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.
    
+			
    A list view is coded as a simple unordered list containing linked list items with a  data-jq-role="listview" 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.
    
 			
 
    
 <ul data-jq-role="listview" data-jq-theme="g">
@@ -34,7 +34,7 @@
 			
 			
    Nested lists
    
 			
    By nesting child ul or ol inside list items, you can create nested lists. When a list item with a child list is clicked, the framework will generate a new ui-page populated with the title of the parent in the header and the list of child elements. These dynamic nested lists are styled with the "b" theme swatch (blue in the default theme) to indicate that you are in a secondary level of navigation. Lists can be nested multiple level deep and all pages and linking will be automatically handled by the framework.
    
-			
    To set the swatch color of the child list views, data-theme attribute on each list inside.
    
+			
    To set the swatch color of the child list views,  data-jq-theme attribute on each list inside.
    
 			Nested list example
 			
 			
    Numbered lists
    
@@ -55,7 +55,7 @@
 			
 			
 			
    List dividers
    
-			
    List items can be turned into dividers to organize and group the list items. This is done by adding the data-role="list-divider" 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 data-dividertheme attribute to the list element (ul or ol) and specifying a theme swatch letter.
    
+			
    List items can be turned into dividers to organize and group the list items. This is done by adding the  data-jq-role="list-divider" 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 data-jq-dividertheme attribute to the list element (ul or ol) and specifying a theme swatch letter.
    
 
 			List divider example
 			
@@ -83,7 +83,7 @@
 		 	List with icon images
 			
 			
    Inset lists
    
-			
    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 data-inset="true" attribute to the list (ul or ol), applies the inset appearance.
    
+			
    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  data-jq-inset="true" attribute to the list (ul or ol), applies the inset appearance.
    
 			
 			Inset list example
 			
diff --git a/docs/lists/lists-themes.html b/docs/lists/lists-themes.html
index b7971c34..c7e3b30c 100755
--- a/docs/lists/lists-themes.html
+++ b/docs/lists/lists-themes.html
@@ -34,7 +34,7 @@
 		
 		
 		
    Theming list items
    
-		
    The list item color scheme can be changed to any button color theme swatch by adding the data-theme attribute to the list, and setting the letter theme swatch. Here is the same list above with the "a" swatch applied. 
    
+		
    The list item color scheme can be changed to any button color theme swatch by adding the  data-jq-theme attribute to the list, and setting the letter theme swatch. Here is the same list above with the "a" swatch applied. 
    
 		
 
 <ul data-jq-role="listview" data-jq-inset="true" data-jq-theme="d">
@@ -47,7 +47,7 @@
 			
  • Sent 328
    • 
 		
 		
-		
    Data-theme attributes also work at the LI-level, for styling a single item.
    
+		
     data-jq-theme attributes also work at the LI-level, for styling a single item.
    
 		
 		
      
 			
    • Divider
      • 
@@ -59,7 +59,7 @@
 		
 		
      Theming dividers
      
 		
-		
      The theme for list dividers can be set by adding the data-dividertheme to the list and specifying a swatch letter. Here is an example of the same list above with swatch "d" set on the dividers.
      
+		
      The theme for list dividers can be set by adding the data-jq-dividertheme to the list and specifying a swatch letter. Here is an example of the same list above with swatch "d" set on the dividers.
      
 		
 
 <ul data-jq-role="listview" data-jq-inset="true" data-jq-theme="d" data-jq-dividertheme="c">
@@ -89,7 +89,7 @@
 		
 		
      Theming icons
      
 		
-		
      The default icon for each list item is arrow-r. To override this, set the data-icon attribute on the desired list item to the name of a standard icon.  To prevent icons from appearing altogether, set the data-icon attribute to "false".
      
+		
      The default icon for each list item is arrow-r. To override this, set the  data-jq-icon attribute on the desired list item to the name of a standard icon.  To prevent icons from appearing altogether, set the  data-jq-icon attribute to "false".
      
 
       
 <li data-jq-icon="info"><a href="#">Notices</a></li>
@@ -126,7 +126,7 @@
 
 <ul data-jq-role="listview" data-jq-inset="true" data-jq-splittheme="a">
 
-		
      To specify the color swatch for the icon button on the right, add the data-splittheme to the list and specify a swatch letter. This attribute can also be added to individual split inside list items by adding a data-theme attribute to specific links  (see second list item).
      
+		
      To specify the color swatch for the icon button on the right, add the data-splittheme to the list and specify a swatch letter. This attribute can also be added to individual split inside list items by adding a  data-jq-theme attribute to specific links  (see second list item).
      
 		
        
 			
      • 
 				
@@ -142,7 +142,7 @@
 			
        • 
 		
      
 
-		
      The icon for the split theme can set at the list level by adding the data-spliticon to the list and specifying a standard icon. This attribute can also be added to individual split inside list items by adding a data-icon attribute to specific links (see second list item).
      
+		
      The icon for the split theme can set at the list level by adding the data-spliticon to the list and specifying a standard icon. This attribute can also be added to individual split inside list items by adding a  data-jq-icon attribute to specific links (see second list item).
      
 		
 
 <ul data-jq-role="listview" data-jq-inset="true" data-jq-splittheme="a" data-jq-spliticon="plus">
diff --git a/docs/pages/dialog-alt.html b/docs/pages/dialog-alt.html
index 07131ba9..de29679f 100644
--- a/docs/pages/dialog-alt.html
+++ b/docs/pages/dialog-alt.html
@@ -18,7 +18,7 @@
 
 		
      
 			
      I'm colorful
      
-			
      This is a regular page, styled as a dialog. To create a dialog, just link to a normal page and include a transition and data-rel="dialog" attribute.
      
+			
      This is a regular page, styled as a dialog. To create a dialog, just link to a normal page and include a transition and data-jq-rel="dialog" attribute.
      
 			Good for you       
 			Don't care, really    
 		
      
diff --git a/docs/pages/dialog.html b/docs/pages/dialog.html
index 8488aeee..53c6c749 100644
--- a/docs/pages/dialog.html
+++ b/docs/pages/dialog.html
@@ -19,7 +19,7 @@
 
 		
      
 			
      Delete page?
      
-			
      This is a regular page, styled as a dialog. To create a dialog, just link to a normal page and include a transition and data-rel="dialog" attribute.
      
+			
      This is a regular page, styled as a dialog. To create a dialog, just link to a normal page and include a transition and data-jq-rel="dialog" attribute.
      
 			Sounds good       
 			Cancel    
 		
      
diff --git a/docs/pages/docs-dialogs.html b/docs/pages/docs-dialogs.html
index 480a58c7..1617be0c 100755
--- a/docs/pages/docs-dialogs.html
+++ b/docs/pages/docs-dialogs.html
@@ -19,7 +19,7 @@
 
 	
      
 			
      Creating dialogs
      
-			
      Any page can be presented as a modal dialog by adding the data-rel="dialog" attribute to the page anchor link. When the "dialog" attribute is applied, the framework adds styles to add rounded corners, margins around the page and a dark background to make the "dialog" appear to be suspended above the page.
      
+			
      Any page can be presented as a modal dialog by adding the data-jq-rel="dialog" attribute to the page anchor link. When the "dialog" attribute is applied, the framework adds styles to add rounded corners, margins around the page and a dark background to make the "dialog" appear to be suspended above the page.
      
 
 			
      
 			
@@ -32,22 +32,22 @@
 
 			
 			
      Transitions
      
-			
      By default, the dialog will open with a 'pop' transition.  Like all pages, you can specify any page transition you want on the dialog by adding the data-transition attribute to the link. To make it feel more dialog-like, we recommend specifying a transition of "pop", "slideup" or "flip".
      
+			
      By default, the dialog will open with a 'pop' transition.  Like all pages, you can specify any page transition you want on the dialog by adding the data-jq-transition attribute to the link. To make it feel more dialog-like, we recommend specifying a transition of "pop", "slideup" or "flip".
      
 			
 
 <a href="foo.html" data-jq-rel="dialog" data-jq-transition="pop">Open dialog</a>
 
 			
 			
 	
 	
 			
      Closing dialogs
      
-			
      When any link is clicked within in a dialog, the framework will automatically close the dialog and transition to the requested page, just as if the dialog were a normal page. To create a "cancel" button in a dialog, just link to the page that triggered the dialog to open and add the data-rel="back" attribute to your link. This pattern of linking to the previous page is also usable in non-JS devices as well.
      
-			
      For JavaScript-generated links, you can simply set the href attribute to "#" and use the data-rel="back" attribute. You can also call the dialog's close() method to programmatically close dialogs, for example: $('.ui-dialog').dialog('close'). 
      
+			
      When any link is clicked within in a dialog, the framework will automatically close the dialog and transition to the requested page, just as if the dialog were a normal page. To create a "cancel" button in a dialog, just link to the page that triggered the dialog to open and add the data-jq-rel="back" attribute to your link. This pattern of linking to the previous page is also usable in non-JS devices as well.
      
+			
      For JavaScript-generated links, you can simply set the href attribute to "#" and use the data-jq-rel="back" attribute. You can also call the dialog's close() method to programmatically close dialogs, for example: $('.ui-dialog').dialog('close'). 
      
 			
 			
      History & Back button behavior
      
 			
      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.
      
diff --git a/docs/pages/docs-links.html b/docs/pages/docs-links.html
index 7b9d210f..b4fbc930 100755
--- a/docs/pages/docs-links.html
+++ b/docs/pages/docs-links.html
@@ -35,7 +35,7 @@
 
 		
      Local, internal linked "pages"
       
 		
-			
      A single HTML document can contain either a single 'page' or multiple 'pages' can be assembled and loaded together by stacking multiple divs with a data-role of "page". This allows you to build a small site or application within a single HTML document; jQuery Mobile will simply display the first 'page' it finds in the source order when the page loads.
       
+			
      A single HTML document can contain either a single 'page' or multiple 'pages' can be assembled and loaded together by stacking multiple divs with a  data-jq-role of "page". This allows you to build a small site or application within a single HTML document; jQuery Mobile will simply display the first 'page' it finds in the source order when the page loads.
       
 			
 			
      If a link points to an anchor (#foo), the framework will looks for a page with that ID. If it finds a page in the HTML document, it will transition the new page into view.
      
 			
@@ -43,16 +43,16 @@
 
 
       
       
-<div data-role="page" id="foo"> 
-	<div data-role="content">
+<div  data-jq-role="page" id="foo"> 
+	<div  data-jq-role="content">
 		I'm the "foo" page. Since I'm the first page 
 		in the source order, I will be displayed onLoad. 
    		<a href="#bar">Visit the bar "page"</a> 
 	</div><!-- /content -->
 </div><!-- /foo page --> 
 
-<div data-role="page" id="bar"> 
-	<div data-role="content">
+<div  data-jq-role="page" id="bar"> 
+	<div  data-jq-role="content">
 		I'm the "bar" page. I will be shown only if the 
 		anchor link on the <a href="#foo">foo</a> 
 		page is clicked. 
diff --git a/docs/pages/docs-navmodel.html b/docs/pages/docs-navmodel.html
index 6e809e09..21091eb4 100644
--- a/docs/pages/docs-navmodel.html
+++ b/docs/pages/docs-navmodel.html
@@ -21,7 +21,7 @@
 			
 			
      jQuery Mobile's navigation model
       
 
-			
      A "page" in jQuery Mobile consists of an element (usually a div) with a data-role attribute set to "page", which generally contains div elements with roles of "header", "content", and "footer", each containing common markup, forms, and custom jQuery Mobile widgets.
       
+			
      A "page" in jQuery Mobile consists of an element (usually a div) with a  data-jq-role attribute set to "page", which generally contains div elements with roles of "header", "content", and "footer", each containing common markup, forms, and custom jQuery Mobile widgets.
       
 
 			
      The basic workflow with page loading is as follows: first, a page is requested with a normal HTTP request, and subsequent "pages" are then requested and injected into that page's DOM. Because of this, the DOM may have a number of "pages" in it at a time, each of which can be re-visited by linking to its data-url attribute.
       
 
diff --git a/docs/pages/docs-pages.html b/docs/pages/docs-pages.html
index 64f9d19a..f9827934 100755
--- a/docs/pages/docs-pages.html
+++ b/docs/pages/docs-pages.html
@@ -44,10 +44,10 @@
 </html>
 
      
 
-			
      Inside the <body> tag, each view or "page" on the mobile device is identified with an element (usually a div) with the data-role="page" attribute:
       
+			
      Inside the <body> tag, each view or "page" on the mobile device is identified with an element (usually a div) with the  data-jq-role="page" attribute:
       
 
 
       
-
      <div data-role="page"> 
+
      <div  data-jq-role="page"> 
 	...
 </div> 
 
       
@@ -56,10 +56,10 @@
 			
      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-jq-roles of "header", "content", and "footer".
       
 
 
       
-
      <div data-role="page"> 
-	<div data-role="header">...</div> 
-	<div data-role="content">...</div> 
-	<div data-role="footer">...</div> 
+
      <div  data-jq-role="page"> 
+	<div  data-jq-role="header">...</div> 
+	<div  data-jq-role="content">...</div> 
+	<div  data-jq-role="footer">...</div> 
 </div> 
 
       
 
       
@@ -113,7 +113,7 @@
 
 		
      Local, internal linked "pages"
       
 		
-			
      A single HTML document can contain multiple 'pages' that are loaded together by stacking multiple divs with a data-role of "page". Each 'page' block needs a unique ID (id="foo") that will be used to link internally between 'pages' (href="#foo"). When a link is clicked, the framework will look for an internal 'page' with the ID and transition it into view.
       
+			
      A single HTML document can contain multiple 'pages' that are loaded together by stacking multiple divs with a  data-jq-role of "page". Each 'page' block needs a unique ID (id="foo") that will be used to link internally between 'pages' (href="#foo"). When a link is clicked, the framework will look for an internal 'page' with the ID and transition it into view.
       
 			
 			
      It's important to note if you  are linking from a mobile page that was loaded via Ajax to a page with multiple internal pages, you need to add a rel="external" or data-ajax="false" to the link. This tells the framework to do a full page reload to clear out the Ajax hash in the URL. This is critical because Ajax pages use the hash (#) to track the Ajax history, while multiple internal pages use the hash to indicate internal pages so there will be a conflicts.
      
 			
      For example, a link to a page containing multiple internal pages would look like this:
      
@@ -171,7 +171,7 @@
 		
 		
 		
      Back linking
      
-		
      If you use the attribute data-rel="back" on an anchor, any clicks on that anchor will mimic the back button, going back one history entry and ignoring the anchor's default href. This is particularly useful when linking back to a named page, such as a link that says "home", or when generating "back" buttons with JavaScript, such as a button to close a dialog. When using this feature in your source markup, be sure to provide a meaningful href that actually points to the URL of the referring page (this will allow the feature to work for users in C-Grade browsers. Also, please keep in mind that if you just want a reverse transition without actually going back in history, you should use the data-direction="reverse" attribute instead.
      
+		
      If you use the attribute data-jq-rel="back" on an anchor, any clicks on that anchor will mimic the back button, going back one history entry and ignoring the anchor's default href. This is particularly useful when linking back to a named page, such as a link that says "home", or when generating "back" buttons with JavaScript, such as a button to close a dialog. When using this feature in your source markup, be sure to provide a meaningful href that actually points to the URL of the referring page (this will allow the feature to work for users in C-Grade browsers. Also, please keep in mind that if you just want a reverse transition without actually going back in history, you should use the data-jq-direction="reverse" attribute instead.
      
 		
 		
      Redirects and linking to directories
      
 		
      When linking to directory indexes (such as href="typesofcats/" instead of href="typesofcats/index.html"), you must provide a trailing slash. This is because jQuery Mobile assumes the section after the last "/" character in a url is a filename, and it will remove that section when creating base urls from which future pages will be referenced.
      
diff --git a/docs/pages/docs-transitions.html b/docs/pages/docs-transitions.html
index 1cc0f2ef..2de0a42e 100755
--- a/docs/pages/docs-transitions.html
+++ b/docs/pages/docs-transitions.html
@@ -23,7 +23,7 @@
 
 		
      The jQuery Mobile framework includes a set of six CSS-based transition effects that can be applied to any object or page change event, which apply the chosen transition when navigating to a new page and the reverse transition for the Back button. By default, the framework applies the right to left slide transition.
      
 
-		
      To set a custom transition effect, add the data-transition attribute to the link. Possible values include: 
      
+		
      To set a custom transition effect, add the data-jq-transition attribute to the link. Possible values include: 
      
 
 
 <a href="index.html" data-jq-transition="pop">I'll pop</a>
@@ -38,7 +38,7 @@
 		flip
 		
      
 		
-		
      In addition, you can also force a "backwards" transition by specifying data-direction="reverse" on your link. Note: (this was formerly data-back="true", which will remain supported until 1.0)
      
+		
      In addition, you can also force a "backwards" transition by specifying data-jq-direction="reverse" on your link. Note: (this was formerly data-jq-back="true", which will remain supported until 1.0)
      
 		
 		
      
 			
      Transitions from jQtouch (with small modifications): Built by David Kaneda and maintained by Jonathan Stark.
      
diff --git a/docs/pages/pages-themes.html b/docs/pages/pages-themes.html
index cd2db67c..da5ae77b 100755
--- a/docs/pages/pages-themes.html
+++ b/docs/pages/pages-themes.html
@@ -24,7 +24,7 @@
 			
 			
      jQuery Mobile has a rich theming system that gives you full control of how pages are styled. There is detailed theming documentation within each page widget, but let's look at a few high-level examples of how theming is applied.
      
 			
-			
      The data-theme attribute can be applied to the header and footer containers to apply any of the lettered theme color swatches. While the data-theme attribute could be added to the content container, we recommend adding it instead to div or container that has been assigned the data-role="page" attribute to ensure that the background color is applied to the full page.
      
+			
      The  data-jq-theme attribute can be applied to the header and footer containers to apply any of the lettered theme color swatches. While the  data-jq-theme attribute could be added to the content container, we recommend adding it instead to div or container that has been assigned the  data-jq-role="page" attribute to ensure that the background color is applied to the full page.
      
 			
 			
      The default Theme mixes styles from multiple swatches to create visual texture and present the various elements in optimal contrast to one another:
      
 			
diff --git a/docs/pages/transition-success.html b/docs/pages/transition-success.html
index ad5503a2..9a73fb97 100644
--- a/docs/pages/transition-success.html
+++ b/docs/pages/transition-success.html
@@ -17,7 +17,7 @@
 	
      
 	
 	
      
-		
      That was an animated page transition effect that we added with a data-transition attribute on the link.
      
+		
      That was an animated page transition effect that we added with a data-jq-transition attribute on the link.
      
 		
      Since it uses CSS transforms, this should be hardware accelerated on many mobile devices.
      
 		
      What do you think?
      
 		I like it   
diff --git a/docs/toolbars/bars-fullscreen.html b/docs/toolbars/bars-fullscreen.html
index 406876e5..b0477c05 100755
--- a/docs/toolbars/bars-fullscreen.html
+++ b/docs/toolbars/bars-fullscreen.html
@@ -22,7 +22,7 @@
 	
 		
      This page demonstrates the "fullscreen" toolbar mode. This toolbar treatment is used in special cases where you want the content to fill the whole screen, and you want the header and footer toolbars to appear and disappear when the page is clicked responsively — a common scenario for photo, image or video viewers.
      
 		
-		
      To enable this toolbar feature type, you apply a data-fullscreen="true" attribute to the div contain that has the attribute data-role="page", and the data-position="fixed" attribute to both the header and footer div elements. 
      
+		
      To enable this toolbar feature type, you apply a data-fullscreen="true" attribute to the div contain that has the attribute  data-jq-role="page", and the data-position="fixed" attribute to both the header and footer div elements. 
      
 		
 		
      Keep in mind that the toolbars in this mode will sit over page content, so not all content will be accessible with the toolbars open, just as shown in this demo.
      
 			       
diff --git a/docs/toolbars/bars-themes.html b/docs/toolbars/bars-themes.html
index f50494ec..edd90be6 100755
--- a/docs/toolbars/bars-themes.html
+++ b/docs/toolbars/bars-themes.html
@@ -24,11 +24,11 @@
 		
 			
 		
      Theming headers and footers
      
-		
      To set the header or footer bars to a different color in your theme, add the data-theme 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):
       
+		
      To set the header or footer bars to a different color in your theme, add the  data-jq-theme 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):
       
 
 
       
 
      -<div data-role="header" data-theme="b"> 
+<div  data-jq-role="header"  data-jq-theme="b"> 
 	<h1>Page Title</h1> 
 </div> 
 
       
@@ -37,11 +37,11 @@
 		
 		
      Theming buttons in toolbars
      
 
-		
      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 data-theme 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 data-theme attribute to "b" (blue in our default theme) on the Save button's anchor.
       
+		
      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  data-jq-theme 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  data-jq-theme attribute to "b" (blue in our default theme) on the Save button's anchor.
       
 
 
       
 
      -<a href="add-user.php" data-theme="b">Save</a> 
+<a href="add-user.php"  data-jq-theme="b">Save</a> 
 
       
 
       
 			
diff --git a/docs/toolbars/docs-headers.html b/docs/toolbars/docs-headers.html
index 8841824a..ac34f78f 100755
--- a/docs/toolbars/docs-headers.html
+++ b/docs/toolbars/docs-headers.html
@@ -26,7 +26,7 @@
 
 
       
 
      -<div data-role="header"> 
+<div  data-jq-role="header"> 
 	<h1>Page Title</h1> 
 </div> 
 
       
@@ -41,7 +41,7 @@
 				
      Page title
      
 			
      
 
-			
      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-backbtn="false" 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-jq-backbtn="false" to the header container.
 	
 			
      Adding buttons
      
 	
@@ -49,7 +49,7 @@
 
 
 		
      Creating custom back buttons
      
-		
      If you use the attribute data-rel="back" on an anchor, any clicks on that anchor will mimic the back button, going back one history entry and ignoring the anchor's default href. This is particularly useful when linking back to a named page, such as a link that says "home", or when generating "back" buttons with JavaScript, such as a button to close a dialog. When using this feature in your source markup, be sure to provide a meaningful href that actually points to the URL of the referring page (this will allow the feature to work for users in C-Grade browsers. Also, pease keep in mind that if you just want a reverse transition without actually going back in history, you should use the data-direction="reverse" attribute instead.
      
+		
      If you use the attribute data-jq-rel="back" on an anchor, any clicks on that anchor will mimic the back button, going back one history entry and ignoring the anchor's default href. This is particularly useful when linking back to a named page, such as a link that says "home", or when generating "back" buttons with JavaScript, such as a button to close a dialog. When using this feature in your source markup, be sure to provide a meaningful href that actually points to the URL of the referring page (this will allow the feature to work for users in C-Grade browsers. Also, pease keep in mind that if you just want a reverse transition without actually going back in history, you should use the data-jq-direction="reverse" attribute instead.
      
 		
 			
      Default button positioning
      
 		
@@ -70,7 +70,7 @@
 				
      Edit Contact
      
 				Save
 			
      
-			
      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.
      
+			
      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-jq-theme attribute and set the color swatch for the button to "b" to make the "Save" button pop.
      
 			
 			
      			
 <div data-jq-role="header" data-jq-position="inline">
@@ -91,7 +91,7 @@
 	
 			
      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-backbtn="false" 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.
      
+			
      In this example, we're adding only a single button to the right slot so the data-jq-backbtn="false" 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.
      
 			
 
 
@@ -111,7 +111,7 @@
 			
 		
      Customizing the back button text
      	
 		
-		
      If you'd like to configure the back button text, you can either use the data-back-btn-text="previous" attribute on your page element, or set it programmatically via the page plugin's options: $.mobile.page.prototype.options.backBtnText = "previous";. If you're doing this programmatically, set this option inside the mobileinit event handler.
      
+		
      If you'd like to configure the back button text, you can either use the data-jq-back-btn-text="previous" attribute on your page element, or set it programmatically via the page plugin's options: $.mobile.page.prototype.options.backBtnText = "previous";. If you're doing this programmatically, set this option inside the mobileinit event handler.
      
 		
 		
 		
diff --git a/docs/toolbars/docs-navbar.html b/docs/toolbars/docs-navbar.html
index 13883bb1..f1f5304b 100755
--- a/docs/toolbars/docs-navbar.html
+++ b/docs/toolbars/docs-navbar.html
@@ -23,7 +23,7 @@
 	
 	
      jQuery Mobile has a very basic navbar widget that is useful for providing up to 5 buttons with optional icons in a bar  , typically within a header or footer. 
      
 	
-	
      A navbar is coded as an unordered list of links wrapped in a container element that has the data-role="navbar" attribute. To set one of links to the active (selected) state, add class="ui-btn-active" to the anchor. In this example, we have a two-button navbar in the footer with the "One" item set to active:
      
+	
      A navbar is coded as an unordered list of links wrapped in a container element that has the  data-jq-role="navbar" attribute. To set one of links to the active (selected) state, add class="ui-btn-active" to the anchor. In this example, we have a two-button navbar in the footer with the "One" item set to active:
      
 	
 
      
 <div data-jq-role="footer">
@@ -124,7 +124,7 @@
 	
 	
      Icons in navbars
      
 	
-	
      Icons can be added to navbar items by adding the data-icon attribute specifying a standard mobile icon to each anchor.
      
+	
      Icons can be added to navbar items by adding the  data-jq-icon attribute specifying a standard mobile icon to each anchor.
      
 
 	
      
 		
      
@@ -136,7 +136,7 @@
 		
      
 	
      
 	
-	
      Icons can be stacked above the labels by adding the data-iconpos="top" attribute to each anchor.
      
+	
      Icons can be stacked above the labels by adding the  data-jq-iconpos="top" attribute to each anchor.
      
 
 	
      
 		
      
@@ -181,7 +181,7 @@
 
 	
      Theming navbars
      
 	
-	
      Navbars can be set to any theme color by data-theme attribute to the links and specifying any theme swatch.
      
+	
      Navbars can be set to any theme color by  data-jq-theme attribute to the links and specifying any theme swatch.
      
 
 	
      
 		
      
diff --git a/experiments/scrollview/sv-test-02.html b/experiments/scrollview/sv-test-02.html
index 156aa4a8..baefc313 100644
--- a/experiments/scrollview/sv-test-02.html
+++ b/experiments/scrollview/sv-test-02.html
@@ -24,7 +24,7 @@
 	
 	
 	
  
  
-
      
-	
      
+
      
+	
      
 		
      Event Logger
      
 	
      
 	
-	
      
+	
      
 		
      Touch events on this page will log out below, prepending to the top as they arrive.
      
 		
-		
        
+		
          
 			
 		
        
 
diff --git a/tests/speed/basic-page.html b/tests/speed/basic-page.html
index 11aaccab..038d9f26 100644
--- a/tests/speed/basic-page.html
+++ b/tests/speed/basic-page.html
@@ -30,11 +30,11 @@
  
  
 
-
        
-	
        
+
        
+	
        
 		
        Basic Page
        
 	
        
-	
        
+	
        
 		
        Cras justo odio, dapibus ac facilisis in, egestas eget quam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Vestibulum id ligula porta felis euismod semper. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Cras justo odio, dapibus ac facilisis in, egestas eget quam. 
        
 
 
        Aenean lacinia bibendum nulla sed consectetur. Sed posuere consectetur est at lobortis. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. 
        
diff --git a/tests/speed/lists-ul.html b/tests/speed/lists-ul.html
index ac341e09..f57ab4ef 100755
--- a/tests/speed/lists-ul.html
+++ b/tests/speed/lists-ul.html
@@ -9,15 +9,15 @@
  
  
 
-
        
+
        
 
-	
        
+	
        
 		
        400 item list
        
 	
        
 
-	
        
+	
        
 		
-			
          
+			
            
 				
          • Acura
            • 
 				
          • Audi
            • 
 				
          • BMW
            • 
diff --git a/tests/unit/core/core.js b/tests/unit/core/core.js
index 7848f8b1..444ebec2 100644
--- a/tests/unit/core/core.js
+++ b/tests/unit/core/core.js
@@ -8,6 +8,13 @@
 			extendFn = $.extend;
 
 	module(libName, {
+		setup: function(){
+			// NOTE reset for gradeA tests
+			$('html').removeClass('ui-mobile');
+
+			// NOTE reset for pageLoading tests
+			$('.ui-loader').remove();
+		},
 		teardown: function(){
 			$.extend = extendFn;
 		}
@@ -23,5 +30,120 @@
 			$.testHelper.reloadLib(libName);
 			ok($.mobile.gradeA());
 		});
+
+		test( "loading the core library triggers mobilinit on the document", function(){
+			expect( 1 );
+
+			$(window.document).bind('mobileinit', function(event){
+				ok(true);
+			});
+
+			$.testHelper.reloadLib(libName);
+		});
+
+		test( "enhancments are skipped when the browser is not grade A", function(){
+			setGradeA(false);
+			$.testHelper.reloadLib(libName);
+
+			//NOTE easiest way to check for enhancements, not the most obvious
+			ok(!$("html").hasClass("ui-mobile"));
+		});
+
+		test( "enhancments are added when the browser is grade A", function(){
+			setGradeA(true);
+			$.testHelper.reloadLib(libName);
+
+			ok($("html").hasClass("ui-mobile"));
+		});
+
+
+		//TODO lots of duplication
+		test( "pageLoading doesn't add the dialog to the page when loading message is false", function(){
+			$.testHelper.alterExtend({loadingMessage: false});
+			$.testHelper.reloadLib(libName);
+			$.mobile.pageLoading(false);
+			ok(!$(".ui-loader").length);
+		});
+
+		test( "pageLoading doesn't add the dialog to the page when done is passed as true", function(){
+			$.testHelper.alterExtend({loadingMessage: true});
+			$.testHelper.reloadLib(libName);
+
+			// TODO add post reload callback
+			$('.ui-loader').remove();
+
+			$.mobile.pageLoading(true);
+			ok(!$(".ui-loader").length);
+		});
+
+		test( "pageLoading adds the dialog to the page when done is true", function(){
+			$.testHelper.alterExtend({loadingMessage: true});
+			$.testHelper.reloadLib(libName);
+			$.mobile.pageLoading(false);
+			ok($(".ui-loader").length);
+		});
+
+				var metaViewportSelector = "head meta[name=viewport]",
+		setViewPortContent = function(value){
+			$(metaViewportSelector).remove();
+			$.testHelper.alterExtend({metaViewportContent: value});
+			$.testHelper.reloadLib(libName);
+		};
+
+		test( "meta view port element is added to head when defined on mobile", function(){
+			setViewPortContent("width=device-width");
+			same($(metaViewportSelector).length, 1);
+		});
+
+		test( "meta view port element not added to head when not defined on mobile", function(){
+			setViewPortContent(false);
+			same($(metaViewportSelector).length, 0);
+		});
+
+		var findFirstPage = function() {
+			return $("[ data-"+ $.mobile.ns +"-role='page']").first();
+		};
+
+		test( "active page and start page should be set to the fist page in the selected set", function(){
+			var firstPage = findFirstPage();
+			$.testHelper.reloadLib(libName);
+
+			same($.mobile.firstPage, firstPage);
+			same($.mobile.activePage, firstPage);
+		});
+
+		test( "mobile viewport class is defined on the first page's parent", function(){
+			var firstPage = findFirstPage();
+			$.testHelper.reloadLib(libName);
+
+			ok(firstPage.parent().hasClass('ui-mobile-viewport'));
+		});
+
+		test( "mobile page container is the first page's parent", function(){
+			var firstPage = findFirstPage();
+			$.testHelper.reloadLib(libName);
+
+			same($.mobile.pageContainer, firstPage.parent());
+		});
+
+		test( "page loading is called on document ready", function(){
+			$.testHelper.alterExtend({ pageLoading: function(){
+				start();
+				ok("called");
+			}});
+
+			stop();
+			$.testHelper.reloadLib(libName);
+		});
+
+		test( "hashchange triggered on document ready with single argument: true", function(){
+			$(window).bind("hashchange", function(ev, arg){
+				same(arg, true);
+				start();
+			});
+
+			stop();
+			$.testHelper.reloadLib(libName);
+		});
 	});
 })(jQuery);
\ No newline at end of file
diff --git a/tests/unit/dialog/index.html b/tests/unit/dialog/index.html
index d0f51b1b..24e1abd7 100644
--- a/tests/unit/dialog/index.html
+++ b/tests/unit/dialog/index.html
@@ -23,12 +23,12 @@
 
              
 
            
 
-
            
-	
+
            
+	
 
            
 
-
            
-	
            
+
            
+	
            
 		
            Dialog
            
 	
            
 	foo
diff --git a/tests/unit/listview/index.html b/tests/unit/listview/index.html
index 10f52942..55034110 100644
--- a/tests/unit/listview/index.html
+++ b/tests/unit/listview/index.html
@@ -22,12 +22,12 @@
 
 
 
-
            
-	
            
+
            
+	
            
 		
            Basic List View
            
 	
            
-	
            
-		
            
 
-