jQuery Mobile is built upon standard, semantic HTML, allowing pages to be accessible to the broadest range of devices possible. For A-Grade browsers, many of the components in jQuery Mobile leverage techniques such as focus management, keyboard navigation, and HTML attributes specified in the W3C's WAI-ARIA specification.
-
+
jQuery Mobile is built upon standard, semantic HTML, allowing pages to be accessible to the broadest range of devices possible. For A-Grade browsers, many of the components in jQuery Mobile leverage techniques such as focus management, keyboard navigation, and HTML attributes specified in the W3C's WAI-ARIA specification.
+
By utilizing these techniques, we do our best to ensure an accessible experience to users with disabilities such as blindness, who may use screen readers (like VoiceOver, on Apple's iPhone device) or other assistive technology to access the web.
-
+
While our accessibility implementation is currently a work in progress, we aim to provide a fully accessible suite of components for version 1.0.
jQuery’s mobile strategy can be summarized simply: A unified user interface system that works seamlessly across all popular mobile device platforms, built on the rock-solid jQuery and jQuery UI foundation. Focused on a lightweight codebase built on progressive enhancement with a flexible, easily themeable design.
The critical difference with our approach is the wide variety of mobile platforms we’re targeting with jQuery Mobile. We’ve been working hard at bringing jQuery support to all mobile browsers that are sufficiently-capable and have at least a nominal amount of market share. In this way, we’re treating mobile web browsers exactly how we treat desktop web browsers.
-
+
To make this broad support possible, all pages in jQuery Mobile are built on a foundation of clean, semantic HTML to ensure compatibility with pretty much any web-enabled device. In devices that interpret CSS and JavaScript, jQuery Mobile applies progressive enhancement techniques to unobtrusively transform the semantic page into a rich, interactive experience that leverages the power of jQuery and CSS. Accessibility features such as WAI-ARIA are tightly integrated throughout the framework to provide support for screen readers and other assistive technologies.
As of Beta 3, we've pretty much covered our target platforms for 1.0. At this stage, jQuery Mobile works on the vast majority of all modern desktop, smartphone, tablet, and e-reader platforms. In addition, feature phones and older browsers are also supported because of our progressive enhancement approach. We're very proud of our commitment to universal accessibility through our broad support for all popular platforms.
@@ -66,9 +66,9 @@
Samsung Bada - The project doesn't currently have test devices or emulators, but current support is known to be fairly good. Support level undecided for 1.0.
Unlike other jQuery projects, such as jQuery and jQuery UI, jQuery Mobile automatically applies many markup enhancements as soon as it loads (long before document.ready event fires). These enhancements are applied based on jQuery Mobile's default configuration, which is designed to work with common scenarios, but may or may not match your particular needs. Fortunately, these settings are easy to configure.
-
+
The mobileinit event
When the jQuery Mobile starts to execute, it triggers a mobileinit event on the document object, to which you can bind to apply overrides to jQuery Mobile's defaults.
Because the mobileinit event is triggered immediately upon execution, you'll need to bind your event handler before jQuery Mobile is loaded. Thus, we recommend linking to your JavaScript files in the following order:
The following defaults are configurable via the $.mobile object:
-
+
-
nsstring, default: ""
+
nsstring, default: ""
The namespace used in data- attributes, for example, data-role. Can be set to anything, including a blank string which is the default. When using, it's clearest if you include a trailing dash, such as "mynamespace-" which maps to data-mynamespace-foo="...".
NOTE: if you're using data- namespacing, you'll need to manually update/override one selector in the theme CSS. The following data selectors should incorporate the namespace you're using:
@@ -81,76 +81,76 @@
Configurable options
-
-
autoInitializePageboolean, default: true
+
+
autoInitializePageboolean, default: true
When the DOM is ready, the framework should automatically call $.mobile.initializePage. If false, page will not initialize, and will be visually hidden until until $.mobile.initializePage is manually called.
-
+
subPageUrlKeystring, 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.
-
-
activePageClassstring, default: "ui-page-active"
+
+
activePageClassstring, default: "ui-page-active"
The class assigned to page currently in view, and during transitions
-
-
-
activeBtnClassstring, default: "ui-btn-active"
+
+
+
activeBtnClassstring, default: "ui-btn-active"
The class used for "active" button state, from CSS framework.
-
-
ajaxEnabledboolean, default: true
+
+
ajaxEnabledboolean, default: true
jQuery Mobile will automatically handle link clicks and form submissions through Ajax, when possible. If false, url hash listening will be disabled as well, and urls will load as regular http requests.
-
hashListeningEnabledboolean, default: true
+
hashListeningEnabledboolean, default: true
jQuery Mobile will automatically listen and handle changes to the location.hash. Disabling this will prevent jQuery Mobile from handling hash changes, which allows you to handle them yourself, or simply to use simple deep-links within a document that scroll to a particular ID.
-
defaultPageTransitionstring, default: 'slide'
+
defaultPageTransitionstring, default: 'slide'
Set the default transition for page changes that use Ajax. Set to 'none' for no transitions by default.
-
-
touchOverflowEnabledboolean, default: false
+
+
touchOverflowEnabledboolean, default: false
Enable pages to have self-contained native scrolling and fixed toolbars in devices that support the overflow-scrolling: touch; property.
-
-
defaultDialogTransitionstring, default: 'pop'
+
+
defaultDialogTransitionstring, default: 'pop'
Set the default transition for dialog changes that use Ajax. Set to 'none' for no transitions by default.
-
minScrollBackstring, default: 150
+
minScrollBackstring, default: 150
Minimum scroll distance that will be remembered when returning to a page.
-
-
loadingMessagestring, default: "loading"
+
+
loadingMessagestring, default: "loading"
Set the text that appears when a page is loading. If set to false, the message will not appear at all.
Note: This feature is deprecated in beta, and will be removed after that. We recommend using CSS3 Media Queries instead.
jQuery Mobile adds classes to the HTML element that mimic browser orientation and common min/max-width CSS media queries. These classes are updated on load, resize and orientationchange, allowing you to key off these classes in your CSS, to create responsive layouts - even in browsers that don't support media queries!
-
+
Orientation Classes
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:
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.
Many plugins in jQuery Mobile leverage these width breakpoints. For example, form elements float beside their labels when the browser is wider than 480 pixels. The CSS to support this behavior for form text inputs looks like this:
To utilize width breakpoints of your own, jQuery Mobile exposes the $.mobile.addResolutionBreakpoints function, which accepts either a single number or array of numbers that will be added to the min/max breakpoints whenever they apply.
-//add a min/max class for 1200 pixel widths
+//add a min/max class for 1200 pixel widths
$.mobile.addResolutionBreakpoints(1200);
-//add min/max classes for 1200, and 1440 pixel widths
+//add min/max classes for 1200, and 1440 pixel widths
$.mobile.addResolutionBreakpoints([1200, 1440]);
-
+
Running Media Queries
jQuery Mobile provides a function that allows you to test whether a particular CSS Media Query applies. Simple call $.mobile.media() and pass a media type or query. If the browser supports that type or query, and it currently applies, the function will return true. If not, it'll return false.
jQuery Mobile exposes several methods and properties on the $.mobile object for use in your applications.
-
+
$.mobile.changePage (method)
Programmatically change from one page to another. This method is used internally for the page loading and transitioning that occurs as a result of clicking a link or submitting a form, when those features are enabled.
-
+
-
+
· Arguments
to (string or object, required)
@@ -39,8 +39,8 @@
Methods
String: Absolute or relative URL. ("about/us.html")
Object: jQuery collection object. ($("#about"))
-
-
+
+
options (object, optional)
Properties:
@@ -50,7 +50,7 @@
Methods
changeHash (boolean, default: true) Decides if the hash in the location bar should be updated.
role (string, default: undefined) The data-role value to be used when displaying the page. By default this is undefined which means rely on the value of the @data-role attribute defined on the element.
pageContainer (jQuery collection, default: $.mobile.pageContainer) Specifies the element that should contain the page.
-
type (string, default: "get") Specifies the method ("get" or "post") to use when making a page request.
+
type (string, default: "get") Specifies the method ("get" or "post") to use when making a page request.
Used only when the 'to' argument of changePage() is a URL.
@@ -68,52 +68,52 @@
Methods
-
+
-
+
Examples:
-//transition to the "about us" page with a slideup transition
-$.mobile.changePage( "about/us.html", { transition: "slideup"} );
+//transition to the "about us" page with a slideup transition
+$.mobile.changePage( "about/us.html", { transition: "slideup"} );
-//transition to the "search results" page, using data from a form with an ID of "search""
+//transition to the "search results" page, using data from a form with an ID of "search""
$.mobile.changePage( "searchresults.php", {
- type: "post",
+ type: "post",
data: $("form#search").serialize()
-});
+});
-//transition to the "confirm" page with a "pop" transition without tracking it in history
+//transition to the "confirm" page with a "pop" transition without tracking it in history
$.mobile.changePage( "../alerts/confirm.html", {
transition: "pop",
reverse: false,
changeHash: false
-});
-
+});
+
-
+
-
-
+
+
$.mobile.loadPage (method)
Load an external page, enhance its content, and insert it into the DOM. This method is called internally by the changePage() function when its first argument is a URL. This function does not affect the current active page so it can be used to load pages in the background. The function returns a deferred promise object that gets resolved after the page has been enhanced and inserted into the document.
-
+
-
+
· Arguments
-
url (string or object, required) A relative or absolute URL.
-
+
url (string or object, required) A relative or absolute URL.
+
options (object, optional)
Properties:
role (string, default: undefined) The data-role value to be used when displaying the page. By default this is undefined which means rely on the value of the @data-role attribute defined on the element.
pageContainer (jQuery collection, default: $.mobile.pageContainer) Specifies the element that should contain the page after it is loaded.
-
type (string, default: "get") Specifies the method ("get" or "post") to use when making a page request.
+
type (string, default: "get") Specifies the method ("get" or "post") to use when making a page request.
data (object or string, default: undefined) The data to send with an Ajax page request.
reloadPage (boolean, default: false) Forces a reload of a page, even if it is already in the DOM of the page container.
@@ -122,28 +122,28 @@
Methods
-
+
-
+
Examples:
-//load the "about us" page into the DOM
-$.mobile.loadPage( "about/us.html" );
+//load the "about us" page into the DOM
+$.mobile.loadPage( "about/us.html" );
-//load a "search results" page, using data from a form with an ID of "search""
+//load a "search results" page, using data from a form with an ID of "search""
$.mobile.loadPage( "searchresults.php", {
- type: "post",
+ type: "post",
data: $("form#search").serialize()
-});
+});
-
+
-
-
+
+
jqmData(), jqmRemoveData() (method)
When working with jQuery Mobile, jqmData and jqmRemoveData should be used in place of jQuery core's data and removeData methods (note that this includes $.fn.data, $.fn.removeData, and the $.data, $.removeData, and $.hasData utilities), as they automatically incorporate getting and setting of namespaced data attributes (even if no namespace is currently in use).
@@ -156,52 +156,52 @@
Methods
-
-
-
+
+
+
$.mobile.showPageLoadingMsg ()
Show the page loading message, which is configurable via $.mobile.loadingMessage.
-
+
Example:
-//cue the page loader
-$.mobile.showPageLoadingMsg();
+//cue the page loader
+$.mobile.showPageLoadingMsg();
-
+
-
-
-
+
+
+
$.mobile.hidePageLoadingMsg ()
Hide the page loading message, which is configurable via $.mobile.loadingMessage.
-
+
Example:
-//cue the page loader
-$.mobile.hidePageLoadingMsg();
+//cue the page loader
+$.mobile.hidePageLoadingMsg();
-
+
-
-
+
+
$.mobile.path.parseUrl (method)
Utility method for parsing a URL and its relative variants into an object that makes accessing the components of the URL easy. When parsing relative variants, the resulting object will contain empty string values for missing components (like protocol, host, etc). Also, when parsing URLs that have no authority, such as tel: urls, the pathname property of the object will contain the data after the protocol/scheme colon.
-
+
-
+
· Arguments
-
url (string, required) A relative or absolute URL.
-
+
url (string, required) A relative or absolute URL.
+
· Return Value
This function returns an object that contains the various components of the URL as strings. The properties on the object mimic the browser's location object:
-
+
hash
The fragment conponent of the URL, including the leading '#' character.
host
@@ -218,31 +218,31 @@
Methods
The protocol for the URL including the trailing ':' character.
search</dt>
The query component of the URL including the leading '?' character.
-
+
But it also contains additional properties that provide access to additional components as well as some common forms of the URL developers access:
-
-
authority
-
The username, password, and host components of the URL
+
+
authority
+
The username, password, and host components of the URL
directory
-
The directory component of the pathname, minus any filename.
-
domain
-
The protocol and authority components of the URL.
-
filename
-
The filename within the pathname component, minus the directory.
-
hrefNoHash
-
The original URL minus the fragment (hash) components.
-
hrefNoSearch
-
The original URL minus the query (search) and fragment (hash) components.
-
password
-
The password contained within the authority component.
-
username
-
The username contained within the authority component.
-
-
-
+
The directory component of the pathname, minus any filename.
+
domain
+
The protocol and authority components of the URL.
+
filename
+
The filename within the pathname component, minus the directory.
+
hrefNoHash
+
The original URL minus the fragment (hash) components.
+
hrefNoSearch
+
The original URL minus the query (search) and fragment (hash) components.
+
password
+
The password contained within the authority component.
+
username
+
The username contained within the authority component.
+
+
+
-
+
Examples:
@@ -269,21 +269,21 @@
Methods
var obj = $.mobile.path.parseUrl("http://jblas:password@mycompany.com:8080/mail/inbox?msg=1234");
-
+
-
-
+
+
$.mobile.path.makePathAbsolute (method)
Utility method for converting a relative file or directory path into an absolute path.
· Arguments
-
relPath (string, required) A relative file or directory path.
-
absPath (string, required) An absolute file or relative path to resolve against.
-
+
relPath (string, required) A relative file or directory path.
+
absPath (string, required) An absolute file or relative path to resolve against.
+
· Return Value
-
This function returns a string that is an absolute version of the relative path passed in.
-
+
This function returns a string that is an absolute version of the relative path passed in.
+
Examples:
@@ -298,20 +298,20 @@
Methods
-
-
+
+
$.mobile.path.makeUrlAbsolute (method)
Utility method for converting a relative URL to an absolute URL.
-
+
Arguments
-
relUrl (string, required) A relative URL.
-
absUrl (string, required) An absolute URL to resolve against.
-
+
relUrl (string, required) A relative URL.
+
absUrl (string, required) An absolute URL to resolve against.
+
Return Value
-
This function returns a string that is an absolute version of the relative URL passed in.
-
+
This function returns a string that is an absolute version of the relative URL passed in.
+
Examples:
@@ -334,22 +334,22 @@
Methods
-
+
-
-
+
+
$.mobile.path.isSameDomain (method)
Utility method for comparing the domain of 2 URLs.
-
+
· Arguments
-
url1 (string, required) A relative URL.
-
url2 (string, required) An absolute URL to resolve against.
-
+
url1 (string, required) A relative URL.
+
url2 (string, required) An absolute URL to resolve against.
+
Return Value
-
This function returns a boolean true if the domains match, false if they don't.
-
+
This function returns a boolean true if the domains match, false if they don't.
+
Examples:
@@ -369,21 +369,21 @@
Methods
-
+
-
-
+
+
$.mobile.path.isRelativeUrl (method)
Utility method for determining if a URL is a relative variant.
-
+
· Arguments
-
url (string, required) A relative or absolute URL.
-
+
url (string, required) A relative or absolute URL.
+
· Return Value
-
This function returns a boolean true if the URL is relative, false if it is absolute.
-
+
This function returns a boolean true if the URL is relative, false if it is absolute.
+
Examples:
@@ -410,21 +410,21 @@
Methods
-
+
-
-
+
+
$.mobile.path.isAbsoluteUrl (method)
Utility method for determining if a URL is absolute.
-
+
· Arguments
-
url (string, required) A relative or absolute URL.
-
+
url (string, required) A relative or absolute URL.
+
· Return Value
-
This function returns a boolean true if the URL is absolute, false if it is absolute.
-
+
This function returns a boolean true if the URL is absolute, false if it is absolute.
+
Examples:
@@ -451,15 +451,15 @@
Methods
-
+
-
-
+
+
$.mobile.base (methods, properties)
Utilities for working with generated base element. TODO: document as public API is finalized.
-
-
-
+
+
+
$.mobile.silentScroll (method)
Scroll to a particular Y position without triggering scroll event listeners.
@@ -468,18 +468,18 @@
Methods
yPos (number, defaults to 0). Pass any number to scroll to that Y location.
-
+
Examples:
-//scroll to Y 100px
-$.mobile.silentScroll(100);
+//scroll to Y 100px
+$.mobile.silentScroll(100);
-
+
-
-
+
+
$.mobile.addResolutionBreakpoints (method)
Add width breakpoints to the min/max width classes that are added to the HTML element.
@@ -488,54 +488,54 @@
Methods
values (number or array). Pass any number or array of numbers to add to the resolution classes. Read more about this feature here: Orientation & resolution targeting.
-
+
Examples:
-//add a 400px breakpoint
-$.mobile.addResolutionBreakpoints(400);
-//add 2 more breakpoints
-$.mobile.addResolutionBreakpoints([600,800]);
+//add a 400px breakpoint
+$.mobile.addResolutionBreakpoints(400);
+//add 2 more breakpoints
+$.mobile.addResolutionBreakpoints([600,800]);
+
-
+
diff --git a/docs/api/themes.html b/docs/api/themes.html
index fe6ed8daec3..433b0e387e6 100755
--- a/docs/api/themes.html
+++ b/docs/api/themes.html
@@ -1,17 +1,17 @@
-
-
+
+
-
- jQuery Mobile Framework - Static Containers, States
-
+
+ jQuery Mobile Framework - Static Containers, States
+
-
-
+
+
@@ -21,35 +21,35 @@
Themes
-
+
Theming overview
-
-
Every layout and widget in jQuery Mobile is designed around a new object-oriented CSS framework that makes it possible to apply a complete unified visual design Theme to sites and applications. The theming system is similar to the ThemeRoller system in jQuery UI, but adds a few important improvements:
-
+
Every layout and widget in jQuery Mobile is designed around a new object-oriented CSS framework that makes it possible to apply a complete unified visual design Theme to sites and applications. The theming system is similar to the ThemeRoller system in jQuery UI, but adds a few important improvements:
+
+
It takes advantage of CSS3 properties to add rounded corners, box and text shadow and gradients instead of images, allowing the theme file to be very lightweight and reducing server requests.
-
Themes include multiple color "swatches" — each consisting of a header bar, content body, and button states that can be freely mixed and matched to create visual texture — to make richer designs possible
-
Open-ended theming allows for up to 26 unique swatches per theme, to add almost unlimited variety to designs
-
All backgrounds now use CSS3 gradients to dramatically reduce file size and number of server requests
-
A simplified icon set including those most commonly used for mobile, in a sprite to reduce image weight
+
Themes include multiple color "swatches" — each consisting of a header bar, content body, and button states that can be freely mixed and matched to create visual texture — to make richer designs possible
+
Open-ended theming allows for up to 26 unique swatches per theme, to add almost unlimited variety to designs
+
All backgrounds now use CSS3 gradients to dramatically reduce file size and number of server requests
+
A simplified icon set including those most commonly used for mobile, in a sprite to reduce image weight
-
-
+
+
Themes & swatches
-
+
The key to the Theme system is separation of color and texture, from structural styles that define things like padding and dimensions. This allows theme colors and textures to be defined once in the stylesheet and be mixed, matched and combined to achieve a wide range of visual effects.
-
+
Each Theme includes several global settings, including font family, drop shadows for overlays, and corner radius values for buttons and boxes. In addition, the Theme can include multiple color "swatches", each with color values for bars, content blocks, buttons and list items, and font text-shadow.
-
+
jQuery Mobile's default Theme includes 5 swatches that are given letters (a, b, c, d, e) for quick reference. To make mapping of color swatches consistent across our widgets, we have followed the convention that swatch "a" is the highest level of visual priority (black in our default theme), "b" is secondary level (blue) and "c" is the baseline level (gray) that we use by default in many situations, "d" for an alternate secondary level and "e" as an accent swatch. Themes may have additional swatches for accent colors or specific situations. For example, you could add a new theme swatch "f" that has a red bar and button for use in error situations.
-
+
A new ThemeRoller tool will launched with the jQuery Mobile 1.0 release in 2011. In the meantime, it's simple to manually edit the base swatches in the default theme and/or add additional swatches by editing the theme css file: copy a block of swatch styles, rename the classes with the new swatch letter name, and tweak colors.
-
-
+
+
Bars
The default theme contains the following five Bar styles:
-
+
Bar A
Bar B
@@ -57,15 +57,15 @@
Bars
Bar D
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.
-
-
-
+
+
+
Content Blocks
The default theme also includes color swatch values for use in content blocks, designed to coordinate with the header color swatches in the theme.
-
-
+
+
Block A
Block B
Block C
@@ -75,7 +75,7 @@
Content Blocks
If a theme isn't specified on a content block, the framework will default to "c" to maximize contrast against the default header "a", as shown here:
By default, any button that's placed in a bar is automatically assigned a swatch letter that matches its parent bar or content box, to visually integrate the button into the parent theme like a chameleon, as shown here:
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.
The jQuery Mobile framework uses a single Theme-level swatch called "active" (bright blue in the default theme) to consistently indicate the selected state, regardless of the individual swatch of the given widget. We apply this in navigation and form controls whenever there is a need to indicate what is currently selected. Because this theme swatch is designed for clear, consistent user feedback, it cannot be overridden via the markup; it is set once in the Theme and applied by the framework whenever a selected or active state is needed. The styling for this state is in the theme stylesheet under the ui-btn-active style rules.
-
+
-
+
Icons
There a core set of standard icons included in the framework that can be assigned to any button. To minimize the download size of the core icons, jQuery Mobile only includes these icons in white and automatically adds a semi-transparent black circle behind the icon to make sure it has good contrast on all background colors.
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.
By adding the data-type="horizontal" attribute to the controlgroup container, you can swap to a horizontal-style group that floats the buttons side-by-side and sets the width to only be large enough to fit the content. (Be aware that these will wrap to multiple lines if the number of buttons or the overall text length is too wide for the screen.)
-
+
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:
-
+
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:
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":
@@ -108,11 +108,11 @@
Icon positioning
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.
-
-
+
+
Icons and themes
The semi-transparent black circle behind the white icon ensures good contrast on any background color so it works well with the jQuery Mobile theming system. Here are examples of the same icons sitting on top of a range of different color swatches in out theme.
If you have multiple buttons that should sit side-by-side on the same line, add the data-inline="true" attribute to each button. 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 want buttons to sit side-by-side but stretch to fill the width of the screen, you can use the content column grids to put normal full-width buttons into 2- or 3-columns.
-
-
+
+
If you want buttons to sit side-by-side but stretch to fill the width of the screen, you can use the content column grids to put normal full-width buttons into 2- or 3-columns.
jQuery Mobile has a rich theming system that gives you full control of how buttons are styled. When a link is added to a container, it is automatically assigned a theme swatch letter that matches it's parent bar or content box to visually integrate the button into the parent container, like a chameleon. So a button placed inside a content container with a theme of "a" (black in the default theme) will be automatically assigned the button theme of "a" (charcoal in the default theme). Here are examples of the button theme pairings in the default theme. All buttons have the same HTML markup:
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.
Buttons that are used for navigation should be coded as anchor links, and those that submit forms as button elements — each will be styled identically by the framework.
-
+
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:
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.
Collapsible sets start with the exact same markup as individual collapsibles. By adding a parent wrapper with a data-role="collapsible-set" attribute around a number of collapsibles, the framework will style these to looks like a visually grouped widget and make it behave like an accordion so only one section can be open at a time.
By default, all the sections will be collapsed. To set a section to be open when the page loads, add the data-collapsed="false" attribute to the heading of the section you want expanded.
-
+
<div data-role="collapsible-set">
<div data-role="collapsible" data-collapsed="false">
<h3>Section A</h3>
<p>I'm the collapsible set content for section B.</p>
</div>
-
+
<div data-role="collapsible">
<h3>Section B</h3>
<p>I'm the collapsible set content for section B.</p>
</div>
-
+
</div>
-
-
+
+
Here is an example of a collapsible set with 5 sections.
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.
-
+
After the header, add any HTML markup you want to be collapsible. The framework will wrap this markup in a container that will be hidden/shown when the heading is clicked.
-
+
<div data-role="collapsible">
<h3>I'm a header</h3>
<p>I'm the collapsible content. By default I'm open and displayed on the page, but you can click the header to hide me.</p>
</div>
-
-
+
+
I'm a header
@@ -46,35 +46,35 @@
I'm a header
As the example notes, by default the content will be collapsed. To expand the content when the page loads, add the data-collapsed="false" attribute to the wrapper.
This code will create a collapsible widget like this:
-
+
I'm a header
I'm the collapsible content. I'm expanded by default because I have the "collapsed" state set to false; you need to expand the header to see me.
-
+
Collapsible content is minimally styled — we add only a bit of margin between the bar and content, and the header adopts the default Theme styles of the container it sits within.
Collapsible example
This page has 4 collapsible containers with different types of content inside.
-
+
Section 1: Collapsed text block
I'm closed when the page loads because I have the data-collapsed="true" attribute on my container.
I'm the collapsible content. I'm the collapsible content. I'm the collapsible content. I'm the collapsible content. I'm the collapsible content. I'm the collapsible content. I'm the collapsible content.
-
+
Section 2: Expanded on load
I'm closed when the page loads because I don't have the data-collapsed="false" attribute on my container.
I'm the collapsible content. I'm the collapsible content. I'm the collapsible content. I'm the collapsible content. I'm the collapsible content. I'm the collapsible content.
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.
-
+
Two column grids
To build a two-column (50/50%) layout, start with a container with a class of ui-grid-a, and add two child containers inside it classed with ui-block-a for the first column and ui-block-b for the second:
@@ -40,33 +40,33 @@
Two column grids
-
+
The above markup produces the following content layout:
-
+
I'm Block A and text inside will wrap.
I'm Block B and text inside will wrap.
-
+
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:
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.
-
+
Block A
Block B
@@ -74,7 +74,7 @@
Two column grids
Three-column grids
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.
This will produce a 33/33/33% grid for our content.
-
+
Block A
Block B
Block C
-
+
And an example of a 3 column grid with buttons inside:
-
+
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. Note: These blocks are also styled with theme classes so the grid layout is clearly visible.
-
+
A
B
C
D
-
+
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. Note: These blocks are also styled with theme classes so the grid layout is clearly visible.
-
+
A
B
@@ -120,11 +120,11 @@
Five-column grids
D
E
-
+
Multiple row grids
-
+
Grids are designed to wrap to multiple rows of items. For example, if you specify a 3-column grid (ui-grid-b) on a container that has nine child blocks, it will wrap to 3 rows of 3 items each. There is a CSS rule to clear the floats and start a new line when the class=ui-block-a is seen so make sure to assign block classes in a repeating sequence (a, b, c, a, b, c, etc.) that maps to the grid type:
The default approach to styling content in jQuery Mobile is simple: Use a light hand. Our goal is to let the browser's native rendering take precedence; we add a bit of padding for more comfortable readability, and use the theming system to apply the font family and colors.
Taking a light hand with content styling gives designers and developers a clean slate to work with, instead of fighting against a lot of complex style overhead.
-
+
Default HTML markup styling
By default, jQuery Mobile themes use standard HTML styles and sizes for standard markup elements like headers, paragraph content, block quotes, anchor links, standard ordered, unordered and definition lists, and tables — as shown in the examples below:
-
+
H1 Heading
H2 Heading
H3 Heading
H4 Heading
H5 Heading
H6 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.
-
+
How about some blockquote action with a cite
-
+
This is another paragraph of text so you can see how HTML markup works in content. This is another paragraph of text so you can see how HTML markup works in content. This is another paragraph of text so you can see how HTML markup works in content.
-
+
We add a few styles to tables and fieldsets to make them more legible, which are easily overridden with customs styles.
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.)
-
+
<div data-role="page" data-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.
The content of pages in jQuery Mobile is completely open-ended, but the jQuery Mobile framework provides a number of helpful tools and widgets — such as collapsible panels and multiple-column grid layouts — to make it easy to format your content for mobile devices.
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.
@@ -75,7 +75,7 @@
Vertically grouped checkboxes
-
+
@@ -83,9 +83,9 @@
Vertically grouped checkboxes
-
+
Horizontal toggle sets
-
+
Checkboxes can also be used for grouped button sets where more than one button can be selected at once, such as the bold, italic and underline button group seen in word processors. To make a horizontal button set, add the data-type="horizontal" to the fieldset.
@@ -93,7 +93,7 @@
Horizontal toggle sets
The framework will float the labels so they sit side-by-side on a line, hide the checkbox icons and only round the left and right edges of the group.
-
+
Refreshing a checkbox
-
+
If you manipulate a radiobutton via JavaScript, you must call the refresh method on it to update the visual styling. Here is an example:
-
+
diff --git a/docs/forms/forms-sample.html b/docs/forms/forms-sample.html
index ce964e87491..6704438fe15 100755
--- a/docs/forms/forms-sample.html
+++ b/docs/forms/forms-sample.html
@@ -1,17 +1,17 @@
-
-
+
+
-
- jQuery Mobile Docs - Sample Form Submit
-
+
+ jQuery Mobile Docs - Sample Form Submit
+
-
-
+
+
@@ -22,13 +22,13 @@
Forms
-
+
Ajax form submission
In jQuery Mobile, form submissions are automatically handled using Ajax whenever possible, creating a smooth transition between the form and the result page. To ensure your form submits as intended, be sure to specify action and method properties on your form element. When unspecified, the method will default to get, and the action will default to the current page's relative path (found via $.mobile.path.get()
Forms also accept attributes for transitions just like anchors, such as data-transition="pop" and data-direction="reverse". To submit a form without Ajax, you can either disable Ajax form handling globally, or per form via the data-ajax="false" attribute. The target attribute (as in target="_blank") is respected on forms as well, and will default to the browser's handling of that target when the form submits. Note that unlike anchors, the rel attribute is not allowed on forms.
-
-
+
+
Default Ajax form example
This demonstrates automated ajax handling of form submissions. The form below is configured to send regular a get request to forms-sample-response.php. On submit, jQuery Mobile will make sure that the Url specified is able to be retrieved via Ajax, and handle it appropriately. Keep in mind that just like ordinary HTTP form submissions, jQuery Mobile allows get result pages to be bookmarked by updating the Url hash when the response returns successfully. Also like ordinary form submissions, post requests do not contain query parameters in the hash, so they are not bookmarkable.
-
+
Non-Ajax form example
-
+
To prevent form submissions from being automatically handled with Ajax, add the data-ajax="false" attribute to the form element. You can also turn of Ajax form handling completely via the ajaxEnabledglobal config option.
-
+
The form below is identical to the one above except for the addition of the data-ajax="false" attribute attribute. When the submit button is pressed, it will result in a full page refresh.
-
+
diff --git a/docs/forms/forms-themes.html b/docs/forms/forms-themes.html
index f887b6039ed..991ee33389f 100755
--- a/docs/forms/forms-themes.html
+++ b/docs/forms/forms-themes.html
@@ -1,17 +1,17 @@
-
-
+
+
-
- jQuery Mobile Docs - Theming Forms
-
+
+ jQuery Mobile Docs - Theming Forms
+
-
-
+
+
@@ -22,35 +22,35 @@
Theming forms
-
+
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-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.
-
-
+
+
Body swatch A
-
+
-
+
+
-
+
-
-
+
+
-
+
-
+
-
+
-
+
Body swatch B
@@ -107,7 +107,7 @@
Body swatch B
+
@@ -126,7 +126,7 @@
Body swatch B
-
+
@@ -157,7 +157,7 @@
Body swatch B
-
+
@@ -174,7 +174,7 @@
Body swatch C
+
@@ -193,7 +193,7 @@
Body swatch C
-
+
@@ -224,11 +224,11 @@
Body swatch C
-
+
-
-
-
+
+
+
Body swatch D
@@ -242,7 +242,7 @@
Body swatch D
+
@@ -261,7 +261,7 @@
Body swatch D
-
+
@@ -292,7 +292,7 @@
Body swatch D
-
+
@@ -309,7 +309,7 @@
Body swatch E
+
@@ -328,7 +328,7 @@
Body swatch E
-
+
@@ -359,12 +359,12 @@
Body swatch E
-
+
-
-
+
+
@@ -391,7 +391,7 @@
More in this section
-
+
diff --git a/docs/forms/index.html b/docs/forms/index.html
index 7cf7e2f5c05..7705d86a7b9 100755
--- a/docs/forms/index.html
+++ b/docs/forms/index.html
@@ -1,17 +1,17 @@
-
-
+
+
-
- jQuery Mobile Docs - Forms
-
+
+ jQuery Mobile Docs - Forms
+
-
-
+
+
@@ -21,9 +21,9 @@
Form elements
-
+
All form elements begin with standard html controls that are enhanced to make them more attractive and easy-to-use. In browsers that don't support the custom controls, they will still have a usable experience because these are all based on native form elements.
+
+
diff --git a/docs/forms/plugin-eventsmethods.html b/docs/forms/plugin-eventsmethods.html
index f2ab181e930..51520560628 100755
--- a/docs/forms/plugin-eventsmethods.html
+++ b/docs/forms/plugin-eventsmethods.html
@@ -1,17 +1,17 @@
-
-
+
+
-
- jQuery Mobile Docs - Form Plugin Methods
-
+
+ jQuery Mobile Docs - Form Plugin Methods
+
-
-
+
+
@@ -24,155 +24,155 @@
Form Plugin Methods
Form methods reference
After jQuery Mobile auto-enhances form controls into custom controls, you can manipulate many of their properties via plugin methods. The currently available methods are listed below. Check Github for updates - we're working on complete coverage.
refresh: Update the custom menu to reflect the native select element's value.
If the number of options in the select are different than the number of items in the custom menu, it'll rebuild the custom menu. Also, if you pass a true argument you can force the rebuild to happen.
-//refresh value
+//refresh value
$('select').selectmenu('refresh');
//refresh and force rebuild
$('select').selectmenu('refresh', true);
jQuery Mobile degrades several HTML5 input types back to type=text, or type=number after adding enhanced controls. For example, inputs with a type of range are enhanced with a custom slider control, and their type is set to number to offer a usable form input alongside that slider. Inputs with a type of search are degraded back to type=text after we add our own themable search input styling.
The page plugin contains a list of input types that are set to either true which means they'll degrade to type=text, false which means they'll be left alone, or a string such as "number", which means they'll be converted to that type (such as the case of type=range).
-
-
You can configure which types are changed via the page plugin's degradeInputs option, which can be manipulated externally via $.mobile.page.prototype.options.degradeInputs, which has properties: color, date, datetime, "datetime-local", email, month, number, range, search, tel, time, url, and week. Be sure to configure this 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.
-
+
+
You can configure which types are changed via the page plugin's degradeInputs option, which can be manipulated externally via $.mobile.page.prototype.options.degradeInputs, which has properties: color, date, datetime, "datetime-local", email, month, number, range, search, tel, time, url, and week. Be sure to configure this 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.
The radio button plugin has the following custom events:
-
+
create triggered when a radio button is created
This event is used to find out when a custom radio button was created. It is not used to create a custom radio button. The radio button create event can be used like this:
Lists are used for data display, navigation, result lists, and data entry so jQuery Mobile includes a wide range of list types and formatting examples to cover most common design patterns.
Here is a variety of full-width lists that are read-only. If a list has the data-role="listview" attribute, but the contents aren't linked, it will display as read-only. These look like normal lists, but don't have a right arrow.
-
+
All the standard button swatches can be applied to lists. The framework assigns a default list theme swatch of "c" (silver in the default theme) and swatch "b" (blue in default theme) for dividers. Below is a default themed list.
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 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.
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.
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 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).
diff --git a/docs/pages/docs-links-urltest/index.html b/docs/pages/docs-links-urltest/index.html
index 1d1d67dc48b..4574f204f50 100644
--- a/docs/pages/docs-links-urltest/index.html
+++ b/docs/pages/docs-links-urltest/index.html
@@ -1,17 +1,17 @@
-
-
+
+
-
- jQuery Mobile Framework - Test URL Example
-
+
+ jQuery Mobile Framework - Test URL Example
+
-
-
+
+
diff --git a/docs/pages/dynamic-samples/sample-reuse-page-external.html b/docs/pages/dynamic-samples/sample-reuse-page-external.html
index 4ade5896511..49dd2b1b3ff 100644
--- a/docs/pages/dynamic-samples/sample-reuse-page-external.html
+++ b/docs/pages/dynamic-samples/sample-reuse-page-external.html
@@ -19,53 +19,53 @@
if ( category ) {
// Get the page we are going to dump our content into.
var $page = $( "#category-items" ),
-
+
// Get the header for the page.
$header = $page.children( ":jqmData(role=header)" ),
-
+
// Get the content area element for the page.
$content = $page.children( ":jqmData(role=content)" ),
-
+
// The markup we are going to inject into the content
// area of the page.
markup = "
" + category.description + "
",
-
+
// The array of items for this category.
cItems = category.items,
-
+
// The number of items in the category.
numItems = cItems.length;
-
+
// Generate a list item for each item in the category
// and add it to our markup.
for ( var i = 0; i < numItems; i++ ) {
markup += "
" + cItems[i].name + "
";
}
markup += "
";
-
+
// Find the h1 element in our header and inject the name of
// the category into it.
$header.find( "h1" ).html( category.name );
-
+
// Inject the category items markup into the content element.
$content.html( markup );
-
+
// Pages are lazily enhanced. We call page() on the page
// element to make sure it is always enhanced before we
// attempt to enhance the listview markup we just injected.
// Subsequent calls to page() are ignored since a page/widget
// can only be enhanced once.
$page.page();
-
+
// Enhance the listview we just injected.
$content.find( ":jqmData(role=listview)" ).listview();
-
+
// We don't want the data-url of the page we just modified
// to be the url that shows up in the browser's location field,
// so set the dataUrl option to the URL for the category
// we just loaded.
options.dataUrl = url;
-
+
// Now call changePage() and tell it to switch to
// the page we just modified.
$.mobile.changePage( $page, options );
@@ -73,7 +73,7 @@
});
}
-
+
// Listen for any attempts to call changepage.
$(document).bind( "pagebeforechange", function( e, data ) {
// We only want to handle changepage calls where the caller is
diff --git a/docs/pages/dynamic-samples/sample-reuse-page.html b/docs/pages/dynamic-samples/sample-reuse-page.html
index 0f7e9297818..29fecbe22f4 100644
--- a/docs/pages/dynamic-samples/sample-reuse-page.html
+++ b/docs/pages/dynamic-samples/sample-reuse-page.html
@@ -147,7 +147,7 @@
}
}
-
+
// Listen for any attempts to call changepage.
$(document).bind( "pagebeforechange", function( e, data ) {
// We only want to handle changepage calls where the caller is
diff --git a/docs/pages/index.html b/docs/pages/index.html
index 783e3842ec2..ed92cebf6d5 100755
--- a/docs/pages/index.html
+++ b/docs/pages/index.html
@@ -1,17 +1,17 @@
-
-
+
+
-
- jQuery Mobile Docs - Pages
-
+
+ jQuery Mobile Docs - Pages
+
-
-
+
+
@@ -24,7 +24,7 @@
Pages
jQuery Mobile includes automatic AJAX page loading of external pages with back button history support, a set of animated page transitions and simple tools for displaying pages as dialogs.
I have an id of "one" on my page container. I'm first in the source order so I'm shown when the page loads.
-
-
This is a multi-page boilerplate template that you can copy to build you first jQuery Mobile page. This template contains multiple "page" containers inside, unlike a single page template that has just one page within it.
+
+
I have an id of "one" on my page container. I'm first in the source order so I'm shown when the page loads.
+
+
This is a multi-page boilerplate template that you can copy to build you first jQuery Mobile page. This template contains multiple "page" containers inside, unlike a single page template that has just one page within it.
Just view the source and copy the code to get started. All the CSS and JS is linked to the jQuery CDN versions so this is super easy to set up. Remember to include a meta viewport tag in the head to set the zoom level.
-
You link to internal pages by referring to the ID of the page you want to show. For example, to link to the page with an ID of "two", my link would have a href="#two" in the code.
+
You link to internal pages by referring to the ID of the page you want to show. For example, to link to the page with an ID of "two", my link would have a href="#two" in the code.
I have an id of "two" on my page container. I'm the second page container in this multi-page template.
-
Notice that the theme is different for this page because we've added a few data-theme swatch assigments here to show off how flexible it is. You can add any content or widget to these pages, but we're keeping these simple.
I have an id of "two" on my page container. I'm the second page container in this multi-page template.
+
Notice that the theme is different for this page because we've added a few data-theme swatch assigments here to show off how flexible it is. You can add any content or widget to these pages, but we're keeping these simple.
I have an id of "popup" on my page container and only look like a dialog because the link to me had a data-rel="dialog" attribute which gives me this inset look and a data-transition="pop" attribute to change the transition to pop. Without this, I'd be styled as a normal page.
I have an id of "popup" on my page container and only look like a dialog because the link to me had a data-rel="dialog" attribute which gives me this inset look and a data-transition="pop" attribute to change the transition to pop. Without this, I'd be styled as a normal page.
diff --git a/docs/pages/page-anatomy.html b/docs/pages/page-anatomy.html
index d0b711555df..7cef951d469 100644
--- a/docs/pages/page-anatomy.html
+++ b/docs/pages/page-anatomy.html
@@ -1,17 +1,17 @@
-
-
+
+
-
- jQuery Mobile Docs - Anatomy of a Page
-
+
+ jQuery Mobile Docs - Anatomy of a Page
+
-
-
+
+
@@ -21,80 +21,80 @@
Anatomy of a Page
-
-
The jQuery Mobile "page" structure is optimized to support either single pages, or local internal linked "pages" within a page.
-
-
The goal of this model is to allow developers to create websites using best practices — where ordinary links will "just work" without any special configuration — while creating a rich, native-like experience that can't be achieved with standard HTTP requests.
+
+
The jQuery Mobile "page" structure is optimized to support either single pages, or local internal linked "pages" within a page.
-
Mobile page structure
+
The goal of this model is to allow developers to create websites using best practices — where ordinary links will "just work" without any special configuration — while creating a rich, native-like experience that can't be achieved with standard HTTP requests.
-
A jQuery Mobile site must start with an HTML5 'doctype' to take full advantage of all of the framework's features. (Older devices with browsers that don't understand HTML5 will safely ignore the 'doctype' and various custom attributes.) In the 'head', references to jQuery, jQuery Mobile and the mobile theme CSS are all required to start things off. We recommend linking to the files hosted on the jQuery CDN for best performance:
+
Mobile page structure
+
+
A jQuery Mobile site must start with an HTML5 'doctype' to take full advantage of all of the framework's features. (Older devices with browsers that don't understand HTML5 will safely ignore the 'doctype' and various custom attributes.) In the 'head', references to jQuery, jQuery Mobile and the mobile theme CSS are all required to start things off. We recommend linking to the files hosted on the jQuery CDN for best performance:
Note above that there is a meta viewport tag in the head to specify how the browser should display the page zoom level and dimensions. If this isn't set, many mobile browsers will use a "virtual" page width around 900 pixels to make it work well with exisitng desktop sites but the screens may look zoomed out and too wide. By setting the viewport attributes to content="width=device-width, initial-scale=1, the width will be set to the pixel width of the device screen.
These settings do not disable the user's ability to zoom the pages which is nice from an accessibility perspective. There is a minor issue in iOS that doesn't properly set the width when changing orientations with these viewport settings, but this will hopefully be fixed a a future release. You can set other viewport values to disable zooming if required since this is part of your page content, not the library.
-
+
Inside the body: Pages
-
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-role="page" attribute:
-
-
<div data-role="page">
+
+
<div data-role="page">
...
-</div>
-
-
+</div>
+
+
-
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-roles of "header", "content", and "footer".
+
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-roles of "header", "content", and "footer".
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.
-
-
Here is an example of a 2 "page" site built with two jQuery Mobile divs navigated by linking to an ID placed on each page wrapper. Note that the IDs on the page wrappers are only needed to support the internal page linking, and are optional if each page is a separate HTML document. Here is what two pages look inside the body element.
+
Multi-page template structure
+
+
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.
+
+
Here is an example of a 2 "page" site built with two jQuery Mobile divs navigated by linking to an ID placed on each page wrapper. Note that the IDs on the page wrappers are only needed to support the internal page linking, and are optional if each page is a separate HTML document. Here is what two pages look inside the body element.
-<body>
+<body>
<!-- Start of first page -->
<div data-role="page" id="foo">
@@ -134,9 +134,9 @@
Multi-page template structure
<h1>Foo</h1>
</div><!-- /header -->
- <div data-role="content">
- <p>I'm first in the source order so I'm shown as the page.</p>
- <p>View internal page called <a href="#bar">bar</a></p>
+ <div data-role="content">
+ <p>I'm first in the source order so I'm shown as the page.</p>
+ <p>View internal page called <a href="#bar">bar</a></p>
</div><!-- /content -->
<div data-role="footer">
@@ -152,9 +152,9 @@
Multi-page template structure
<h1>Bar</h1>
</div><!-- /header -->
- <div data-role="content">
- <p>I'm first in the source order so I'm shown as the page.</p>
- <p><a href="#foo">Back to foo</a></p>
+ <div data-role="content">
+ <p>I'm first in the source order so I'm shown as the page.</p>
+ <p><a href="#foo">Back to foo</a></p>
</div><!-- /content -->
<div data-role="footer">
@@ -162,25 +162,25 @@
PLEASE NOTE: Since we are using the hash to track navigation history for all the Ajax 'pages', it's not currently possible to deep link to an anchor (index.html#foo) on a page in jQuery Mobile, because the framework will look for a 'page' with an ID of #foo instead of the native behavior of scrolling to the content with that ID.
-
-
+
+
Conventions, not requirements
Although the page structure outlined above is a recommended approach for a standard web app built with jQuery Mobile, the framework is very flexible with document structure. The page, header, content, and footer data-role elements are optional and are mostly helpful for providing some basic formatting and structure. The page wrapper used to be required for auto-initialization to work but this too is now optional for single page documents so there isn't any required markup at all. For a web page with a custom layout, all of these structural elements can be omitted but the Ajax navigation and all widgets will work just like they do in the boilerplate structure. Behind the scenes, the framework will inject the page wrapper if it's not included in the markup because it’s needed for managing pages, but the starting markup can now be extremely simple.
Note that in a multi-page setup, you are required to have page wrappers in your markup in order to group the content into multiple pages.
Usually, it's a good idea to store your app's pages in several single-page templates instead of one large multi-page template. This minimizes the size of the page's DOM.
When using single-page templates, you can prefetch pages into the DOM so that they're available instantly when the user visits them. To prefetch a page, add the data-prefetch attribute to a link that points to the page. jQuery Mobile then loads the target page in the background after the primary page has loaded and the pagecreate event has triggered. For example:
Another advantage of prefetching a page is that the user doesn't see the Ajax loading message when visiting the prefetched page. The Ajax loading message only appears if the framework hasn't finished prefetching the page by the time the link is followed.
+
+
Another advantage of prefetching a page is that the user doesn't see the Ajax loading message when visiting the prefetched page. The Ajax loading message only appears if the framework hasn't finished prefetching the page by the time the link is followed.
Prefetching pages naturally creates additional HTTP requests and uses bandwidth, so it's wise to use this feature only in situations where it's highly likely that the prefetched page will be visited. A common scenario is a photo gallery, where you can prefetch the "previous" and "next" photo pages so that the user can move quickly between photos.
@@ -52,7 +52,7 @@
DOM size management
For animated page transitions to work, the pages you're transitioning from and to both need to be in the DOM. However, keeping old pages in the DOM quickly fills the browser's memory, and can cause some mobile browsers to slow down or even crash.
jQuery Mobile therefore has a simple mechanism to keep the DOM tidy. Whenever it loads a page via Ajax, jQuery Mobile flags the page to be removed from the DOM when you navigate away from it later (technically, on the pagehide event). If you revisit a removed page, the browser may be able to retrieve the page's HTML file from its cache. If not, it refetches the file from the server. (In the case of nested list views, jQuery Mobile removes all the pages that make up the nested list once you navigate to a page that's not part of the list.)
-
+
Pages inside a multi-page template aren't affected by this feature at all - jQuery Mobile only removes pages loaded via Ajax.
@@ -81,7 +81,7 @@
Caching pages in the DOM
The drawback of DOM caching is that the DOM can get very large, resulting in slowdowns and memory issues on some devices. If you enable DOM caching, take care to manage the DOM yourself and test thoroughly on a range of devices.
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".
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').
-
+
Setting the close button text
Just like the page plugin, you can set a dialog's close button text through option or data attribute. The option can be configured for all dialogs by binding to the mobileinit event and setting the $.mobile.dialog.prototype.options.closeBtnText property to a string of your choosing, or you can place the data attribute data-close-btn-text to configure the text from your markup.
-
+
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.
-
+
Styling & theming
Dialogs can be styled with different themes, just like any page. Here is a different dialog design:
jQuery Mobile is designed to work with simple page linking conventions. Essentially, you can link pages and assets as you normally would, and jQuery Mobile will automatically handle page requests in a single-page model, using Ajax when possible. When Ajax isn't possible (such as a non-same-domain url, or if specified using certain attributes on the link), a normal http request is used instead.
-
The goal of this model is to allow developers to create websites using best practices — where ordinary links will "just work" without any special configuration — while creating a rich, native-like experience that can't be achieved with standard HTTP requests.
-
-
Default link behavior: Ajax
-
+
jQuery Mobile is designed to work with simple page linking conventions. Essentially, you can link pages and assets as you normally would, and jQuery Mobile will automatically handle page requests in a single-page model, using Ajax when possible. When Ajax isn't possible (such as a non-same-domain url, or if specified using certain attributes on the link), a normal http request is used instead.
+
+
The goal of this model is to allow developers to create websites using best practices — where ordinary links will "just work" without any special configuration — while creating a rich, native-like experience that can't be achieved with standard HTTP requests.
+
+
Default link behavior: Ajax
+
To enable animated page transitions, all links that point to an external page (ex. products.html) will be loaded via Ajax. To do this unobtrusively, the framework parses the link's href to formulate an Ajax request (Hijax) and displays the loading spinner. All this happens automatically by jQuery Mobile.
-
+
If the Ajax request is successful, the new page content is added to the DOM, all mobile widgets are auto-initialized, then the new page is animated into view with a page transition.
-
+
If the Ajax request fails, the framework will display a small error message overlay (styled in the "e" swatch) that disappears after a brief time so this doesn't break the navigation flow. View an example of the error message.
Linking without Ajax
-
+
Links that point to other domains or that have rel="external", data-ajax="false" or target attributes will not be loaded with Ajax. Instead, these links and will cause a full page refresh with no animated transition. Both attributes have the same effect, but different semanic meaning. rel="external" should be used when linking to another site or domain, while data-ajax="false" is useful for simply opting a page within your domain from being loaded via Ajax. Because of security restrictions, the framework always opts links to external domains out of the Ajax behavior.
-
-
Linking within a multi-page document
-
-
A single HTML document can contain or multiple 'page' containers simply be 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.
-
+
+
Linking within a multi-page document
+
+
A single HTML document can contain or multiple 'page' containers simply be 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.
+
If a link in a multi-page document points to an anchor (#foo), the framework will looks for a page wrapper with that ID (id="foo"). If it finds a page in the HTML document, it will transition the new page into view. You can seamlessly navigate between local, internal "pages" and external pages in jQuery Mobile. Both will look the same to the end user except that external pages will display the Ajax spinner while loading. In either situation, jQuery Mobile updates the page's URL hash to enable Back button support, deep-linking and bookmarking.
-
+
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:
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.
-
-
+
+
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.
-
+
However, you can work around this issue by returning your page div with a data-url attribute already specified. When you do this, jQuery Mobile will use that attribute's value for updating the URL, instead of the url used to request that page. This also allows you to return urls that change as the result of a redirect, for example, you might post a form to "/login.html" but return a page from the url "/account" after a successful submission. This tool allows you to take control of the jQuery Mobile history stack in these situations. Here's an example:
-
+
The following link points to "docs-links-urltest/index.html": Test Link which is a directory with an index page. The return page will update the hash as "/docs/pages/docs-links-urltest/" with a trailing slash. This is done via the data-url attribute in that page's source. Keep in mind that the value will replace the entire hash, and it is up to you to replace it with a URL that actually resolves to the correct page when requested via refresh or deep link.
-
+
Learn more about the technical details of the navigation model and Ajax, hashes and history in jQuery mobile.
-
-
-
+
+
+
Link examples
All standard HTML link types are supported in jQuery Mobile in addition to the types outlined above. Here is a sampler of many common link types:
-
+
Links that will be Ajax-loaded with page transitions
Since jQuery Mobile uses an Ajax-powered navigation system, there are a few helpful things to know when writing scripts that interact with the page and navigation model. You can explore the mobile API in more detail by reading up on global configuration options, events, and methods or dig into the technical details of the Ajax navigation model.
-
-
Scripts & styles in the head
-
+
+
Since jQuery Mobile uses an Ajax-powered navigation system, there are a few helpful things to know when writing scripts that interact with the page and navigation model. You can explore the mobile API in more detail by reading up on global configuration options, events, and methods or dig into the technical details of the Ajax navigation model.
+
+
Scripts & styles in the head
+
When you click a link in jQuery Mobile, the Ajax navigation system uses the link's href to formulate an Ajax request. Although the full page is loaded with Ajax, the framework only pulls in the contents of the page, and ignores anything in the head except for title tag contents.
This means that any scripts or styles in the head of the page won't have any effect when the page is loaded via Ajax. The same page will work as expected if you were to load a page directly but both scenarios need to be considered. The reason that the head is ignored for Ajax page content: it's just too complex. The framework would need to compare and reconcile the contents of multiple page head elements as they are loaded into the DOM so we leave this task to the developer.
-
+
The simplest approach is to add the same set of stylesheets and scripts into all your pages. If you need to load in specific scripts or styles for a particular page, bind to the pagecreate event (details below) to run the necessary code when a specific page ID is created. Following this approach will ensure that the code executes if the page is loaded directly or is pulled in and shown via Ajax.
-
-
pagecreate = DOM ready
+
+
pagecreate = DOM ready
The first thing you learn in jQuery is to call code inside the $(document).ready() function so everything will execute as soon as the DOM is loaded. However, in jQuery Mobile, Ajax is used to load the contents of each page into the DOM as you navigate, and the DOM ready handler only executes for the first page. To execute code whenever a new page is loaded and created by the Ajax navigation system, you must bind to the pagecreate event.
The pagecreate event is triggered on the page being initialized, right after initialization occurs. We recommend binding to this event instead of DOM ready() because this will work regardless of whether the page is loaded directly or if the content is pulled into another page as part of the Ajax navigation system.
@@ -41,53 +41,53 @@
pagecreate = DOM ready
});
-
Changing pages
+
Changing pages
If you need to change the current page with JavaScript, use the changePage method. There are a lot of methods and properties that you can set when changing pages, but here are two simple examples:
-//transition to the "about us" page with a slideup transition
-$.mobile.changePage( "about/us.html", { transition: "slideup"} );
+//transition to the "about us" page with a slideup transition
+$.mobile.changePage( "about/us.html", { transition: "slideup"} );
-//transition to the "search results" page, using data from a form with an ID of "search""
+//transition to the "search results" page, using data from a form with an ID of "search""
$.mobile.changePage( "searchresults.php", {
- type: "post",
+ type: "post",
data: $("form#search").serialize()
-});
+});
-
Loading pages
+
Loading pages
To load an external page, enhance its content, and insert it into the DOM, use the loadPage method. There are a lot of methods and properties that you can set when loading pages, but here is a simple example:
-//load the "about us" page into the DOM
-$.mobile.loadPage( "about/us.html" );
+//load the "about us" page into the DOM
+$.mobile.loadPage( "about/us.html" );
-
Enhancing new markup
-
The page plugin dispatches a “pagecreate” event, which most widgets use to auto-initialize themselves. As long as a widget plugin script is referenced, it will automatically enhance any instances of the widgets it finds on the page.
-
However, if you generate new markup client-side or load in content via Ajax and inject it into a page, you can trigger the create event to handle the auto-initialization for all the plugins contained within the new markup. This can be triggered on any element (even the page div itself), saving you the task of manually initializing each plugin (listview button, select, etc.).
-
For example, if a block of HTML markup (say a login form) was loaded in through Ajax, trigger the create event to automatically transform all the widgets it contains (inputs and buttons in this case) into the enhanced versions. The code for this scenario would be:
+
Enhancing new markup
+
The page plugin dispatches a “pagecreate” event, which most widgets use to auto-initialize themselves. As long as a widget plugin script is referenced, it will automatically enhance any instances of the widgets it finds on the page.
+
However, if you generate new markup client-side or load in content via Ajax and inject it into a page, you can trigger the create event to handle the auto-initialization for all the plugins contained within the new markup. This can be triggered on any element (even the page div itself), saving you the task of manually initializing each plugin (listview button, select, etc.).
+
For example, if a block of HTML markup (say a login form) was loaded in through Ajax, trigger the create event to automatically transform all the widgets it contains (inputs and buttons in this case) into the enhanced versions. The code for this scenario would be:
Note that there is an important difference between the create event and refresh method that some widgets have. The create event is suited for enhancing raw markup that contains one or more widgets. The refresh method should be used on existing (already enhanced) widgets that have been manipulated programmatically and need the UI be updated to match.
+
Create vs. refresh: An important distinction
+
Note that there is an important difference between the create event and refresh method that some widgets have. The create event is suited for enhancing raw markup that contains one or more widgets. The refresh method should be used on existing (already enhanced) widgets that have been manipulated programmatically and need the UI be updated to match.
For example, if you had a page where you dynamically appended a new unordered list with data-role=listview attribute after page creation, triggering create on a parent element of that list would transform it into a listview styled widget. If more list items were then programmatically added, calling the listview’s refresh method would update just those new list items to the enhanced state and leave the existing list items untouched.
-
Scrolling to a position within a page
+
Scrolling to a position within a page
Since we use the URL hash to preserve Back button behavior, using page anchors to jump down to a position on the page isn't supported by using the traditional anchor link (#foo). Use the silentScroll method to scroll to a particular Y position without triggering scroll event listeners. You can pass in a yPos arguments to scroll to that Y location. For example:
-//scroll to Y 300px
-$.mobile.silentScroll(300);
-
-
-
Binding to mouse and touch events
+//scroll to Y 300px
+$.mobile.silentScroll(300);
+
+
+
Binding to mouse and touch events
One inportant consideration in mobile is handling mouse and touch events. These events differ significantly across mobile platforms, but the common denominator is that click events will work everywhere, but usually after a significant delay of 500-700ms. This delay is necessary for the browser to wait for double tap, scroll and extended hold tap events to potentially occur. To avoid this delay, it's possible to bind to touch events (ex. touchstart) but the issue with this approach is that some mobile platforms (WP7, Blackberry) don't support touch. To compound this issue, some platforms will emit both touch and mouse events so if you bind to both types, duplicate events will be fired for a single interaction.
Our solution is to create a set of virtual events that normalize mouse and touch events. This allows the developer to register listeners for the basic mouse events, such as mousedown, mousemove, mouseup, and click, and the plugin will take care of registering the correct listeners behind the scenes to invoke the listener at the fastest possible time for that device. This still retains the order of event firing in the traditional mouse environment, should multiple handlers be registered on the same element for different events. The virtual mouse system exposes the following virtual events to jQuery bind methods: vmouseover, vmousedown, vmousemove, vmouseup, vclick, and vmousecancel
This is a single page boilerplate template that you can copy to build you first jQuery Mobile page. Each link or form from here will pull a new page in via Ajax to support the animated page transitions.
+
+
This is a single page boilerplate template that you can copy to build you first jQuery Mobile page. Each link or form from here will pull a new page in via Ajax to support the animated page transitions.
Just view the source and copy the code to get started. All the CSS and JS is linked to the jQuery CDN versions so this is super easy to set up. Remember to include a meta viewport tag in the head to set the zoom level.
This template is standard HTML document with a single "page" container inside, unlike a multi-page template that has multiple pages within it. We strongly recommend building your site or app as a series of separate pages like this because it's cleaner, more lightweight and works better without JavaScript.
When you load the first page of a jQuery Mobile based site, then click a link or submit a form, the jQuery Mobile uses Ajax to pull in the content of the requested page. Having both pages in the DOM is essential to enable the animated page transitions, but one downside of this approach is that the page title is always that of the first page, not the subsequent page you’re viewing.
-
To remedy this, jQuery Mobile automatically parses the title of the page pulled via Ajax and changes the title attribute of the parent document to match.
-
+
To remedy this, jQuery Mobile automatically parses the title of the page pulled via Ajax and changes the title attribute of the parent document to match.
+
Titles in multi-page templates
-
+
On multi-page documents, we follow a similiar convention, but since all the page share a common title, we have a data-title attribute that can be added each page container within a multi-page template to manually define a title. The title of the HTML docuemnt will be automatically updated to match the data-title of the page currently in view.
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.
NOTE: The flip transition isn't rendered correctly on most versions of Android because it lacks 3D CSS transform capabilities. Unfortunately, instead of ignoring the flip, Android makes the page "cartwheel" away by rotating instead of flipping. We recommend using this transition sparingly until support improves.
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)
-
+
Transitions from jQtouch (with small modifications): Built by David Kaneda and maintained by Jonathan Stark.
-
-
+
+
@@ -75,7 +75,7 @@
More in this section
-
+
@@ -84,11 +84,11 @@
More in this section
-
-
-
-
-
+
+
+
+
+
@@ -99,7 +99,7 @@
Ta-da!
That was an animated page transition effect that we added with a data-transition attribute on the link.
Since it uses CSS transforms, this should be hardware accelerated on many mobile devices.
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 default Theme mixes styles from multiple swatches to create visual texture and present the various elements in optimal contrast to one another:
-
+
Default Theme
@@ -60,9 +60,9 @@
Default Theme Content Header
-
+
And each of the five "swatches" applies its style consistently across all page elements, as shown below:
This is a demo of the "fixed" headers and footers used in the jQuery Mobile framework. The page content flows naturally, allowing us to take advantage of native scrolling instead of a scripting a faux-scrolling workaround. The header and footer divs are right in the flow of the document, but whenever they are out of view, you can tap the screen to make them appear. Tapping again or scrolling the page will cause them to appear back in the flow of the page (at the top and bottom).
To set this behavior on a header or footer, add the data-position="fixed" attribute to the toolbar container.
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui.Donec non enim in turpis pulvinar facilisis. Ut felis.
-
+
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui.Donec non enim in turpis pulvinar facilisis. Ut felis.
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui.Donec non enim in turpis pulvinar facilisis. Ut felis.
-
+
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui.Donec non enim in turpis pulvinar facilisis. Ut felis.
-
-
+
+
Embedded form
-
+
-
+
A bit more text
-
+
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui.Donec non enim in turpis pulvinar facilisis. Ut felis.
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.
-
+
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.
Both the header and footer bars will be styled by default with the theme's "a" color swatch (black in the default theme) because these bars are typically primary in the visual hierarchy of a page.
-
-
+
+
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-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):
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-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.
In jQuery Mobile, there are two standard types of toolbars: Headers and Footers.
-
+
The Header bar serves as the page title, is usually the first element inside each mobile page, and typically contains a page title and up to two buttons.
-
The Footer bar is usually the last element inside each mobile page, and tends to be more freeform than the header in terms of content and functionality, but typically contains a combination of text and buttons.
-
+
The Footer bar is usually the last element inside each mobile page, and tends to be more freeform than the header in terms of content and functionality, but typically contains a combination of text and buttons.
+
It's very common to have a horizontal navigation or tab bar inside the header an/or footer; jQuery Mobile includes a nav bar widget that turns an unordered list of links into a horizontal button bar, which works well in these instances.
-
+
Toolbar positioning options
-
+
Header and footers can be positioned on the page in a few different ways. By default, the toolbars use the "inline" positioning mode. In this mode, the headers and footer sit in the natural document flow (the default HTML behavior), which ensures that they are visible on all devices, regardless of JavaScript and CSS positioning support.
-
+
A "fixed" positioning mode provides the convenience of static toolbars without the drawbacks of implementing faux-scrolling in JavaScript. The toolbars start in their natural positions on the page, like the "inline" mode, but when a bar scrolls out of the viewport, the framework animates the bar back into view by dynamically re-positioning the bar to the top or bottom of the viewport.
At any time, tapping the screen will toggle the visibility of the fixed toolbars: tapping the page when the toolbars aren't visible brings them into view, tapping again hides them until you tap again. This gives users the option to hide the toolbars until needed to maximize screen real estate.
To set this behavior on a header or footer, add the data-position="fixed" attribute to the toolbar container.
-
+
A "fullscreen" position mode works just like the fixed mode except that the toolbars aren't shown at the top and bottom of the page and only appear when the page is clicked. This is useful for immersive apps like photo or video viewers where you want the content to full when whole screen and toolbars can be summoned to appear by tapping the screen. Keep in mind that the toolbars in this mode will sit over page content so this is best used for specific situations.
The footer toolbar will be be themed with the "a" swatch by default (black in the default theme) but you can easily set the theme swatch color.
-
+
+
+
The footer toolbar will be be themed with the "a" swatch by default (black in the default theme) but you can easily set the theme swatch color.
+
Footer content
-
-
The page footer is very similar to the header in terms of options and configuration. The primary differences are that the footer is designed to be less structured than the header to allow for more flexibility, so the framework doesn't automatically place buttons to the left or right based on source order as it does in the header.
+
+
The page footer is very similar to the header in terms of options and configuration. The primary differences are that the footer is designed to be less structured than the header to allow for more flexibility, so the framework doesn't automatically place buttons to the left or right based on source order as it does in the header.
Adding buttons
Any link or valid button markup added to the footer will automatically be turned into a button. To save space, buttons in toolbars are automatically set to inline styling so the button is only as wide as the text and icons it contains.
-
+
By default, toolbars don't have any padding to accommodate nav bars and other widgets. To include padding on the bar, add a class="ui-bar" to the footer.
Form elements and other content can also be added to toolbars. Here is an example of a select menu inside a footer bar:
-
+
@@ -102,22 +102,22 @@
Adding form elements
-
-
-
+
+
+
Persistent footers
-
In situations where the footer is a global navigation element, you may want it to appear fixed in place between page transitions. This can be accomplished by using the persistent footer feature included in jQuery Mobile.
-
+
In situations where the footer is a global navigation element, you may want it to appear fixed in place between page transitions. This can be accomplished by using the persistent footer feature included in jQuery Mobile.
+
To make a footer stay in place between transitions, add the data-id attribute to the footer of all relevant pages and use the same id value for each. For example, by adding data-id="myfooter" to the current page and the target page, the framework will keep the footer anchors in the same spot during the page animation. PLEASE NOTE: This effect will only work correctly if the header and footer toolbars are set to data-position="fixed" so they are in view during the transition.
The header is a toolbar at the top of the page that usually contains the page title text and optional buttons positioned to the the left and/or right of the title for navigation or actions.
-
-
The title text is normally an H1 heading element but it's possible to use any heading level (H1-H6) to allow for semantic flexibility. For example, a page containing multiple mobile 'pages' may use a H1 element on the home 'page' and a H2 element on the secondary pages. All heading levels are styled identically by default to maintain visual consistency.
+
The header is a toolbar at the top of the page that usually contains the page title text and optional buttons positioned to the the left and/or right of the title for navigation or actions.
-
+
The title text is normally an H1 heading element but it's possible to use any heading level (H1-H6) to allow for semantic flexibility. For example, a page containing multiple mobile 'pages' may use a H1 element on the home 'page' and a H2 element on the secondary pages. All heading levels are styled identically by default to maintain visual consistency.
The header toolbar is themed with the "a" swatch by default (black in the default theme) but you can easily set the theme swatch color.
+
The header toolbar is themed with the "a" swatch by default (black in the default theme) but you can easily set the theme swatch color.
+
-
Page title
-
+
Adding buttons
-
-
-
-
-
+
+
+
+
+
In the standard header configuration, there are slots for buttons on either side of the text heading. Each button is typically an anchor element, but any valid button markup will work. To save space, buttons in toolbars are set to inline styling so the button is only as wide as the text and icons it contains.
-
-
+
+
Default button positioning
-
-
The header plugin looks for immediate children of the header container, and automatically sets the first link in the left button slot and the second link in the right. In this example, the 'Cancel' button will appear in the left slot and 'Save' will appear in the right slot based on their sequence in the source order.
-
-
+
The header plugin looks for immediate children of the header container, and automatically sets the first link in the left button slot and the second link in the right. In this example, the 'Cancel' button will appear in the left slot and 'Save' will appear in the right slot based on their sequence in the source order.
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.
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.
-
+
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.
jQuery Mobile has a feature to automatically create and append "back" buttons to any header, though it is disabled by default. This is primarily useful in chromeless installed applications, such as those running in a native app web view. The framework automatically generates a "back" button on a header when the page plugin's addBackBtn option is true. This can also be set via markup if the page div has a data-add-back-btn="true" attribute.
-
-
-
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.
-
-
Customizing the back button text
-
+
+
jQuery Mobile has a feature to automatically create and append "back" buttons to any header, though it is disabled by default. This is primarily useful in chromeless installed applications, such as those running in a native app web view. The framework automatically generates a "back" button on a header when the page plugin's addBackBtn option is true. This can also be set via markup if the page div has a data-add-back-btn="true" attribute.
+
+
+
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.
+
+
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";.
-
+
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're doing this programmatically, set this option inside the mobileinit event handler.
Custom header configurations
-
If you need to to create a header that doesn't follow the default configuration, simply wrap your custom styled markup in a container div inside the header container and the plugin won't apply the automatic button logic so you can write custom styles for laying out the content in your header.
+
If you need to to create a header that doesn't follow the default configuration, simply wrap your custom styled markup in a container div inside the header container and the plugin won't apply the automatic button logic so you can write custom styles for laying out the content in your header.
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:
Adding a third item will automatically make each button 1/3 the width of the browser window:
@@ -61,7 +61,7 @@
Simple navbar
-
+
Adding a fourth more item will automatically make each button 1/4 the width of the browser window:
@@ -88,9 +88,9 @@
Simple navbar
-
+
If more than 5 items are added, the navbar will simply wrap to multiple lines:
-
+
@@ -107,9 +107,9 @@
Simple navbar
-
+
As a fallback, navbars with 1 item will simply render as 100%.
-
+
@@ -117,15 +117,15 @@
Simple navbar
-
+
Navbars in headers
-
+
If you want to add a navbar to the top of the page, you can still have a page title and buttons. Just add the navbar container inside the header block, right after the title and buttons in the source order.
Icons can be added to navbar items by adding the data-icon attribute specifying a standard mobile icon to each anchor.
@@ -148,7 +148,7 @@
Icons in navbars
-
+
Icons can be stacked above the labels by adding the data-iconpos="top" attribute to each anchor.
@@ -160,13 +160,13 @@
Icons in navbars
-
+
Using 3rd party icon sets
-
+
You can add any of the popular icon libraries like Glyphish to achieve the iOS style tab tab that has large icons stacked on top of text labels. All that is required is a bit of custom styles to link to the icons and position them in the navbar. Here is an example using Glyphish icons and custom styles (view page source for styles) in our navbar:
This page is a demo of a persistent footer navigation bar. At the foot of the page, you'll see a persistent horizontal navigation bar. Click on any of the links, and you'll see the page content transition but the footer remain fixed: The footer sticks persistently even when transitioning to a new HTML page, because the footer on all four HTML pages has the same data-id attribute. Note: If you'd like an active button in your navbar to remain active when you return to it again, add a class of ui-state-persist in addition to ui-btn-active
Toolbars are used for headers, footers and utility bars throughout a mobile sites and applications, so jQuery Mobile provides a standard set of bars and navigation tools to cover most standard scenarios.
diff --git a/experiments/converter/jquery.tmpl.js b/experiments/converter/jquery.tmpl.js
index 8aeef239241..a6e52c0bab0 100644
--- a/experiments/converter/jquery.tmpl.js
+++ b/experiments/converter/jquery.tmpl.js
@@ -145,7 +145,7 @@
if ( options && options.wrapped ) {
updateWrapped( options, options.wrapped );
}
- ret = jQuery.isArray( data ) ?
+ ret = jQuery.isArray( data ) ?
jQuery.map( data, function( dataItem ) {
return dataItem ? newTmplItem( options, parentItem, tmpl, dataItem ) : null;
}) :
@@ -191,10 +191,10 @@
return typeof name === "string" ? (jQuery.template[name] = tmpl) : tmpl;
}
// Return named compiled template
- return name ? (typeof name !== "string" ? jQuery.template( null, name ):
- (jQuery.template[name] ||
- // If not in map, treat as a selector. (If integrated with core, use quickExpr.exec)
- jQuery.template( null, htmlExpr.test( name ) ? name : jQuery( name )))) : null;
+ return name ? (typeof name !== "string" ? jQuery.template( null, name ):
+ (jQuery.template[name] ||
+ // If not in map, treat as a selector. (If integrated with core, use quickExpr.exec)
+ jQuery.template( null, htmlExpr.test( name ) ? name : jQuery( name )))) : null;
},
encode: function( text ) {
@@ -209,7 +209,7 @@
_default: { $2: "null" },
open: "if($notnull_1){_=_.concat($item.nest($1,$2));}"
// tmpl target parameter can be of type function, so use $1, not $1a (so not auto detection of functions)
- // This means that {{tmpl foo}} treats foo as a template (which IS a function).
+ // This means that {{tmpl foo}} treats foo as a template (which IS a function).
// Explicit parens can be used if foo is a function that returns a template: {{tmpl foo()}}.
},
"wrap": {
@@ -231,7 +231,7 @@
open: "}else if(($notnull_1) && $1a){"
},
"html": {
- // Unecoded expression evaluation.
+ // Unecoded expression evaluation.
open: "if($notnull_1){_.push($1a);}"
},
"=": {
@@ -270,16 +270,16 @@
//========================== Private helper functions, used by code above ==========================
function build( tmplItem, nested, content ) {
- // Convert hierarchical content into flat string array
+ // Convert hierarchical content into flat string array
// and finally return array of fragments ready for DOM insertion
var frag, ret = content ? jQuery.map( content, function( item ) {
- return (typeof item === "string") ?
+ return (typeof item === "string") ?
// Insert template item annotations, to be converted to jQuery.data( "tmplItem" ) when elems are inserted into DOM.
(tmplItem.key ? item.replace( /(<\w+)(?=[\s>])(?![^>]*_tmplitem)([^>]*)/g, "$1 " + tmplItmAtt + "=\"" + tmplItem.key + "\" $2" ) : item) :
// This is a child template item. Build nested template.
build( item, tmplItem, item._ctnt );
- }) :
- // If content is not defined, insert tmplItem directly. Not a template item. May be a string, or a string array, e.g. from {{html $item.html()}}.
+ }) :
+ // If content is not defined, insert tmplItem directly. Not a template item. May be a string, or a string array, e.g. from {{html $item.html()}}.
tmplItem;
if ( nested ) {
return ret;
@@ -336,7 +336,7 @@
parens = "";
}
if ( target ) {
- target = unescape( target );
+ target = unescape( target );
args = args ? ("," + unescape( args ) + ")") : (parens ? ")" : "");
// Support for target being things like a.toLowerCase();
// In that case don't call with template item as 'this' pointer. Just evaluate...
@@ -346,7 +346,7 @@
exprAutoFnDetect = expr = def.$1 || "null";
}
fnargs = unescape( fnargs );
- return "');" +
+ return "');" +
tag[ slash ? "close" : "open" ]
.split( "$notnull_1" ).join( target ? "typeof(" + target + ")!=='undefined' && (" + target + ")!=null" : "true" )
.split( "$1a" ).join( exprAutoFnDetect )
@@ -364,8 +364,8 @@
);
}
function updateWrapped( options, wrapped ) {
- // Build the wrapped content.
- options._wrap = build( options, true,
+ // Build the wrapped content.
+ options._wrap = build( options, true,
// Suport imperative scenario in which options.wrapped can be set to a selector or an HTML string.
jQuery.isArray( wrapped ) ? wrapped : [htmlExpr.test( wrapped ) ? wrapped : jQuery( wrapped ).html()]
).join("");
@@ -424,9 +424,9 @@
}
if ( tmplItem ) {
pntItem = tmplItem;
- // Find the template item of the parent element.
+ // Find the template item of the parent element.
// (Using !=, not !==, since pntItem.key is number, and pntNode may be a string)
- while ( pntItem && pntItem.key != pntNode ) {
+ while ( pntItem && pntItem.key != pntNode ) {
// Add this element as a top-level node for this rendered template item, as well as for any
// ancestor items between this item and the item of its parent element
pntItem.nodes.push( el );
@@ -440,7 +440,7 @@
}
function cloneTmplItem( key ) {
key = key + keySuffix;
- tmplItem = newClonedItems[key] =
+ tmplItem = newClonedItems[key] =
(newClonedItems[key] || newTmplItem( tmplItem, newTmplItems[tmplItem.parent.key + keySuffix] || tmplItem.parent, null, true ));
}
}
@@ -464,7 +464,7 @@
// nested template, using {{wrap}} tag
var options = call.options || {};
options.wrapped = wrapped;
- // Apply the template, which may incorporate wrapped content,
+ // Apply the template, which may incorporate wrapped content,
return jQuery.tmpl( jQuery.template( call.tmpl ), call.data, options, call.item );
}
diff --git a/experiments/google-maps/index.html b/experiments/google-maps/index.html
index 088bc8c33ca..1cd20a8ecb8 100644
--- a/experiments/google-maps/index.html
+++ b/experiments/google-maps/index.html
@@ -7,19 +7,19 @@
-
+
-
+
Google maps view
-
+
If you're linking to a map page with jQuery Mobile's Ajax behavior, be sure to load google maps in the first real page's head, since it uses document.write and can not be included in the data-role=page div like normal scripts can. View map
The form elements on this page are wrapped by a special div that has event handlers for touchstart, touchmove and touchstop. The checkboxes below control how the event within these handlers is treated when they fire. Use this page to figure out how the various event treatments impact the form elements on you mobile device, then add to the notes at the bottom of the page.
All scrolling on this page is performed by the native viewport, there are no scrollviews on this page.
This page wraps the _handleDragStart, _handleDragMove, and _handleDragStop events of the scrollview widget so that the checkboxes below can determine how the native event is treated. You can use this page to figure out what events need to be caught and what special treatment is necessary to prevent native scrolling. You can also test the effect of that treatment on form elements within the sample scrollview.
-
+
-
+
+
diff --git a/js/jquery.js b/js/jquery.js
index 829c70604b8..f0e0cedff10 100644
--- a/js/jquery.js
+++ b/js/jquery.js
@@ -1511,7 +1511,7 @@ jQuery.extend({
return thisCache[ internalKey ] && thisCache[ internalKey ].events;
}
- return getByName ?
+ return getByName ?
// Check for both converted-to-camel and non-converted data property names
thisCache[ jQuery.camelCase( name ) ] || thisCache[ name ] :
thisCache;
@@ -1923,11 +1923,11 @@ jQuery.fn.extend({
jQuery.removeAttr( this, name );
});
},
-
+
prop: function( name, value ) {
return jQuery.access( this, name, value, true, jQuery.prop );
},
-
+
removeProp: function( name ) {
name = jQuery.propFix[ name ] || name;
return this.each(function() {
@@ -2060,7 +2060,7 @@ jQuery.fn.extend({
val: function( value ) {
var hooks, ret,
elem = this[0];
-
+
if ( !arguments.length ) {
if ( elem ) {
hooks = jQuery.valHooks[ elem.nodeName.toLowerCase() ] || jQuery.valHooks[ elem.type ];
@@ -2071,9 +2071,9 @@ jQuery.fn.extend({
ret = elem.value;
- return typeof ret === "string" ?
+ return typeof ret === "string" ?
// handle most common string cases
- ret.replace(rreturn, "") :
+ ret.replace(rreturn, "") :
// handle cases where value is null/undef or number
ret == null ? "" : ret;
}
@@ -2194,15 +2194,15 @@ jQuery.extend({
height: true,
offset: true
},
-
+
attrFix: {
// Always normalize to ensure hook usage
tabindex: "tabIndex"
},
-
+
attr: function( elem, name, value, pass ) {
var nType = elem.nodeType;
-
+
// don't get/set attributes on text, comment and attribute nodes
if ( !elem || nType === 3 || nType === 8 || nType === 2 ) {
return undefined;
@@ -2273,7 +2273,7 @@ jQuery.extend({
var propName;
if ( elem.nodeType === 1 ) {
name = jQuery.attrFix[ name ] || name;
-
+
if ( jQuery.support.getSetAttribute ) {
// Use removeAttribute in browsers that support it
elem.removeAttribute( name );
@@ -2356,7 +2356,7 @@ jQuery.extend({
frameborder: "frameBorder",
contenteditable: "contentEditable"
},
-
+
prop: function( elem, name, value ) {
var nType = elem.nodeType;
@@ -2391,7 +2391,7 @@ jQuery.extend({
}
}
},
-
+
propHooks: {}
});
@@ -2428,7 +2428,7 @@ if ( !jQuery.support.getSetAttribute ) {
// propFix is more comprehensive and contains all fixes
jQuery.attrFix = jQuery.propFix;
-
+
// Use this for any attribute on a form in IE6/7
formHook = jQuery.attrHooks.name = jQuery.attrHooks.title = jQuery.valHooks.button = {
get: function( elem, name ) {
@@ -2798,7 +2798,7 @@ jQuery.event = {
}
}
},
-
+
// Events that are safe to short-circuit if no handlers are attached.
// Native DOM events should not be added, they may have inline handlers.
customEvent: {
@@ -2844,7 +2844,7 @@ jQuery.event = {
event.exclusive = exclusive;
event.namespace = namespaces.join(".");
event.namespace_re = new RegExp("(^|\\.)" + namespaces.join("\\.(?:.*\\.)?") + "(\\.|$)");
-
+
// triggerHandler() and global events don't bubble or run the default action
if ( onlyHandlers || !elem ) {
event.preventDefault();
@@ -2935,7 +2935,7 @@ jQuery.event = {
jQuery.event.triggered = undefined;
}
}
-
+
return event.result;
},
@@ -3763,7 +3763,7 @@ var Sizzle = function( selector, context, results, seed ) {
if ( context.nodeType !== 1 && context.nodeType !== 9 ) {
return [];
}
-
+
if ( !selector || typeof selector !== "string" ) {
return results;
}
@@ -3773,7 +3773,7 @@ var Sizzle = function( selector, context, results, seed ) {
contextXML = Sizzle.isXML( context ),
parts = [],
soFar = selector;
-
+
// Reset the position of the chunker regexp (start from head)
do {
chunker.exec( "" );
@@ -3781,9 +3781,9 @@ var Sizzle = function( selector, context, results, seed ) {
if ( m ) {
soFar = m[3];
-
+
parts.push( m[1] );
-
+
if ( m[2] ) {
extra = m[3];
break;
@@ -3807,7 +3807,7 @@ var Sizzle = function( selector, context, results, seed ) {
if ( Expr.relative[ selector ] ) {
selector += parts.shift();
}
-
+
set = posProcess( selector, set );
}
}
@@ -3936,7 +3936,7 @@ Sizzle.find = function( expr, context, isXML ) {
for ( var i = 0, l = Expr.order.length; i < l; i++ ) {
var match,
type = Expr.order[i];
-
+
if ( (match = Expr.leftMatch[ type ].exec( expr )) ) {
var left = match[1];
match.splice( 1, 1 );
@@ -4268,7 +4268,7 @@ var Expr = Sizzle.selectors = {
ATTR: function( match, curLoop, inplace, result, not, isXML ) {
var name = match[1] = match[1].replace( rBackslash, "" );
-
+
if ( !isXML && Expr.attrMap[name] ) {
match[1] = Expr.attrMap[name];
}
@@ -4302,7 +4302,7 @@ var Expr = Sizzle.selectors = {
} else if ( Expr.match.POS.test( match[0] ) || Expr.match.CHILD.test( match[0] ) ) {
return true;
}
-
+
return match;
},
@@ -4312,7 +4312,7 @@ var Expr = Sizzle.selectors = {
return match;
}
},
-
+
filters: {
enabled: function( elem ) {
return elem.disabled === false && elem.type !== "hidden";
@@ -4325,14 +4325,14 @@ var Expr = Sizzle.selectors = {
checked: function( elem ) {
return elem.checked === true;
},
-
+
selected: function( elem ) {
// Accessing this property makes selected-by-default
// options in Safari work properly
if ( elem.parentNode ) {
elem.parentNode.selectedIndex;
}
-
+
return elem.selected === true;
},
@@ -4354,7 +4354,7 @@ var Expr = Sizzle.selectors = {
text: function( elem ) {
var attr = elem.getAttribute( "type" ), type = elem.type;
- // IE6 and 7 will map elem.type to 'text' for new HTML5 types (search, etc)
+ // IE6 and 7 will map elem.type to 'text' for new HTML5 types (search, etc)
// use getAttribute instead to test this case
return elem.nodeName.toLowerCase() === "input" && "text" === type && ( attr === type || attr === null );
},
@@ -4470,21 +4470,21 @@ var Expr = Sizzle.selectors = {
case "only":
case "first":
while ( (node = node.previousSibling) ) {
- if ( node.nodeType === 1 ) {
- return false;
+ if ( node.nodeType === 1 ) {
+ return false;
}
}
- if ( type === "first" ) {
- return true;
+ if ( type === "first" ) {
+ return true;
}
node = elem;
case "last":
while ( (node = node.nextSibling) ) {
- if ( node.nodeType === 1 ) {
- return false;
+ if ( node.nodeType === 1 ) {
+ return false;
}
}
@@ -4497,22 +4497,22 @@ var Expr = Sizzle.selectors = {
if ( first === 1 && last === 0 ) {
return true;
}
-
+
var doneName = match[0],
parent = elem.parentNode;
-
+
if ( parent && (parent.sizcache !== doneName || !elem.nodeIndex) ) {
var count = 0;
-
+
for ( node = parent.firstChild; node; node = node.nextSibling ) {
if ( node.nodeType === 1 ) {
node.nodeIndex = ++count;
}
- }
+ }
parent.sizcache = doneName;
}
-
+
var diff = elem.nodeIndex - last;
if ( first === 0 ) {
@@ -4531,7 +4531,7 @@ var Expr = Sizzle.selectors = {
TAG: function( elem, match ) {
return (match === "*" && elem.nodeType === 1) || elem.nodeName.toLowerCase() === match;
},
-
+
CLASS: function( elem, match ) {
return (" " + (elem.className || elem.getAttribute("class")) + " ")
.indexOf( match ) > -1;
@@ -4597,7 +4597,7 @@ var makeArray = function( array, results ) {
results.push.apply( results, array );
return results;
}
-
+
return array;
};
@@ -4849,7 +4849,7 @@ if ( document.querySelectorAll ) {
if ( div.querySelectorAll && div.querySelectorAll(".TEST").length === 0 ) {
return;
}
-
+
Sizzle = function( query, context, extra, seed ) {
context = context || document;
@@ -4858,24 +4858,24 @@ if ( document.querySelectorAll ) {
if ( !seed && !Sizzle.isXML(context) ) {
// See if we find a selector to speed up
var match = /^(\w+$)|^\.([\w\-]+$)|^#([\w\-]+$)/.exec( query );
-
+
if ( match && (context.nodeType === 1 || context.nodeType === 9) ) {
// Speed-up: Sizzle("TAG")
if ( match[1] ) {
return makeArray( context.getElementsByTagName( query ), extra );
-
+
// Speed-up: Sizzle(".CLASS")
} else if ( match[2] && Expr.find.CLASS && context.getElementsByClassName ) {
return makeArray( context.getElementsByClassName( match[2] ), extra );
}
}
-
+
if ( context.nodeType === 9 ) {
// Speed-up: Sizzle("body")
// The body element only exists once, optimize finding it
if ( query === "body" && context.body ) {
return makeArray( [ context.body ], extra );
-
+
// Speed-up: Sizzle("#ID")
} else if ( match && match[3] ) {
var elem = context.getElementById( match[3] );
@@ -4888,12 +4888,12 @@ if ( document.querySelectorAll ) {
if ( elem.id === match[3] ) {
return makeArray( [ elem ], extra );
}
-
+
} else {
return makeArray( [], extra );
}
}
-
+
try {
return makeArray( context.querySelectorAll(query), extra );
} catch(qsaError) {}
@@ -4931,7 +4931,7 @@ if ( document.querySelectorAll ) {
}
}
}
-
+
return oldSizzle(query, context, extra, seed);
};
@@ -4958,7 +4958,7 @@ if ( document.querySelectorAll ) {
// This should fail with an exception
// Gecko does not error, returns false instead
matches.call( document.documentElement, "[test!='']:sizzle" );
-
+
} catch( pseudoError ) {
pseudoWorks = true;
}
@@ -4968,7 +4968,7 @@ if ( document.querySelectorAll ) {
expr = expr.replace(/\=\s*([^'"\]]*)\s*\]/g, "='$1']");
if ( !Sizzle.isXML( node ) ) {
- try {
+ try {
if ( pseudoWorks || !Expr.match.PSEUDO.test( expr ) && !/!=/.test( expr ) ) {
var ret = matches.call( node, expr );
@@ -5005,7 +5005,7 @@ if ( document.querySelectorAll ) {
if ( div.getElementsByClassName("e").length === 1 ) {
return;
}
-
+
Expr.order.splice(1, 0, "CLASS");
Expr.find.CLASS = function( match, context, isXML ) {
if ( typeof context.getElementsByClassName !== "undefined" && !isXML ) {
@@ -5056,7 +5056,7 @@ function dirCheck( dir, cur, doneName, checkSet, nodeCheck, isXML ) {
if ( elem ) {
var match = false;
-
+
elem = elem[dir];
while ( elem ) {
@@ -5109,7 +5109,7 @@ if ( document.documentElement.contains ) {
Sizzle.isXML = function( elem ) {
// documentElement is verified for cases where it doesn't yet exist
- // (such as loading iframes in IE - #4833)
+ // (such as loading iframes in IE - #4833)
var documentElement = (elem ? elem.ownerDocument || elem : 0).documentElement;
return documentElement ? documentElement.nodeName !== "HTML" : false;
@@ -5230,7 +5230,7 @@ jQuery.fn.extend({
closest: function( selectors, context ) {
var ret = [], i, l, cur = this[0];
-
+
// Array
if ( jQuery.isArray( selectors ) ) {
var match, selector,
diff --git a/js/jquery.mobile.degradeInputs.js b/js/jquery.mobile.degradeInputs.js
index 8f4a024524d..9b31c8ae57c 100644
--- a/js/jquery.mobile.degradeInputs.js
+++ b/js/jquery.mobile.degradeInputs.js
@@ -28,10 +28,10 @@ $.mobile.page.prototype.options.keepNative = ":jqmData(role='none'), :jqmData(ro
//auto self-init widgets
$( document ).bind( "pagecreate enhance", function( e ){
-
+
var page = $( e.target ).data( "page" ),
o = page.options;
-
+
// degrade inputs to avoid poorly implemented native functionality
$( e.target ).find( "input" ).not( o.keepNative ).each(function() {
var $this = $( this ),
@@ -45,7 +45,7 @@ $( document ).bind( "pagecreate enhance", function( e ){
);
}
});
-
+
});
})( jQuery );
\ No newline at end of file
diff --git a/js/jquery.mobile.dialog.js b/js/jquery.mobile.dialog.js
index 24d974f50d2..62854bbbeb0 100644
--- a/js/jquery.mobile.dialog.js
+++ b/js/jquery.mobile.dialog.js
@@ -15,13 +15,13 @@ $.widget( "mobile.dialog", $.mobile.widget, {
_create: function() {
var $el = this.element,
pageTheme = $el.attr( "class" ).match( /ui-body-[a-z]/ );
-
+
if( pageTheme.length ){
$el.removeClass( pageTheme[ 0 ] );
- }
-
+ }
+
$el.addClass( "ui-body-" + this.options.theme );
-
+
// Class the markup for dialog styling
// Set aria role
$el.attr( "role", "dialog" )
diff --git a/js/jquery.mobile.event.js b/js/jquery.mobile.event.js
index 03bffaabbe1..6a58cefa5c7 100644
--- a/js/jquery.mobile.event.js
+++ b/js/jquery.mobile.event.js
@@ -118,11 +118,11 @@ $.event.special.tap = {
// also handles swipeleft, swiperight
$.event.special.swipe = {
scrollSupressionThreshold: 10, // More than this horizontal displacement, and we will suppress scrolling.
-
+
durationThreshold: 1000, // More time than this, and it isn't a swipe.
-
+
horizontalDistanceThreshold: 30, // Swipe horizontal displacement must be more than this.
-
+
verticalDistanceThreshold: 75, // Swipe vertical displacement must be less than this.
setup: function() {
diff --git a/js/jquery.mobile.fixHeaderFooter.native.js b/js/jquery.mobile.fixHeaderFooter.native.js
index 382a7bcf02c..98ba4d7f028 100644
--- a/js/jquery.mobile.fixHeaderFooter.native.js
+++ b/js/jquery.mobile.fixHeaderFooter.native.js
@@ -11,30 +11,30 @@ $.mobile.touchOverflowEnabled = false;
$( document ).bind( "pagecreate", function( event ) {
if( $.support.touchOverflow && $.mobile.touchOverflowEnabled ){
-
+
var $target = $( event.target ),
scrollStartY = 0;
-
+
if( $target.is( ":jqmData(role='page')" ) ){
-
+
$target.each(function() {
var $page = $( this ),
$fixies = $page.find( ":jqmData(role='header'), :jqmData(role='footer')" ).filter( ":jqmData(position='fixed')" ),
fullScreen = $page.jqmData( "fullscreen" ),
$scrollElem = $fixies.length ? $page.find( ".ui-content" ) : $page;
-
+
$page.addClass( "ui-mobile-touch-overflow" );
-
+
$scrollElem.bind( "scrollstop", function(){
if( $scrollElem.scrollTop() > 0 ){
window.scrollTo( 0, $.mobile.defaultHomeScroll );
}
- });
-
+ });
+
if( $fixies.length ){
-
+
$page.addClass( "ui-native-fixed" );
-
+
if( fullScreen ){
$page.addClass( "ui-native-fullscreen" );
diff --git a/js/jquery.mobile.forms.textinput.js b/js/jquery.mobile.forms.textinput.js
index 1d8ab441173..b9652b6919e 100644
--- a/js/jquery.mobile.forms.textinput.js
+++ b/js/jquery.mobile.forms.textinput.js
@@ -33,7 +33,7 @@ $.widget( "mobile.textinput", $.mobile.widget, {
input.addClass("ui-input-text ui-body-"+ o.theme );
focusedEl = input;
-
+
// XXX: Temporary workaround for issue 785. Turn off autocorrect and
// autocomplete since the popup they use can't be dismissed by
// the user. Note that we test for the presence of the feature
@@ -44,7 +44,7 @@ $.widget( "mobile.textinput", $.mobile.widget, {
input[0].setAttribute( "autocorrect", "off" );
input[0].setAttribute( "autocomplete", "off" );
}
-
+
//"search" input widget
if ( input.is( "[type='search'],:jqmData(type='search')" ) ) {
@@ -125,11 +125,11 @@ $.widget( "mobile.textinput", $.mobile.widget, {
//auto self-init widgets
$( document ).bind( "pagecreate create", function( e ){
-
+
$( $.mobile.textinput.prototype.options.initSelector, e.target )
.not( ":jqmData(role='none'), :jqmData(role='nojs')" )
.textinput();
-
+
});
})( jQuery );
diff --git a/js/jquery.mobile.hashchange.js b/js/jquery.mobile.hashchange.js
index 47105f4abcf..1f0592bf148 100644
--- a/js/jquery.mobile.hashchange.js
+++ b/js/jquery.mobile.hashchange.js
@@ -1,7 +1,7 @@
/*!
* jQuery hashchange event - v1.3 - 7/21/2010
* http://benalman.com/projects/jquery-hashchange-plugin/
- *
+ *
* Copyright (c) 2010 "Cowboy" Ben Alman
* Dual licensed under the MIT and GPL licenses.
* http://benalman.com/about/license/
@@ -10,59 +10,59 @@
// Script: jQuery hashchange event
//
// *Version: 1.3, Last updated: 7/21/2010*
-//
+//
// Project Home - http://benalman.com/projects/jquery-hashchange-plugin/
// GitHub - http://github.com/cowboy/jquery-hashchange/
// Source - http://github.com/cowboy/jquery-hashchange/raw/master/jquery.ba-hashchange.js
// (Minified) - http://github.com/cowboy/jquery-hashchange/raw/master/jquery.ba-hashchange.min.js (0.8kb gzipped)
-//
+//
// About: License
-//
+//
// Copyright (c) 2010 "Cowboy" Ben Alman,
// Dual licensed under the MIT and GPL licenses.
// http://benalman.com/about/license/
-//
+//
// About: Examples
-//
+//
// These working examples, complete with fully commented code, illustrate a few
// ways in which this plugin can be used.
-//
+//
// hashchange event - http://benalman.com/code/projects/jquery-hashchange/examples/hashchange/
// document.domain - http://benalman.com/code/projects/jquery-hashchange/examples/document_domain/
-//
+//
// About: Support and Testing
-//
+//
// Information about what version or versions of jQuery this plugin has been
// tested with, what browsers it has been tested in, and where the unit tests
// reside (so you can test it yourself).
-//
+//
// jQuery Versions - 1.2.6, 1.3.2, 1.4.1, 1.4.2
// Browsers Tested - Internet Explorer 6-8, Firefox 2-4, Chrome 5-6, Safari 3.2-5,
// Opera 9.6-10.60, iPhone 3.1, Android 1.6-2.2, BlackBerry 4.6-5.
// Unit Tests - http://benalman.com/code/projects/jquery-hashchange/unit/
-//
+//
// About: Known issues
-//
+//
// While this jQuery hashchange event implementation is quite stable and
// robust, there are a few unfortunate browser bugs surrounding expected
// hashchange event-based behaviors, independent of any JavaScript
// window.onhashchange abstraction. See the following examples for more
// information:
-//
+//
// Chrome: Back Button - http://benalman.com/code/projects/jquery-hashchange/examples/bug-chrome-back-button/
// Firefox: Remote XMLHttpRequest - http://benalman.com/code/projects/jquery-hashchange/examples/bug-firefox-remote-xhr/
// WebKit: Back Button in an Iframe - http://benalman.com/code/projects/jquery-hashchange/examples/bug-webkit-hash-iframe/
// Safari: Back Button from a different domain - http://benalman.com/code/projects/jquery-hashchange/examples/bug-safari-back-from-diff-domain/
-//
-// Also note that should a browser natively support the window.onhashchange
+//
+// Also note that should a browser natively support the window.onhashchange
// event, but not report that it does, the fallback polling loop will be used.
-//
+//
// About: Release History
-//
+//
// 1.3 - (7/21/2010) Reorganized IE6/7 Iframe code to make it more
// "removable" for mobile-only development. Added IE6/7 document.title
// support. Attempted to make Iframe as hidden as possible by using
-// techniques from http://www.paciellogroup.com/blog/?p=604. Added
+// techniques from http://www.paciellogroup.com/blog/?p=604. Added
// support for the "shortcut" format $(window).hashchange( fn ) and
// $(window).hashchange() like jQuery provides for built-in events.
// Renamed jQuery.hashchangeDelay to and
@@ -87,40 +87,40 @@
(function($,window,undefined){
'$:nomunge'; // Used by YUI compressor.
-
+
// Reused string.
var str_hashchange = 'hashchange',
-
+
// Method / object references.
doc = document,
fake_onhashchange,
special = $.event.special,
-
+
// Does the browser support window.onhashchange? Note that IE8 running in
// IE7 compatibility mode reports true for 'onhashchange' in window, even
// though the event isn't supported, so also test document.documentMode.
doc_mode = doc.documentMode,
supports_onhashchange = 'on' + str_hashchange in window && ( doc_mode === undefined || doc_mode > 7 );
-
+
// Get location.hash (or what you'd expect location.hash to be) sans any
// leading #. Thanks for making this necessary, Firefox!
function get_fragment( url ) {
url = url || location.href;
return '#' + url.replace( /^[^#]*#?(.*)$/, '$1' );
};
-
+
// Method: jQuery.fn.hashchange
- //
+ //
// Bind a handler to the window.onhashchange event or trigger all bound
// window.onhashchange event handlers. This behavior is consistent with
// jQuery's built-in event handlers.
- //
+ //
// Usage:
- //
+ //
// > jQuery(window).hashchange( [ handler ] );
- //
+ //
// Arguments:
- //
+ //
// handler - (Function) Optional handler to be bound to the hashchange
// event. This is a "shortcut" for the more verbose form:
// jQuery(window).bind( 'hashchange', handler ). If handler is omitted,
@@ -128,127 +128,127 @@
// is a shortcut for the more verbose
// jQuery(window).trigger( 'hashchange' ). These forms are described in
// the section.
- //
+ //
// Returns:
- //
+ //
// (jQuery) The initial jQuery collection of elements.
-
+
// Allow the "shortcut" format $(elem).hashchange( fn ) for binding and
// $(elem).hashchange() for triggering, like jQuery does for built-in events.
$.fn[ str_hashchange ] = function( fn ) {
return fn ? this.bind( str_hashchange, fn ) : this.trigger( str_hashchange );
};
-
+
// Property: jQuery.fn.hashchange.delay
- //
+ //
// The numeric interval (in milliseconds) at which the
// polling loop executes. Defaults to 50.
-
+
// Property: jQuery.fn.hashchange.domain
- //
+ //
// If you're setting document.domain in your JavaScript, and you want hash
// history to work in IE6/7, not only must this property be set, but you must
// also set document.domain BEFORE jQuery is loaded into the page. This
// property is only applicable if you are supporting IE6/7 (or IE8 operating
// in "IE7 compatibility" mode).
- //
+ //
// In addition, the property must be set to the
// path of the included "document-domain.html" file, which can be renamed or
// modified if necessary (note that the document.domain specified must be the
// same in both your main JavaScript as well as in this file).
- //
+ //
// Usage:
- //
+ //
// jQuery.fn.hashchange.domain = document.domain;
-
+
// Property: jQuery.fn.hashchange.src
- //
+ //
// If, for some reason, you need to specify an Iframe src file (for example,
// when setting document.domain as in ), you can
// do so using this property. Note that when using this property, history
// won't be recorded in IE6/7 until the Iframe src file loads. This property
// is only applicable if you are supporting IE6/7 (or IE8 operating in "IE7
// compatibility" mode).
- //
+ //
// Usage:
- //
+ //
// jQuery.fn.hashchange.src = 'path/to/file.html';
-
+
$.fn[ str_hashchange ].delay = 50;
/*
$.fn[ str_hashchange ].domain = null;
$.fn[ str_hashchange ].src = null;
*/
-
+
// Event: hashchange event
- //
+ //
// Fired when location.hash changes. In browsers that support it, the native
// HTML5 window.onhashchange event is used, otherwise a polling loop is
// initialized, running every milliseconds to
// see if the hash has changed. In IE6/7 (and IE8 operating in "IE7
// compatibility" mode), a hidden Iframe is created to allow the back button
// and hash-based history to work.
- //
+ //
// Usage as described in :
- //
+ //
// > // Bind an event handler.
// > jQuery(window).hashchange( function(e) {
// > var hash = location.hash;
// > ...
// > });
- // >
+ // >
// > // Manually trigger the event handler.
// > jQuery(window).hashchange();
- //
+ //
// A more verbose usage that allows for event namespacing:
- //
+ //
// > // Bind an event handler.
// > jQuery(window).bind( 'hashchange', function(e) {
// > var hash = location.hash;
// > ...
// > });
- // >
+ // >
// > // Manually trigger the event handler.
// > jQuery(window).trigger( 'hashchange' );
- //
+ //
// Additional Notes:
- //
+ //
// * The polling loop and Iframe are not created until at least one handler
// is actually bound to the 'hashchange' event.
// * If you need the bound handler(s) to execute immediately, in cases where
// a location.hash exists on page load, via bookmark or page refresh for
- // example, use jQuery(window).hashchange() or the more verbose
+ // example, use jQuery(window).hashchange() or the more verbose
// jQuery(window).trigger( 'hashchange' ).
// * The event can be bound before DOM ready, but since it won't be usable
// before then in IE6/7 (due to the necessary Iframe), recommended usage is
// to bind it inside a DOM ready handler.
-
+
// Override existing $.event.special.hashchange methods (allowing this plugin
// to be defined after jQuery BBQ in BBQ's source code).
special[ str_hashchange ] = $.extend( special[ str_hashchange ], {
-
+
// Called only when the first 'hashchange' event is bound to window.
setup: function() {
// If window.onhashchange is supported natively, there's nothing to do..
if ( supports_onhashchange ) { return false; }
-
+
// Otherwise, we need to create our own. And we don't want to call this
// until the user binds to the event, just in case they never do, since it
// will create a polling loop and possibly even a hidden Iframe.
$( fake_onhashchange.start );
},
-
+
// Called only when the last 'hashchange' event is unbound from window.
teardown: function() {
// If window.onhashchange is supported natively, there's nothing to do..
if ( supports_onhashchange ) { return false; }
-
+
// Otherwise, we need to stop ours (if possible).
$( fake_onhashchange.stop );
}
-
+
});
-
+
// fake_onhashchange does all the work of triggering the window.onhashchange
// event for browsers that don't natively support it, including creating a
// polling loop to watch for hash changes and in IE 6/7 creating a hidden
@@ -256,79 +256,79 @@
fake_onhashchange = (function(){
var self = {},
timeout_id,
-
+
// Remember the initial hash so it doesn't get triggered immediately.
last_hash = get_fragment(),
-
+
fn_retval = function(val){ return val; },
history_set = fn_retval,
history_get = fn_retval;
-
+
// Start the polling loop.
self.start = function() {
timeout_id || poll();
};
-
+
// Stop the polling loop.
self.stop = function() {
timeout_id && clearTimeout( timeout_id );
timeout_id = undefined;
};
-
+
// This polling loop checks every $.fn.hashchange.delay milliseconds to see
// if location.hash has changed, and triggers the 'hashchange' event on
// window when necessary.
function poll() {
var hash = get_fragment(),
history_hash = history_get( last_hash );
-
+
if ( hash !== last_hash ) {
history_set( last_hash = hash, history_hash );
-
+
$(window).trigger( str_hashchange );
-
+
} else if ( history_hash !== last_hash ) {
location.href = location.href.replace( /#.*/, '' ) + history_hash;
}
-
+
timeout_id = setTimeout( poll, $.fn[ str_hashchange ].delay );
};
-
+
// vvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvv
// vvvvvvvvvvvvvvvvvvv REMOVE IF NOT SUPPORTING IE6/7/8 vvvvvvvvvvvvvvvvvvv
// vvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvv
$.browser.msie && !supports_onhashchange && (function(){
// Not only do IE6/7 need the "magical" Iframe treatment, but so does IE8
// when running in "IE7 compatibility" mode.
-
+
var iframe,
iframe_src;
-
+
// When the event is bound and polling starts in IE 6/7, create a hidden
// Iframe for history handling.
self.start = function(){
if ( !iframe ) {
iframe_src = $.fn[ str_hashchange ].src;
iframe_src = iframe_src && iframe_src + get_fragment();
-
+
// Create hidden Iframe. Attempt to make Iframe as hidden as possible
// by using techniques from http://www.paciellogroup.com/blog/?p=604.
iframe = $('').hide()
-
+
// When Iframe has completely loaded, initialize the history and
// start polling.
.one( 'load', function(){
iframe_src || history_set( get_fragment() );
poll();
})
-
+
// Load Iframe src if specified, otherwise nothing.
.attr( 'src', iframe_src || 'javascript:0' )
-
+
// Append Iframe after the end of the body to prevent unnecessary
// initial page scrolling (yes, this works).
.insertAfter( 'body' )[0].contentWindow;
-
+
// Whenever `document.title` changes, update the Iframe's title to
// prettify the back/next history menu entries. Since IE sometimes
// errors with "Unspecified error" the very first time this is set
@@ -340,51 +340,51 @@
}
} catch(e) {}
};
-
+
}
};
-
+
// Override the "stop" method since an IE6/7 Iframe was created. Even
// if there are no longer any bound event handlers, the polling loop
// is still necessary for back/next to work at all!
self.stop = fn_retval;
-
+
// Get history by looking at the hidden Iframe's location.hash.
history_get = function() {
return get_fragment( iframe.location.href );
};
-
+
// Set a new history item by opening and then closing the Iframe
// document, *then* setting its location.hash. If document.domain has
// been set, update that as well.
history_set = function( hash, history_hash ) {
var iframe_doc = iframe.document,
domain = $.fn[ str_hashchange ].domain;
-
+
if ( hash !== history_hash ) {
// Update Iframe with any initial `document.title` that might be set.
iframe_doc.title = doc.title;
-
+
// Opening the Iframe's document after it has been closed is what
// actually adds a history entry.
iframe_doc.open();
-
+
// Set document.domain for the Iframe document as well, if necessary.
domain && iframe_doc.write( '' );
-
+
iframe_doc.close();
-
+
// Update the Iframe's hash, for great justice.
iframe.location.hash = hash;
}
};
-
+
})();
// ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
// ^^^^^^^^^^^^^^^^^^^ REMOVE IF NOT SUPPORTING IE6/7/8 ^^^^^^^^^^^^^^^^^^^
// ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
-
+
return self;
})();
-
+
})(jQuery,this);
diff --git a/js/jquery.mobile.links.js b/js/jquery.mobile.links.js
index ba54af179ad..a4056ede596 100644
--- a/js/jquery.mobile.links.js
+++ b/js/jquery.mobile.links.js
@@ -8,7 +8,7 @@
(function( $, undefined ) {
$( document ).bind( "pagecreate create", function( e ){
-
+
//links within content areas
$( e.target )
.find( "a" )
diff --git a/js/jquery.mobile.navigation.pushstate.js b/js/jquery.mobile.navigation.pushstate.js
index da0bb9db176..bc03492f3f4 100644
--- a/js/jquery.mobile.navigation.pushstate.js
+++ b/js/jquery.mobile.navigation.pushstate.js
@@ -62,7 +62,7 @@
if( self.onHashChangeDisabled ){
return;
}
-
+
var href, state,
hash = location.hash,
isPath = $.mobile.path.isPath( hash );
diff --git a/js/jquery.mobile.nojs.js b/js/jquery.mobile.nojs.js
index 7804f41a64c..2736aec2b18 100644
--- a/js/jquery.mobile.nojs.js
+++ b/js/jquery.mobile.nojs.js
@@ -9,7 +9,7 @@
$( document ).bind( "pagecreate create", function( e ){
$( ":jqmData(role='nojs')", e.target ).addClass( "ui-nojs" );
-
+
});
})( jQuery );
\ No newline at end of file
diff --git a/js/jquery.mobile.page.sections.js b/js/jquery.mobile.page.sections.js
index 01baca500be..255d11d20a0 100644
--- a/js/jquery.mobile.page.sections.js
+++ b/js/jquery.mobile.page.sections.js
@@ -15,11 +15,11 @@ $.mobile.page.prototype.options.footerTheme = "a";
$.mobile.page.prototype.options.contentTheme = null;
$( ":jqmData(role='page'), :jqmData(role='dialog')" ).live( "pagecreate", function( e ) {
-
+
var $page = $( this ),
o = $page.data( "page" ).options,
pageTheme = o.theme;
-
+
$( ":jqmData(role='header'), :jqmData(role='footer'), :jqmData(role='content')", this ).each(function() {
var $this = $( this ),
role = $this.jqmData( "role" ),
@@ -28,12 +28,12 @@ $( ":jqmData(role='page'), :jqmData(role='dialog')" ).live( "pagecreate", functi
leftbtn,
rightbtn,
backBtn;
-
- $this.addClass( "ui-" + role );
+
+ $this.addClass( "ui-" + role );
//apply theming and markup modifications to page,header,content,footer
if ( role === "header" || role === "footer" ) {
-
+
var thisTheme = theme || ( role === "header" ? o.headerTheme : o.footerTheme ) || pageTheme;
//add theme class
diff --git a/tests/functional/addrbar.html b/tests/functional/addrbar.html
index 8007a1cc84c..69cdf69f89d 100755
--- a/tests/functional/addrbar.html
+++ b/tests/functional/addrbar.html
@@ -8,7 +8,7 @@
-
+
-
+
-
-
+
+
Event Logger
-
+
Touch events on this page will log out below, prepending to the top as they arrive.
Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Nullam id dolor id nibh ultricies vehicula ut id elit. Nulla vitae elit libero, a pharetra augue.
Nullam quis risus eget urna mollis ornare vel eu leo. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Nulla vitae elit libero, a pharetra augue. Maecenas sed diam eget risus varius blandit sit amet non magna.
- 
France 
Norway 
United States 
Germany 
Great Britain 
Finland 
@@ -30,11 +30,11 @@ 
-
+
