diff --git a/docs/api/globalconfig.html b/docs/api/globalconfig.html index 211448b0..bcae5518 100755 --- a/docs/api/globalconfig.html +++ b/docs/api/globalconfig.html @@ -94,6 +94,9 @@ $(document).bind("mobileinit", function(){
"about/us.html")$("#about")){to: url, data: serialized form data, type: "get" or "post"}{url: url, data: serialized form data, type: "get" or "post"}Using multiple column layouts isn't generally recommended on a mobile device because of the narrow screen width, but there are times where you may need to place small elements side-by-side (like buttons or navigation tabs, for example).
The jQuery Mobile framework provides a simple way to build CSS-based columns through a block style class convention called ui-grid.
There are two preset configurations layouts — two-column (using the class of ui-grid-a), and three-column (using the class of ui-grid-b) — that can be used in any situation that requires columns. Grids are 100% width, completely invisible (no borders or backgrounds) and don't have padding or margins, so they shouldn't interfere with the styles of elements placed inside them.
As you see above, by default grid blocks have no styles for appearance; they simply present content side-by-side.
+As you see above, by default grid blocks have no visual styling; they simply present content side-by-side.
Grid classes can be applied to any container. In this next example, we add ui-grid-a to a fieldset, and apply the ui-block classes to the two buttons inside to stretch them each to 50% of the screen width:
And, grid blocks can adopt presentation styles from the theming system — by adding a height and color swatch reference to the grid blocks, we can achieve this style appearance:
+Theme classes (not data-theme attributes) from the theming system can be added to an element, including grids. On the blocks below, we're adding two classes: ui-bar to add the default bar padding and ui-bar-e to apply the background gradient and font styling for the "e" toolbar theme swatch. For illustration purposes, an inline style="height:120px" attribute is also added to each grid to set each to a standard height.
The other grid layout configuration uses class=ui-grid-b on the parent, and 3 child container elements, each with its respective ui-block-a/b/c class, to create a three-column layout (33/33/33%).
The other grid layout configuration uses class=ui-grid-b on the parent, and 3 child container elements, each with its respective ui-block-a/b/c class, to create a three-column layout (33/33/33%). Note: These blocks are also styled with theme classes so the grid layout is clearly visible.
<div class="ui-grid-b">
@@ -100,7 +101,7 @@
Four-column grids
- A four-column, 25/25/25/25% grid is created by specifying class=ui-grid-c on the parent and adding a fourth block.
+ A four-column, 25/25/25/25% grid is created by specifying class=ui-grid-c on the parent and adding a fourth block. Note: These blocks are also styled with theme classes so the grid layout is clearly visible.
@@ -110,7 +111,7 @@
Five-column grids
- A five-column, 20/20/20/20/20% grid is created by specifying class=ui-grid-d on the parent and adding a fourth block.
+ A five-column, 20/20/20/20/20% grid is created by specifying class=ui-grid-d on the parent and adding a fourth block. Note: These blocks are also styled with theme classes so the grid layout is clearly visible.
diff --git a/docs/lists/lists-themes.html b/docs/lists/lists-themes.html
index 53f459ee..60ddcc70 100755
--- a/docs/lists/lists-themes.html
+++ b/docs/lists/lists-themes.html
@@ -60,13 +60,13 @@
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-divider-theme 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-role="listview" data-inset="true" data-theme="d" data-dividertheme="c">
+<ul data-role="listview" data-inset="true" data-theme="d" data-divider-theme="e">
-
+
- Divider
- Inbox 12
- Outbox 0
@@ -75,13 +75,13 @@
Theming count bubbles
- The theme for count bubbles can be set by adding the data-counttheme to the list and specifying a swatch letter. Here is an example with swatch "e" set on the dividers.
+ The theme for count bubbles can be set by adding the data-count-theme to the list and specifying a swatch letter. Here is an example with swatch "e" set on the dividers.
-<ul data-role="listview" data-inset="true" data-theme="a" data-dividertheme="d" data-counttheme="e">
+<ul data-role="listview" data-inset="true" data-theme="d" data-divider-theme="e" data-count-theme="b">
-
+
- Divider
- Inbox 12
- Outbox 0
@@ -95,15 +95,16 @@
<li data-icon="info"><a href="#">Notices</a></li>
<li data-icon="alert"><a href="#">Alerts</a></li>
-<li data-icon="false"><a href="#">All Notifications</a></li>
+<li data-icon="false"><a href="#">No icon</a></li>
-
+
+
Theming split buttons
@@ -125,14 +126,15 @@
-<ul data-role="listview" data-inset="true" data-splittheme="a">
+<ul data-role="listview" data-inset="true" data-split-theme="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-split-theme 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).
+
-
Broken Bells
- Broken Bells
+ Broken Bells
+
Purchase album
-
@@ -144,27 +146,29 @@
- 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-split-icon 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).
-<ul data-role="listview" data-inset="true" data-splittheme="a" data-spliticon="plus">
+<ul data-role="listview" data-inset="true" data-split-theme="d" data-split-icon="delete">
-
-
+
+ -
+
+ Broken Bells
+ Broken Bells
+
+ Purchase album
+
+ -
+
+ Warning
+ Hot Chip
+
+ Purchase album
+
+
+
Examples of all basic list swatches
diff --git a/docs/pages/docs-pages.html b/docs/pages/docs-pages.html
index 393973d6..45098574 100755
--- a/docs/pages/docs-pages.html
+++ b/docs/pages/docs-pages.html
@@ -116,7 +116,7 @@
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.
- 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.
+ It's important to note if you are linking from a mobile page that was loaded via Ajax to a page that contains 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 conflicts in the hash between these two modes.
For example, a link to a page containing multiple internal pages would look like this:
<a href="multipage.html" rel="external">Multi-page link</a>
diff --git a/docs/pages/multipage-template.html b/docs/pages/multipage-template.html
index 49463f44..28eabb66 100755
--- a/docs/pages/multipage-template.html
+++ b/docs/pages/multipage-template.html
@@ -4,9 +4,11 @@
Page Title
-
-
-
+
+
+
+
+
@@ -40,6 +42,7 @@
Bar
I'm the bar page.
+ Or view an external page from here!
diff --git a/js/jquery.mobile.fixHeaderFooter.js b/js/jquery.mobile.fixHeaderFooter.js
index 7c5ebccb..01e1e6a9 100644
--- a/js/jquery.mobile.fixHeaderFooter.js
+++ b/js/jquery.mobile.fixHeaderFooter.js
@@ -109,9 +109,9 @@ $.fixedToolbars = (function(){
prevFooter = prevPage && prevPage.find( ":jqmData(role='footer')" );
var prevFooterMatches = prevFooter.jqmData( "id" ) === id;
- if( prevFooterMatches ){
+ if( id && prevFooterMatches ){
stickyFooter = footer;
- setTop( stickyFooter.removeClass("fade").appendTo( $.mobile.pageContainer ) );
+ setTop( stickyFooter.removeClass( "fade in out" ).appendTo( $.mobile.pageContainer ) );
}
});
@@ -122,9 +122,9 @@ $.fixedToolbars = (function(){
if( stickyFooter && stickyFooter.length ){
setTimeout(function(){
- setTop( stickyFooter.appendTo( $this ) );
+ setTop( stickyFooter.appendTo( $this ).addClass("fade") );
stickyFooter = null;
- },400);
+ }, 500);
}
$.fixedToolbars.show(true, this);
diff --git a/js/jquery.mobile.forms.checkboxradio.js b/js/jquery.mobile.forms.checkboxradio.js
index 57302388..9280fc4c 100644
--- a/js/jquery.mobile.forms.checkboxradio.js
+++ b/js/jquery.mobile.forms.checkboxradio.js
@@ -102,8 +102,7 @@ $.widget( "mobile.checkboxradio", $.mobile.widget, {
_updateAll: function(){
this._getInputSet().each(function(){
- var dVal = $(this).jqmData("cacheVal");
- if( dVal && dVal !== $(this).is(":checked") || this.inputtype === "checkbox" ){
+ if( $(this).is(":checked") || this.inputtype === "checkbox" ){
$(this).trigger("change");
}
})
diff --git a/js/jquery.mobile.navigation.js b/js/jquery.mobile.navigation.js
index 215d2bb2..607ee5c2 100644
--- a/js/jquery.mobile.navigation.js
+++ b/js/jquery.mobile.navigation.js
@@ -577,12 +577,13 @@
//rewrite src and href attrs to use a base url
if( !$.support.dynamicBaseTag ){
var newPath = path.get( fileUrl );
- to.find('[src],link[href],a[rel="external"],a:jqmData(ajax="none")').each(function(){
+ to.find( "[src], link[href], a[rel='external'], :jqmData(ajax='false'), a[target]" ).each(function(){
var thisAttr = $(this).is('[href]') ? 'href' : 'src',
thisUrl = $(this).attr(thisAttr);
+
//if full path exists and is same, chop it - helps IE out
- thisUrl.replace( location.protocol + '//' + location.host + location.pathname, '' );
+ thisUrl = thisUrl.replace( location.protocol + '//' + location.host + location.pathname, '' );
if( !/^(\w+:|#|\/)/.test(thisUrl) ){
$(this).attr(thisAttr, newPath + thisUrl);
diff --git a/js/jquery.mobile.vmouse.js b/js/jquery.mobile.vmouse.js
index fab2f238..145854a8 100644
--- a/js/jquery.mobile.vmouse.js
+++ b/js/jquery.mobile.vmouse.js
@@ -17,11 +17,8 @@
// the traditional mouse environment, should multiple handlers be registered
// on the same element for different events.
//
-// The current version simply adds mBind and mUnbind to the $.fn space,
-// but we're considering other methods for making this easier. One alternative
-// would be to allow users to use virtual mouse event names, such as
-// "vmousedown", "vmouseup", etc, to triggerVirtualEvent the traditional jQuery special/custom
-// event api, which would then triggerVirtualEvent this same code.
+// The current version exposes the following virtual events to jQuery bind methods:
+// "vmouseover vmousedown vmousemove vmouseup vclick vmouseout vmousecancel"
(function($, window, document, undefined) {