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-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.
The following defaults are configurable via the $.mobile object:
+
ns (string, default: "jq-"):
+
The namespaced used in data- attributes, for example, data-role. Can be set to anything, including a blank string.
+
subPageUrlKey (string, default: "ui-page"):
The url parameter used for referencing widget-generated sub-pages (such as those generated by nested listviews). Translates to to example.html&ui-page=subpageIdentifier. The hash segment before &ui-page= is used by the framework for making an Ajax request to the URL where the sub-page exists.
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-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.
@@ -151,7 +151,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-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.
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-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.
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-icon attribute on the anchor specifying the icon to display. For example, the following markup:
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-iconpos attribute to set the icon to the right, above (top) or below (bottom) the text. For example, the markup:
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-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":
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-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.
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-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.
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-theme attribute on the button markup and specifying a swatch letter.
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-theme attribute.
Theme aTheme b
diff --git a/docs/buttons/buttons-types.html b/docs/buttons/buttons-types.html
index 2f032dc1..4a369ddf 100755
--- a/docs/buttons/buttons-types.html
+++ b/docs/buttons/buttons-types.html
@@ -25,7 +25,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-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-role="button">Link button</a>
@@ -35,7 +35,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-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.
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-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.
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-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.)
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-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.
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 a 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'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.
@@ -51,8 +51,8 @@
H1 Heading
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 a 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'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.
@@ -61,8 +61,8 @@
H1 Heading
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 a 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'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.
@@ -71,8 +71,8 @@
H1 Heading
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 a 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'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.
@@ -81,8 +81,8 @@
H1 Heading
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 a 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'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.
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-role="none". For example:
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-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 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-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-role="controlgroup" attribute to the fieldset so it can be styled in a parallel way as text inputs, selects or other form elements.
@@ -55,7 +55,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-role="controlgroup" attribute on the fie.
diff --git a/tests/unit/init/init_core.js b/tests/unit/init/init_core.js
index 9c88acde..2f3ec3fe 100644
--- a/tests/unit/init/init_core.js
+++ b/tests/unit/init/init_core.js
@@ -6,8 +6,15 @@
mobileSelect = undefined,
metaViewportContentDefault = $.mobile.metaViewportContent,
libName = 'jquery.mobile.init.js',
+ coreLib = 'jquery.mobile.core.js',
+ extendFn = $.extend,
setGradeA = function(value) { $.mobile.gradeA = function(){ return value; }; },
- extendFn = $.extend;
+ reloadCoreNSandInit = function(){
+ $.testHelper.reloadLib(coreLib);
+ $.testHelper.reloadLib("jquery.setNamespace.js");
+ $.testHelper.reloadLib(libName);
+ };
+
module(libName, {
setup: function(){
@@ -35,6 +42,7 @@
mobileSelect = $.mobile.selectmenu;
});
+ // NOTE for the following two tests see index html for the binding
test( "mobile.page is available when mobile init is fired", function(){
ok(mobilePage !== undefined, "$.mobile.page is defined");
});
@@ -44,14 +52,20 @@
});
$.testHelper.excludeFileProtocol(function(){
- test( "loading the init library triggers mobilinit on the document", function(){
+ asyncTest( "loading the init library triggers mobilinit on the document", function(){
+ var initFired = false;
expect( 1 );
$(window.document).bind('mobileinit', function(event){
- ok(true);
+ initFired = true;
});
$.testHelper.reloadLib(libName);
+
+ setTimeout(function(){
+ ok(initFired, "init fired");
+ start();
+ }, 1000);
});
test( "enhancments are skipped when the browser is not grade A", function(){
@@ -97,29 +111,32 @@
});
var findFirstPage = function() {
- return $("[data-role='page']").first();
+ 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();
+ expect( 2 );
$.testHelper.reloadLib(libName);
+ var firstPage = findFirstPage();
- same($.mobile.firstPage, firstPage);
- same($.mobile.activePage, firstPage);
+ same($.mobile.firstPage[0], firstPage[0]);
+ same($.mobile.activePage[0], firstPage[0]);
});
test( "mobile viewport class is defined on the first page's parent", function(){
- var firstPage = findFirstPage();
+ expect( 1 );
$.testHelper.reloadLib(libName);
+ var firstPage = findFirstPage();
ok(firstPage.parent().hasClass('ui-mobile-viewport'));
});
test( "mobile page container is the first page's parent", function(){
- var firstPage = findFirstPage();
+ expect( 1 );
$.testHelper.reloadLib(libName);
+ var firstPage = findFirstPage();
- same($.mobile.pageContainer, firstPage.parent());
+ same($.mobile.pageContainer[0], firstPage.parent()[0]);
});
test( "page loading is called on document ready", function(){
@@ -143,14 +160,13 @@
});
test( "pages without a data-url attribute have it set to their id", function(){
- same($("#foo").data('url'), "foo");
+ same($("#foo").jqmData('url'), "foo");
});
test( "pages with a data-url attribute are left with the original value", function(){
- same($("#bar").data('url'), "bak");
+ same($("#bar").jqmData('url'), "bak");
});
- //TODO lots of duplication
asyncTest( "pageLoading doesn't add the dialog to the page when loading message is false", function(){
$.mobile.loadingMessage = false;
$.mobile.pageLoading(false);
@@ -166,7 +182,7 @@
$.mobile.pageLoading(true);
setTimeout(function(){
- ok(!$(".ui-loader").length);
+ same($(".ui-loading").length, 0, "page should not be in the loading state");
start();
}, 500);
});
@@ -176,14 +192,13 @@
$.mobile.pageLoading(false);
setTimeout(function(){
- ok($(".ui-loader").length);
+ same($(".ui-loading").length, 1, "page should be in the loading state");
start();
}, 500);
});
asyncTest( "page loading should contain default loading message", function(){
- $.testHelper.reloadLib('jquery.mobile.core.js');
- $.testHelper.reloadLib(libName);
+ reloadCoreNSandInit();
$.mobile.pageLoading(false);
setTimeout(function(){
@@ -193,10 +208,7 @@
});
asyncTest( "page loading should contain custom loading message", function(){
- $(document).bind('mobileinit', function(){
- $.mobile.loadingMessage = "foo";
- });
-
+ $.mobile.loadingMessage = "foo";
$.testHelper.reloadLib(libName);
$.mobile.pageLoading(false);
diff --git a/tests/unit/jquery.setNameSpace.js b/tests/unit/jquery.setNameSpace.js
new file mode 100644
index 00000000..c4c9f223
--- /dev/null
+++ b/tests/unit/jquery.setNameSpace.js
@@ -0,0 +1,4 @@
+//set namespace for unit test markp
+$( document ).bind( "mobileinit", function(){
+ $.mobile.ns = "nstest-";
+});
\ No newline at end of file
diff --git a/tests/unit/listview/index.html b/tests/unit/listview/index.html
index 8ed2893f..bc432b35 100644
--- a/tests/unit/listview/index.html
+++ b/tests/unit/listview/index.html
@@ -6,6 +6,7 @@