Links with data-role="button". Input-based buttons and button elements are auto-enhanced, no data-role required
| data-corners | +true | false | +
|---|---|
| data-icon | +home | delete | plus | arrow-u | arrow-d | check | gear | grid | star | custom | arrow-r | arrow-l | minus | refresh | forward | back | alert | info | search | +
| data-iconpos | +left | right | top | bottom | notext | +
| data-iconshadow | +true | false | +
| data-inline | +true | false | +
| data-shadow | +true | false | +
| data-theme | +swatch letter (a-z) | +
Multiple buttons can be wrapped in a container with a data-role="controlgroup" attribute for a vertically grouped set. Add the data-type="horizontal" attribute for the buttons to sit side-by-side.
Pairs of labels and inputs with type="checkbox" are auto-enhanced, no data-role required
| data-role | +none (prevents auto-enhancement to use native control) | +
|---|---|
| data-theme | +swatch letter (a-z) - Added to the form element | +
A heading and content wrapped in a container with the data-role="collapsible"
| data-collapsed | +true | false | +
|---|---|
| data-content-theme | +swatch letter (a-z) | +
| data-theme | +swatch letter (a-z) | +
A number of collapsibles wrapped in a container with the data-role="collapsible-set"
| data-content-theme | +swatch letter (a-z) - Sets all collapsibles in set | +
|---|---|
| data-theme | +swatch letter (a-z) - Sets all collapsibles in set | +
| data-overlay-theme | +swatch letter (a-z) - overlay theme | +
|---|
Container with data-role="content"
| data-theme | +swatch letter (a-z) | +
|---|
Container with data-role="fieldcontain" wrapped around label/form element pair
Select with data-role="slider", two options only
| data-role | +none (prevents auto-enhancement to use native control) | +
|---|---|
| data-theme | +swatch letter (a-z) - Added to the form element | +
| data-track-theme | +swatch letter (a-z) - Added to the form element | +
Container with data-role="footer"
| data-id | +string (unique id, useful in persistent footers) | +
|---|---|
| data-position | +fixed | +
| data-theme | +swatch letter (a-z) | +
Container with data-role="header"
| data-add-back-btn | +true | false (auto add back button, header only) | +
|---|---|
| data-back-btn-text | +string | +
| data-back-btn-theme | +swatch letter (a-z) | +
| data-position | +fixed | +
| data-theme | +swatch letter (a-z) | +
| data-title | +string (title used when page is shown) | +
Links, including those with a data-role="button", and form submit buttons share these attributes
| data-ajax | +true | false | +
|---|---|
| data-direction | +reverse (reverse page transition animation) | +
| data-dom-cache | +true | false | +
| data-prefetch | +true | false | +
| data-rel | +back (to move one step back in history) + dialog (to open link styled as dialog, not tracked in history) + external (for linking to another domain) |
+
| data-transition | +slide | slideup | slidedown | pop | fade | flip | +
OL or UL with data-role="listview"
| data-count-theme | +swatch letter (a-z) | +
|---|---|
| data-dividertheme | +swatch letter (a-z) | +
| data-filter | +true | false | +
| data-filter-placeholder | +string | +
| data-filter-theme | +swatch letter (a-z) | +
| data-inset | +true | false | +
| data-split-icon | +home | delete | plus | arrow-u | arrow-d | check | gear | grid | star | custom | arrow-r | arrow-l | minus | refresh | forward | back | alert | info | search | +
| data-theme | +swatch letter (a-z) | +
LI within a listview
+| data-icon | +home | delete | plus | arrow-u | arrow-d | check | gear | grid | star | custom | arrow-r | arrow-l | minus | refresh | forward | back | alert | info | search | +
|---|---|
| data-role | +list-divider | +
| data-theme | +swatch letter (a-z) - can also be set on individual LIs | +
Container with data-role="page" or "dialog"
| data-close-btn-text | +string (text for the close button, dialog only) | +
|---|---|
| data-dom-cache | +true | false | +
| data-id | +string (unique id for the page) | +
| data-fullscreen | +true | false (used in conjunction with fixed toolbars) | +
| data-overlay-theme | +swatch letter (a-z) - overlay theme when the page is opened in a dialog | +
| data-theme | +swatch letter (a-z) | +
| data-title | +string (title used when page is shown) | +
Pairs of labels and inputs with type="radio" are auto-enhanced, no data-role required
| data-role | +none (prevents auto-enhancement to use native control) | +
|---|---|
| data-theme | +swatch letter (a-z) - Added to the form element | +
All select form elements are auto-enhanced, no data-role required
| data-icon | +home | delete | plus | arrow-u | arrow-d | check | gear | grid | star | custom | arrow-r | arrow-l | minus | refresh | forward | back | alert | info | search | +
|---|---|
| data-iconpos | +left | right | top | bottom | notext | +
| data-inline | +true | false | +
| data-native-menu | +true | false | +
| data-placeholder | +true | false - Add to the Option | +
| data-role | +none (prevents auto-enhancement to use native control) | +
| data-overlay-theme | +swatch letter (a-z) - overlay theme for non-native selects | +
| data-theme | +swatch letter (a-z) - Added to the form element | +
Multiple selects can be wrapped in a fieldset with a data-role="controlgroup" attribute for a vertically grouped set. Add the data-type="horizontal" attribute for the selects to sit side-by-side.
Inputs with type="range" are auto-enhanced, no data-role required
| data-role | +none (prevents auto-enhancement to use native control) | +
|---|---|
| data-theme | +swatch letter (a-z) - Added to the form element | +
| data-track-theme | +swatch letter (a-z) - Added to the form element | +
Input type="text|number|search|etc." or textarea elements are auto-enhanced, no data-role required
| data-role | +none (prevents auto-enhancement to use native control) | +
|---|---|
| data-theme | +swatch letter (a-z) - Added to the form element | +
The HTML element will always have a class of either "portrait" or "landscape", depending on the orientation of the browser or device. You can utilize these in your CSS like this:
+The HTML element will always have a class of either "portrait" or "landscape", depending on the orientation of the browser or device. You can utilize these in your CSS like this:
.portrait {
@@ -44,7 +44,7 @@
By default, we create min and max breakpoint classes at the following widths: 320,480,768,1024. These translate to classes that look like this: "min-width-320px", "max-width-480px", and are meant to be used as a replacement of (or in addition to) the media query equivalents they mimic.
By default, we create min and max breakpoint classes at the following widths: 320,480,768,1024. These translate to classes that look like this: "min-width-320px", "max-width-480px", and are meant to be used as a replacement of (or in addition to) the media query equivalents they mimic.
.myelement {
@@ -113,6 +113,7 @@ $.mobile.media("screen and (-webkit-min-device-pixel-ratio: 2)");
Events
Methods & Utilities
Responsive Layout
+ Data attribute reference
Theme framework
diff --git a/docs/api/methods.html b/docs/api/methods.html
index e81b4ee0..ebd2f78b 100755
--- a/docs/api/methods.html
+++ b/docs/api/methods.html
@@ -548,6 +548,7 @@ $.mobile.silentScroll(100);
Configuring defaults
Events
Methods & Utilities
+ Data attribute reference
Theme framework
diff --git a/docs/api/themes.html b/docs/api/themes.html
index cc4bd26a..5dedc2b3 100755
--- a/docs/api/themes.html
+++ b/docs/api/themes.html
@@ -267,9 +267,10 @@
Configuring defaults
Events
Methods & Utilities
+ Data attribute reference
Theme framework
-
+
diff --git a/docs/lists/lists-themes.html b/docs/lists/lists-themes.html
index 0880fee6..7ea1184e 100755
--- a/docs/lists/lists-themes.html
+++ b/docs/lists/lists-themes.html
@@ -28,7 +28,7 @@
<ul data-role="listview" data-inset="true">
-
+
- Divider
- Inbox 12
- Outbox 0
diff --git a/docs/toolbars/docs-headers.html b/docs/toolbars/docs-headers.html
index a91a66a7..b20eebb3 100644
--- a/docs/toolbars/docs-headers.html
+++ b/docs/toolbars/docs-headers.html
@@ -123,10 +123,10 @@
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'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";
Default back button style
- If you'd like to configure the back button role-theme, you can use: $.mobile.page.prototype.options.backBtnTheme = "a";.
+
If you'd like to configure the back button role-theme, you can use:
$.mobile.page.prototype.options.backBtnTheme = "a";
If you're doing this programmatically, set this option inside the mobileinit event handler.
Custom header configurations
diff --git a/experiments/scrollview/scrollview.js b/experiments/scrollview/scrollview.js
index eb6cb020..f033c784 100644
--- a/experiments/scrollview/scrollview.js
+++ b/experiments/scrollview/scrollview.js
@@ -1,50 +1,45 @@
-function ResizePageContentHeight(page)
-{
- var $page = $(page);
- var $content = $page.children(".ui-content");
- var hh = $page.children(".ui-header").outerHeight(); hh = hh ? hh : 0;
- var fh = $page.children(".ui-footer").outerHeight(); fh = fh ? fh : 0;
- var pt = parseFloat($content.css("padding-top"));
- var pb = parseFloat($content.css("padding-bottom"));
- var wh = window.innerHeight;
+function ResizePageContentHeight(page) {
+ var $page = $(page),
+ $content = $page.children( ".ui-content" ),
+ hh = $page.children( ".ui-header" ).outerHeight() : 0,
+ fh = $page.children( ".ui-footer" ).outerHeight() : 0,
+ pt = parseFloat($content.css( "padding-top" )),
+ pb = parseFloat($content.css( "padding-bottom" )),
+ wh = window.innerHeight;
+
$content.height(wh - (hh + fh) - (pt + pb));
}
-$(":jqmData(role='page')").live("pageshow", function(event) {
- var $page = $(this);
+$( ":jqmData(role='page')" ).live( "pageshow", function(event) {
+ var $page = $( this );
// For the demos that use this script, we want the content area of each
// page to be scrollable in the 'y' direction.
- $page.find(".ui-content").attr("data-"+ $.mobile.ns +"scroll", "y");
+ $page.find( ".ui-content" ).attr( "data-" + $.mobile.ns + "scroll", "y" );
// This code that looks for [data-scroll] will eventually be folded
// into the jqm page processing code when scrollview support is "official"
// instead of "experimental".
- $page.find(":jqmData(scroll):not(.ui-scrollview-clip)").each(function(){
- var $this = $(this);
+ $page.find( ":jqmData(scroll):not(.ui-scrollview-clip)" ).each(function () {
+ var $this = $( this );
// XXX: Remove this check for ui-scrolllistview once we've
// integrated list divider support into the main scrollview class.
- if ($this.hasClass("ui-scrolllistview"))
+ if ( $this.hasClass( "ui-scrolllistview" ) ) {
$this.scrolllistview();
- else
- {
- var st = $this.jqmData("scroll") + "";
- var paging = st && st.search(/^[xy]p$/) != -1;
- var dir = st && st.search(/^[xy]/) != -1 ? st.charAt(0) : null;
+ } else {
+ var st = $this.jqmData( "scroll" ) + "",
+ paging = st && st.search(/^[xy]p$/) != -1,
+ dir = st && st.search(/^[xy]/) != -1 ? st.charAt(0) : null,
- var opts = {};
- if (dir)
- opts.direction = dir;
- if (paging)
- opts.pagingEnabled = true;
+ opts = {
+ direction: dir || undefined,
+ paging: paging || undefined,
+ scrollMethod: $this.jqmData("scroll-method") || undefined
+ };
- var method = $this.jqmData("scroll-method");
- if (method)
- opts.scrollMethod = method;
-
- $this.scrollview(opts);
+ $this.scrollview( opts );
}
});
@@ -52,9 +47,9 @@ $(":jqmData(role='page')").live("pageshow", function(event) {
// area that is sized to fit completely within the viewport. This should
// also handle the case where pages are loaded dynamically.
- ResizePageContentHeight(event.target);
+ ResizePageContentHeight( event.target );
});
-$(window).bind("orientationchange", function(event) {
- ResizePageContentHeight($(".ui-page"));
-});
+$( window ).bind( "orientationchange", function( event ) {
+ ResizePageContentHeight( $( ".ui-page" ) );
+});
\ No newline at end of file
diff --git a/index.html b/index.html
index 8ab3a3ab..24ed9d69 100755
--- a/index.html
+++ b/index.html
@@ -55,6 +55,7 @@
- Configuring defaults
- Events
- Methods & Utilities
+ - Data attribute reference
- Theme framework
diff --git a/js/jquery.mobile.core.js b/js/jquery.mobile.core.js
index a5b3068a..e8480381 100644
--- a/js/jquery.mobile.core.js
+++ b/js/jquery.mobile.core.js
@@ -130,13 +130,27 @@
},
getInheritedTheme: function( el, defaultTheme ) {
- // Find the closest parent with a theme class on it.
- var themedParent = el.closest( "[class*='ui-bar-'],[class*='ui-body-']" ),
- // If there's a themed parent, extract the theme letter
- // from the theme class .
- ltr = ( themedParent.length && /ui-(bar|body)-([a-z])\b/.exec( themedParent.attr( "class" ) )[ 2 ] || "" ) || "";
+ // Find the closest parent with a theme class on it. Note that
+ // we are not using $.fn.closest() on purpose here because this
+ // method gets called quite a bit and we need it to be as fast
+ // as possible.
+ var e = el[ 0 ],
+ ltr = "",
+ re = /ui-(bar|body)-([a-z])\b/,
+ c, m;
+
+ while ( e ) {
+ var c = e.className || "";
+ if ( ( m = re.exec( c ) ) && ( ltr = m[ 2 ] ) ) {
+ // We found a parent with a theme class
+ // on it so bail from this loop.
+ break;
+ }
+ e = e.parentNode;
+ }
+
// Return the theme letter we found, if none, return the
// specified default.
diff --git a/js/jquery.mobile.dialog.js b/js/jquery.mobile.dialog.js
index 4b81899d..1d1ea560 100644
--- a/js/jquery.mobile.dialog.js
+++ b/js/jquery.mobile.dialog.js
@@ -9,20 +9,15 @@
$.widget( "mobile.dialog", $.mobile.widget, {
options: {
closeBtnText : "Close",
- theme : "a",
+ overlayTheme : "a",
initSelector : ":jqmData(role='dialog')"
},
_create: function() {
var self = this,
$el = this.element,
- pageTheme = $el.attr( "class" ).match( /ui-body-[a-z]/ ),
headerCloseButton = $( ""+ this.options.closeBtnText + "" );
- if( pageTheme.length ){
- $el.removeClass( pageTheme[ 0 ] );
- }
-
- $el.addClass( "ui-body-" + this.options.theme );
+ $el.addClass( "ui-overlay-" + this.options.overlayTheme );
// Class the markup for dialog styling
// Set aria role
diff --git a/js/jquery.mobile.forms.select.custom.js b/js/jquery.mobile.forms.select.custom.js
index e6881234..2bccb6ab 100644
--- a/js/jquery.mobile.forms.select.custom.js
+++ b/js/jquery.mobile.forms.select.custom.js
@@ -17,14 +17,14 @@
isMultiple = widget.isMultiple = widget.select[ 0 ].multiple,
buttonId = selectID + "-button",
menuId = selectID + "-menu",
- menuPage = $( "" +
+ menuPage = $( "" +
"" +
"" + label.getEncodedText() + ""+
""+
""+
"" ).appendTo( $.mobile.pageContainer ).page(),
- listbox = $("", { "class": "ui-selectmenu ui-selectmenu-hidden ui-overlay-shadow ui-corner-all ui-body-" + widget.options.overlayTheme + " " + $.mobile.defaultDialogTransition } ).insertAfter(screen),
+ listbox = $("", { "class": "ui-selectmenu ui-selectmenu-hidden ui-overlay-shadow ui-corner-all ui-overlay-" + widget.options.overlayTheme + " " + $.mobile.defaultDialogTransition } ).insertAfter(screen),
list = $( "", {
"class": "ui-selectmenu-list",
@@ -33,9 +33,7 @@
"aria-labelledby": buttonId
}).attr( "data-" + $.mobile.ns + "theme", widget.options.theme ).appendTo( listbox ),
- header = $( "", {
- "class": "ui-header ui-bar-" + widget.options.theme
- }).prependTo( listbox ),
+ header = $( "" ).attr( "data-" + $.mobile.ns + "theme", widget.options.theme ).prependTo( listbox ),
headerTitle = $( "", {
"class": "ui-title"
diff --git a/js/jquery.mobile.navigation.js b/js/jquery.mobile.navigation.js
index 74448c1f..7181ff4a 100755
--- a/js/jquery.mobile.navigation.js
+++ b/js/jquery.mobile.navigation.js
@@ -748,7 +748,17 @@
// to the first page and refers to non-existent embedded page, error out.
if ( page.length === 0 ) {
if ( $.mobile.firstPage && path.isFirstPageUrl( fileUrl ) ) {
- page = $( $.mobile.firstPage );
+ // Check to make sure our cached-first-page is actually
+ // in the DOM. Some user deployed apps are pruning the first
+ // page from the DOM for various reasons, we check for this
+ // case here because we don't want a first-page with an id
+ // falling through to the non-existent embedded page error
+ // case. If the first-page is not in the DOM, then we let
+ // things fall through to the ajax loading code below so
+ // that it gets reloaded.
+ if ( $.mobile.firstPage.parent().length ) {
+ page = $( $.mobile.firstPage );
+ }
} else if ( path.isEmbeddedPage( fileUrl ) ) {
deferred.reject( absUrl, options );
return deferred.promise();
diff --git a/js/jquery.mobile.page.sections.js b/js/jquery.mobile.page.sections.js
index 6e04bfbe..04d77b04 100644
--- a/js/jquery.mobile.page.sections.js
+++ b/js/jquery.mobile.page.sections.js
@@ -24,6 +24,7 @@ $( ":jqmData(role='page'), :jqmData(role='dialog')" ).live( "pagecreate", functi
var $this = $( this ),
role = $this.jqmData( "role" ),
theme = $this.jqmData( "theme" ),
+ contentTheme = theme || o.contentTheme || pageTheme,
$headeranchors,
leftbtn,
rightbtn,
@@ -75,8 +76,8 @@ $( ":jqmData(role='page'), :jqmData(role='dialog')" ).live( "pagecreate", functi
});
} else if ( role === "content" ) {
- if (theme || o.contentTheme) {
- $this.addClass( "ui-body-" + ( theme || o.contentTheme ) );
+ if ( contentTheme ) {
+ $this.addClass( "ui-body-" + ( contentTheme ) );
}
// Add ARIA role
diff --git a/tests/speed/lists-ul-record.php b/tests/speed/lists-ul-record.php
new file mode 100644
index 00000000..a7760956
--- /dev/null
+++ b/tests/speed/lists-ul-record.php
@@ -0,0 +1,429 @@
+
+
+
+
+
+ jQuery Mobile Docs - Lists
+
+
+
+
+
+
+
+
+
+
+
+ 400 item list
+
+
+
+
+
+ - Acura
+ - Audi
+ - BMW
+ - Cadillac
+ - Chrysler
+ - Dodge
+ - Ferrari
+ - Ford
+ - GMC
+ - Honda
+ - Hyundai
+ - Infiniti
+ - Jeep
+ - Kia
+ - Lexus
+ - Mini
+ - Nissan
+ - Porsche
+ - Subaru
+ - Toyota
+ - Acura
+ - Audi
+ - BMW
+ - Cadillac
+ - Chrysler
+ - Dodge
+ - Ferrari
+ - Ford
+ - GMC
+ - Honda
+ - Hyundai
+ - Infiniti
+ - Jeep
+ - Kia
+ - Lexus
+ - Mini
+ - Nissan
+ - Porsche
+ - Subaru
+ - Toyota
+ - Acura
+ - Audi
+ - BMW
+ - Cadillac
+ - Chrysler
+ - Dodge
+ - Ferrari
+ - Ford
+ - GMC
+ - Honda
+ - Hyundai
+ - Infiniti
+ - Jeep
+ - Kia
+ - Lexus
+ - Mini
+ - Nissan
+ - Porsche
+ - Subaru
+ - Toyota
+ - Acura
+ - Audi
+ - BMW
+ - Cadillac
+ - Chrysler
+ - Dodge
+ - Ferrari
+ - Ford
+ - GMC
+ - Honda
+ - Hyundai
+ - Infiniti
+ - Jeep
+ - Kia
+ - Lexus
+ - Mini
+ - Nissan
+ - Porsche
+ - Subaru
+ - Toyota
+ - Acura
+ - Audi
+ - BMW
+ - Cadillac
+ - Chrysler
+ - Dodge
+ - Ferrari
+ - Ford
+ - GMC
+ - Honda
+ - Hyundai
+ - Infiniti
+ - Jeep
+ - Kia
+ - Lexus
+ - Mini
+ - Nissan
+ - Porsche
+ - Subaru
+ - Toyota
+ - Acura
+ - Audi
+ - BMW
+ - Cadillac
+ - Chrysler
+ - Dodge
+ - Ferrari
+ - Ford
+ - GMC
+ - Honda
+ - Hyundai
+ - Infiniti
+ - Jeep
+ - Kia
+ - Lexus
+ - Mini
+ - Nissan
+ - Porsche
+ - Subaru
+ - Toyota
+ - Acura
+ - Audi
+ - BMW
+ - Cadillac
+ - Chrysler
+ - Dodge
+ - Ferrari
+ - Ford
+ - GMC
+ - Honda
+ - Hyundai
+ - Infiniti
+ - Jeep
+ - Kia
+ - Lexus
+ - Mini
+ - Nissan
+ - Porsche
+ - Subaru
+ - Toyota
+ - Acura
+ - Audi
+ - BMW
+ - Cadillac
+ - Chrysler
+ - Dodge
+ - Ferrari
+ - Ford
+ - GMC
+ - Honda
+ - Hyundai
+ - Infiniti
+ - Jeep
+ - Kia
+ - Lexus
+ - Mini
+ - Nissan
+ - Porsche
+ - Subaru
+ - Toyota
+ - Acura
+ - Audi
+ - BMW
+ - Cadillac
+ - Chrysler
+ - Dodge
+ - Ferrari
+ - Ford
+ - GMC
+ - Honda
+ - Hyundai
+ - Infiniti
+ - Jeep
+ - Kia
+ - Lexus
+ - Mini
+ - Nissan
+ - Porsche
+ - Subaru
+ - Toyota
+ - Acura
+ - Audi
+ - BMW
+ - Cadillac
+ - Chrysler
+ - Dodge
+ - Ferrari
+ - Ford
+ - GMC
+ - Honda
+ - Hyundai
+ - Infiniti
+ - Jeep
+ - Kia
+ - Lexus
+ - Mini
+ - Nissan
+ - Porsche
+ - Subaru
+ - Toyota
+ - Acura
+ - Audi
+ - BMW
+ - Cadillac
+ - Chrysler
+ - Dodge
+ - Ferrari
+ - Ford
+ - GMC
+ - Honda
+ - Hyundai
+ - Infiniti
+ - Jeep
+ - Kia
+ - Lexus
+ - Mini
+ - Nissan
+ - Porsche
+ - Subaru
+ - Toyota
+ - Acura
+ - Audi
+ - BMW
+ - Cadillac
+ - Chrysler
+ - Dodge
+ - Ferrari
+ - Ford
+ - GMC
+ - Honda
+ - Hyundai
+ - Infiniti
+ - Jeep
+ - Kia
+ - Lexus
+ - Mini
+ - Nissan
+ - Porsche
+ - Subaru
+ - Toyota
+ - Acura
+ - Audi
+ - BMW
+ - Cadillac
+ - Chrysler
+ - Dodge
+ - Ferrari
+ - Ford
+ - GMC
+ - Honda
+ - Hyundai
+ - Infiniti
+ - Jeep
+ - Kia
+ - Lexus
+ - Mini
+ - Nissan
+ - Porsche
+ - Subaru
+ - Toyota
+ - Acura
+ - Audi
+ - BMW
+ - Cadillac
+ - Chrysler
+ - Dodge
+ - Ferrari
+ - Ford
+ - GMC
+ - Honda
+ - Hyundai
+ - Infiniti
+ - Jeep
+ - Kia
+ - Lexus
+ - Mini
+ - Nissan
+ - Porsche
+ - Subaru
+ - Toyota
+ - Acura
+ - Audi
+ - BMW
+ - Cadillac
+ - Chrysler
+ - Dodge
+ - Ferrari
+ - Ford
+ - GMC
+ - Honda
+ - Hyundai
+ - Infiniti
+ - Jeep
+ - Kia
+ - Lexus
+ - Mini
+ - Nissan
+ - Porsche
+ - Subaru
+ - Toyota
+ - Acura
+ - Audi
+ - BMW
+ - Cadillac
+ - Chrysler
+ - Dodge
+ - Ferrari
+ - Ford
+ - GMC
+ - Honda
+ - Hyundai
+ - Infiniti
+ - Jeep
+ - Kia
+ - Lexus
+ - Mini
+ - Nissan
+ - Porsche
+ - Subaru
+ - Toyota
+ - Acura
+ - Audi
+ - BMW
+ - Cadillac
+ - Chrysler
+ - Dodge
+ - Ferrari
+ - Ford
+ - GMC
+ - Honda
+ - Hyundai
+ - Infiniti
+ - Jeep
+ - Kia
+ - Lexus
+ - Mini
+ - Nissan
+ - Porsche
+ - Subaru
+ - Toyota
+ - Acura
+ - Audi
+ - BMW
+ - Cadillac
+ - Chrysler
+ - Dodge
+ - Ferrari
+ - Ford
+ - GMC
+ - Honda
+ - Hyundai
+ - Infiniti
+ - Jeep
+ - Kia
+ - Lexus
+ - Mini
+ - Nissan
+ - Porsche
+ - Subaru
+ - Toyota
+ - Acura
+ - Audi
+ - BMW
+ - Cadillac
+ - Chrysler
+ - Dodge
+ - Ferrari
+ - Ford
+ - GMC
+ - Honda
+ - Hyundai
+ - Infiniti
+ - Jeep
+ - Kia
+ - Lexus
+ - Mini
+ - Nissan
+ - Porsche
+ - Subaru
+ - Toyota
+ - Acura
+ - Audi
+ - BMW
+ - Cadillac
+ - Chrysler
+ - Dodge
+ - Ferrari
+ - Ford
+ - GMC
+ - Honda
+ - Hyundai
+ - Infiniti
+ - Jeep
+ - Kia
+ - Lexus
+ - Mini
+ - Nissan
+ - Porsche
+ - Subaru
+ - Toyota
+
+
+
+
+
+
diff --git a/tests/speed/lists-ul.html b/tests/speed/lists-ul.html
old mode 100755
new mode 100644
index d0614ea7..11e371bc
--- a/tests/speed/lists-ul.html
+++ b/tests/speed/lists-ul.html
@@ -1,14 +1,14 @@
-
-
+
+
-
- jQuery Mobile Docs - Lists
-
-
+
+ jQuery Mobile Docs - Lists
+
+
-
-
+
+
@@ -17,7 +17,7 @@
-
+
- Acura
- Audi
@@ -425,3 +425,4 @@
+
diff --git a/tests/speed/stats/index.php b/tests/speed/stats/index.php
new file mode 100644
index 00000000..6c3335e3
--- /dev/null
+++ b/tests/speed/stats/index.php
@@ -0,0 +1,34 @@
+query('CREATE TABLE stats (id INTEGER, agent TEXT, point TEXT, value REAL, time TIMESTAMP, PRIMARY KEY (id))');
+
+ // making a sad attempt here to provide a clean REST-respecting url scheme.
+ // stats with a GET returns - wait for it - the stats, and a post with the
+ // the right params will create a new entry
+ if ( $_SERVER['REQUEST_METHOD'] == "GET" ) {
+ $json = Array();
+ $results = $db->query( 'SELECT agent, point, value, time FROM stats' );
+
+ // TODO not sure if there's a better way to convert db results into
+ // a json encodable data structure
+ while($row = $results->fetch(SQLITE3_ASSOC)){
+ array_push($json, $row);
+ }
+
+ header("Content-Type: application/json");
+ echo json_encode($json);
+ } elseif ( $_POST['datapoint'] && $_POST['value'] && $_POST['agent'] ){
+ // TODO it is not clear from the docs if there's an easier way to do the
+ // escaped query interpolation here. Suggestions welcome :(
+ $data_point = sqlite_escape_string( $_POST['datapoint'] );
+ $value = sqlite_escape_string( $_POST['value'] );
+ $agent = sqlite_escape_string( $_POST['agent'] );
+ $db->query('INSERT INTO stats (agent, point, value, time) VALUES ("' . $agent . '", "' . $data_point . '",' . $value . ', DATETIME(\'now\'))');
+
+ echo "success";
+ }
+?>
\ No newline at end of file
diff --git a/tests/speed/stats/perf.js b/tests/speed/stats/perf.js
new file mode 100644
index 00000000..343c0be6
--- /dev/null
+++ b/tests/speed/stats/perf.js
@@ -0,0 +1,39 @@
+window.Perf = (function($, Perf) {
+ $.extend(Perf, {
+ reportUrl: 'stats/',
+ revUrl: 'stats/rev.php',
+
+ // should be defined before report or poll are run
+ currentRev: undefined,
+
+ report: function( data, after ) {
+ var self = this;
+
+ $.post( self.reportUrl, data, after );
+ },
+
+ poll: function() {
+ var self = this;
+
+ setInterval(function() {
+ $.get( self.revUrl, function( data ) {
+
+ // if there's a new revision refresh or currentRev isn't being set
+ if( self.currentRev && self.currentRev !== data ){
+ location.href = location.href;
+ }
+ });
+ }, 60000);
+ },
+
+ setCurrentRev: function() {
+ var self = this;
+
+ $.get( self.revUrl, function( data ) {
+ self.currentRev = data;
+ });
+ }
+ });
+
+ return Perf;
+})(jQuery, window.Perf || {});
diff --git a/tests/speed/stats/rev.php b/tests/speed/stats/rev.php
new file mode 100644
index 00000000..bc6faccb
--- /dev/null
+++ b/tests/speed/stats/rev.php
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/tests/speed/stats/startup.js b/tests/speed/stats/startup.js
new file mode 100644
index 00000000..c3e5bccd
--- /dev/null
+++ b/tests/speed/stats/startup.js
@@ -0,0 +1,41 @@
+(function(Perf) {
+ var $listPage = $( "#list-page" ), firstCounter = 0;
+
+ Perf.setCurrentRev();
+ Perf.pageLoadStart = Date.now();
+
+ $listPage.live( "pagebeforecreate", function() {
+ if( firstCounter == 0 ) {
+ Perf.pageCreateStart = Date.now();
+ firstCounter++;
+ }
+ });
+
+ $listPage.live( "pageinit", function( event ) {
+ // if a child page init is fired ignore it, we only
+ // want the top level page init event
+ if( event.target !== $("#list-page")[0] ){
+ return;
+ }
+
+ Perf.pageLoadEnd = Date.now();
+
+ // report the time taken for a full app boot
+ Perf.report({
+ agent: window.navigator.userAgent,
+ datapoint: "fullboot",
+ value: Perf.pageLoadEnd - Perf.pageLoadStart
+ });
+
+ // record the time taken to load and enhance the page
+ // start polling for a new revision
+ Perf.report({
+ agent: window.navigator.userAgent,
+ datapoint: "pageload",
+ value: Perf.pageCreateStart - Perf.pageLoadStart,
+ after: function() {
+ Perf.poll();
+ }
+ });
+ });
+})(window.Perf);
diff --git a/tests/unit/dialog/dialog_events.js b/tests/unit/dialog/dialog_events.js
index 0e53179f..fb80fa2f 100644
--- a/tests/unit/dialog/dialog_events.js
+++ b/tests/unit/dialog/dialog_events.js
@@ -2,12 +2,20 @@
* mobile dialog unit tests
*/
(function($) {
- module( "jquery.mobile.dialog.js" );
+ module( "jquery.mobile.dialog.js", {
+ setup: function() {
+ $.mobile.page.prototype.options.contentTheme = "d";
+ }
+ });
asyncTest( "dialog hash is added when the dialog is opened and removed when closed", function() {
- expect( 6 );
+ expect( 2 );
$.testHelper.pageSequence([
+ function() {
+ $.mobile.changePage( $( "#mypage" ) );
+ },
+
function() {
//bring up the dialog
$( "#foo-dialog-link" ).click();
@@ -19,12 +27,6 @@
// make sure the dialog came up
ok( /&ui-state=dialog/.test(location.hash), "ui-state=dialog =~ location.hash", "dialog open" );
- // Assert dialog theme inheritance (issue 1375):
- ok( fooDialog.hasClass( "ui-body-b" ), "Expected explicit theme ui-body-b" );
- ok( fooDialog.find( ":jqmData(role=header)" ).hasClass( "ui-bar-a" ), "Expected header to inherit from $.mobile.page.prototype.options.headerTheme" );
- ok( fooDialog.find( ":jqmData(role=content)" ).hasClass( "ui-body-d" ), "Expect content to inherit from $.mobile.page.prototype.options.contentTheme" );
- ok( fooDialog.find( ":jqmData(role=footer)" ).hasClass( "ui-bar-a" ), "Expected footer to inherit from $.mobile.page.prototype.options.footerTheme" );
-
// close the dialog
$( ".ui-dialog" ).dialog( "close" );
},
@@ -35,4 +37,90 @@
}
]);
});
+
+ asyncTest( "dialog element with no theming", function() {
+ expect(4);
+
+ $.testHelper.pageSequence([
+ function() {
+ $.mobile.changePage( $( "#mypage" ) );
+ },
+
+ function() {
+ //bring up the dialog
+ $( "#link-a" ).click();
+ },
+
+ function() {
+ var dialog = $( "#dialog-a" );
+
+ // Assert dialog theme inheritance (issue 1375):
+ ok( dialog.hasClass( "ui-body-c" ), "Expected explicit theme ui-body-c" );
+ ok( dialog.find( ":jqmData(role=header)" ).hasClass( "ui-bar-" + $.mobile.page.prototype.options.footerTheme ), "Expected header to inherit from $.mobile.page.prototype.options.headerTheme" );
+ ok( dialog.find( ":jqmData(role=content)" ).hasClass( "ui-body-" + $.mobile.page.prototype.options.contentTheme ), "Expect content to inherit from $.mobile.page.prototype.options.contentTheme" );
+ ok( dialog.find( ":jqmData(role=footer)" ).hasClass( "ui-bar-" + $.mobile.page.prototype.options.footerTheme ), "Expected footer to inherit from $.mobile.page.prototype.options.footerTheme" );
+
+ start();
+ }
+ ]);
+ });
+
+ asyncTest( "dialog element with data-theme", function() {
+ // Reset fallback theme for content
+ $.mobile.page.prototype.options.contentTheme = null;
+
+ expect(5);
+
+ $.testHelper.pageSequence([
+ function() {
+ $.mobile.changePage( $( "#mypage" ) );
+ },
+
+ function() {
+ //bring up the dialog
+ $( "#link-b" ).click();
+ },
+
+ function() {
+ var dialog = $( "#dialog-b" );
+
+ // Assert dialog theme inheritance (issue 1375):
+ ok( dialog.hasClass( "ui-body-e" ), "Expected explicit theme ui-body-e" );
+ ok( !dialog.hasClass( "ui-overlay-b" ), "Expected no theme ui-overlay-b" );
+ ok( dialog.find( ":jqmData(role=header)" ).hasClass( "ui-bar-" + $.mobile.page.prototype.options.footerTheme ), "Expected header to inherit from $.mobile.page.prototype.options.headerTheme" );
+ ok( dialog.find( ":jqmData(role=content)" ).hasClass( "ui-body-e" ), "Expect content to inherit from data-theme" );
+ ok( dialog.find( ":jqmData(role=footer)" ).hasClass( "ui-bar-" + $.mobile.page.prototype.options.footerTheme ), "Expected footer to inherit from $.mobile.page.prototype.options.footerTheme" );
+
+ start();
+ }
+ ]);
+ });
+
+ asyncTest( "dialog element with data-theme & data-overlay-theme", function() {
+ expect(5);
+
+ $.testHelper.pageSequence([
+ function() {
+ $.mobile.changePage( $( "#mypage" ) );
+ },
+
+ function() {
+ //bring up the dialog
+ $( "#link-c" ).click();
+ },
+
+ function() {
+ var dialog = $( "#dialog-c" );
+
+ // Assert dialog theme inheritance (issue 1375):
+ ok( dialog.hasClass( "ui-body-e" ), "Expected explicit theme ui-body-e" );
+ ok( dialog.hasClass( "ui-overlay-b" ), "Expected explicit theme ui-overlay-b" );
+ ok( dialog.find( ":jqmData(role=header)" ).hasClass( "ui-bar-" + $.mobile.page.prototype.options.footerTheme ), "Expected header to inherit from $.mobile.page.prototype.options.headerTheme" );
+ ok( dialog.find( ":jqmData(role=content)" ).hasClass( "ui-body-" + $.mobile.page.prototype.options.contentTheme ), "Expect content to inherit from $.mobile.page.prototype.options.contentTheme" );
+ ok( dialog.find( ":jqmData(role=footer)" ).hasClass( "ui-bar-" + $.mobile.page.prototype.options.footerTheme ), "Expected footer to inherit from $.mobile.page.prototype.options.footerTheme" );
+
+ start();
+ }
+ ]);
+ });
})( jQuery );
diff --git a/tests/unit/dialog/index.html b/tests/unit/dialog/index.html
index 8318069e..415b1dca 100644
--- a/tests/unit/dialog/index.html
+++ b/tests/unit/dialog/index.html
@@ -33,8 +33,11 @@
-
+
+
+ No theme set
+
+
+ Some text here....
+
+
+ footer
+
+
+
+
+
+ data-nstest-theme set
+
+
+ Some text here....
+
+
+ footer
+
+
+
+
+
+ data-nstest-theme & data-nstest-overlay-theme set
+
+
+ Some text here....
+
+
+ footer
+
+
+