jquery-mobile/js/jquery.mobile.core.js

208 lines
5.8 KiB
JavaScript
Raw Normal View History

2010-09-13 22:22:51 +00:00
/*!
* jQuery Mobile v@VERSION
2010-09-13 22:22:51 +00:00
* http://jquerymobile.com/
*
* Copyright 2010, jQuery Project
* Dual licensed under the MIT or GPL Version 2 licenses.
* http://jquery.org/license
*/
(function( $, window, undefined ) {
2010-11-09 00:17:28 +00:00
//jQuery.mobile configurable options
2010-11-11 16:26:32 +00:00
$.extend( $.mobile, {
//define the url parameter used for referencing widget-generated sub-pages.
2010-11-06 19:29:00 +00:00
//Translates to to example.html&ui-page=subpageIdentifier
//hash segment before &ui-page= is used to make Ajax request
2011-02-01 03:43:17 +00:00
subPageUrlKey: "ui-page",
//anchor links with a data-rel, or pages with a data-role, that match these selectors will be untrackable in history
//(no change in URL, not bookmarkable)
2011-02-01 03:43:17 +00:00
nonHistorySelectors: "dialog",
//class assigned to page currently in view, and during transitions
2011-02-01 03:43:17 +00:00
activePageClass: "ui-page-active",
//class used for "active" button state, from CSS framework
2011-02-01 03:43:17 +00:00
activeBtnClass: "ui-btn-active",
//automatically handle clicks and form submissions through Ajax, when same-domain
ajaxEnabled: true,
//automatically load and show pages based on location.hash
hashListeningEnabled: true,
2011-01-28 06:53:17 +00:00
// TODO: deprecated - remove at 1.0
//automatically handle link clicks through Ajax, when possible
ajaxLinksEnabled: true,
// TODO: deprecated - remove at 1.0
//automatically handle form submissions through Ajax, when possible
ajaxFormsEnabled: true,
2010-11-09 21:08:15 +00:00
//set default transition - 'none' for no transitions
2011-02-01 03:43:17 +00:00
defaultTransition: "slide",
//show loading message during Ajax requests
//if false, message will not appear, but loading classes will still be toggled on html el
loadingMessage: "loading",
//configure meta viewport tag's content attr:
metaViewportContent: "width=device-width, minimum-scale=1, maximum-scale=1",
nativeSelectMenus: false,
//support conditions that must be met in order to proceed
gradeA: function(){
return $.support.mediaquery;
},
//TODO might be useful upstream in jquery itself ?
keyCode: {
ALT: 18,
BACKSPACE: 8,
CAPS_LOCK: 20,
COMMA: 188,
COMMAND: 91,
COMMAND_LEFT: 91, // COMMAND
COMMAND_RIGHT: 93,
CONTROL: 17,
DELETE: 46,
DOWN: 40,
END: 35,
ENTER: 13,
ESCAPE: 27,
HOME: 36,
INSERT: 45,
LEFT: 37,
MENU: 93, // COMMAND_RIGHT
NUMPAD_ADD: 107,
NUMPAD_DECIMAL: 110,
NUMPAD_DIVIDE: 111,
NUMPAD_ENTER: 108,
NUMPAD_MULTIPLY: 106,
NUMPAD_SUBTRACT: 109,
PAGE_DOWN: 34,
PAGE_UP: 33,
PERIOD: 190,
RIGHT: 39,
SHIFT: 16,
SPACE: 32,
TAB: 9,
UP: 38,
WINDOWS: 91 // COMMAND
}
2010-11-11 16:26:32 +00:00
});
2011-01-18 06:33:42 +00:00
//trigger mobileinit event - useful hook for configuring $.mobile settings before they're used
2011-02-01 03:43:17 +00:00
$( window.document ).trigger( "mobileinit" );
2011-01-18 06:33:42 +00:00
//support conditions
//if device support condition(s) aren't met, leave things as they are -> a basic, usable experience,
//otherwise, proceed with the enhancements
if ( !$.mobile.gradeA() ) {
return;
}
2011-01-18 06:33:42 +00:00
//define vars for interal use
var $window = $(window),
2011-02-01 03:43:17 +00:00
$html = $( "html" ),
$head = $( "head" ),
2010-11-06 19:29:00 +00:00
//loading div which appears during Ajax requests
//will not appear if $.mobile.loadingMessage is false
$loader = $.mobile.loadingMessage ?
2011-02-01 03:43:17 +00:00
$( "<div class='ui-loader ui-body-a ui-corner-all'>" +
"<span class='ui-icon ui-icon-loading spin'></span>" +
"<h1>" + $.mobile.loadingMessage + "</h1>" +
"</div>" )
: undefined;
2011-01-18 06:33:42 +00:00
//add mobile, initial load "rendering" classes to docEl
2011-02-01 03:43:17 +00:00
$html.addClass( "ui-mobile ui-mobile-rendering" );
2011-01-18 06:33:42 +00:00
//define & prepend meta viewport tag, if content is defined
2011-02-01 03:43:17 +00:00
$.mobile.metaViewportContent ? $( "<meta>", { name: "viewport", content: $.mobile.metaViewportContent}).prependTo( $head ) : undefined;
2011-01-18 06:33:42 +00:00
//expose some core utilities
$.extend($.mobile, {
// turn on/off page loading message.
pageLoading: function ( done ) {
if ( done ) {
$html.removeClass( "ui-loading" );
} else {
if( $.mobile.loadingMessage ){
var activeBtn =$( "." + $.mobile.activeBtnClass ).first();
$loader
.appendTo( $.mobile.pageContainer )
//position at y center (if scrollTop supported), above the activeBtn (if defined), or just 100px from top
.css( {
top: $.support.scrollTop && $(window).scrollTop() + $(window).height() / 2 ||
activeBtn.length && activeBtn.offset().top || 100
} );
}
$html.addClass( "ui-loading" );
}
},
//scroll page vertically: scroll to 0 to hide iOS address bar, or pass a Y value
silentScroll: function( ypos ) {
ypos = ypos || 0;
// prevent scrollstart and scrollstop events
$.event.special.scrollstart.enabled = false;
setTimeout(function() {
window.scrollTo( 0, ypos );
2011-02-01 03:43:17 +00:00
$(document).trigger( "silentscroll", { x: 0, y: ypos });
},20);
setTimeout(function() {
$.event.special.scrollstart.enabled = true;
}, 150 );
}
});
2011-01-18 06:33:42 +00:00
//dom-ready inits
$(function(){
//find present pages
This commit includes simplifications to the hashchange event handling & changePage logic, which results in a few bug fixes and removal of some previous limitations. Details: - jquery.mobile.core.js no longer creates pages from every page and dialog in the DOM automatically at domready. Instead, pages are created as they are referenced via changePage, which can speed up pageload in multi-page documents, and means local "dialogs" referenced via data-rel="dialog" no longer need a data-role="dialog" attribute when served. - in changePage, "from" is now allowed to be undefined. This simplifies the logic involved in showing the first page, which never had a "from" page, and previously needed a custom pageChange workaround to accommodate that. - The pageshow event is no longer used as a callback for returning false and preventing the $.mobile.activePage from being set to the newly shown page. In other words, a page always becomes $.mobile.activePage once its shown now (the only reason this was optional before was because of a dialog restriction that's no longer true) - the hashchange event logic for showing a particular page is now greatly simplified. It either shows the page referenced in location.hash, or if there's no hash it changes to the first page in the dom. This means every pageshow (including the first one) now uses pageChange internally. - the hashchange event listener is no longer disabled when ajaxEnabled == false. Doing this before prevented local non-ajax page navigation from working properly. To disable hashchange listening, use $.mobile.urlHistory.listeningEnabled. We might consider defining (or moving) this on the $.mobile hash later as well for easier access. - The internal var $.mobile.startPage is now $.mobile.firstPage, because it's not necessarily the page you started on, but merely a reference to the first "page" in the dom. - Back buttons are auto-added to every page after the first one you first visit (this includes generated pages, such as those in a multipage document or nested listviews). Keep in mind that a "back" button does not take the place of a standard "home" link, and when building an app with jQuery Mobile, it's good to make use of both (particularly on deep-linked pages). Fixes #908
2011-01-31 22:05:57 +00:00
var $pages = $( "[data-role='page']" );
//add dialogs, set data-url attrs
$pages.add( "[data-role='dialog']" ).each(function(){
$(this).attr( "data-url", $(this).attr( "id" ));
});
This commit includes simplifications to the hashchange event handling & changePage logic, which results in a few bug fixes and removal of some previous limitations. Details: - jquery.mobile.core.js no longer creates pages from every page and dialog in the DOM automatically at domready. Instead, pages are created as they are referenced via changePage, which can speed up pageload in multi-page documents, and means local "dialogs" referenced via data-rel="dialog" no longer need a data-role="dialog" attribute when served. - in changePage, "from" is now allowed to be undefined. This simplifies the logic involved in showing the first page, which never had a "from" page, and previously needed a custom pageChange workaround to accommodate that. - The pageshow event is no longer used as a callback for returning false and preventing the $.mobile.activePage from being set to the newly shown page. In other words, a page always becomes $.mobile.activePage once its shown now (the only reason this was optional before was because of a dialog restriction that's no longer true) - the hashchange event logic for showing a particular page is now greatly simplified. It either shows the page referenced in location.hash, or if there's no hash it changes to the first page in the dom. This means every pageshow (including the first one) now uses pageChange internally. - the hashchange event listener is no longer disabled when ajaxEnabled == false. Doing this before prevented local non-ajax page navigation from working properly. To disable hashchange listening, use $.mobile.urlHistory.listeningEnabled. We might consider defining (or moving) this on the $.mobile hash later as well for easier access. - The internal var $.mobile.startPage is now $.mobile.firstPage, because it's not necessarily the page you started on, but merely a reference to the first "page" in the dom. - Back buttons are auto-added to every page after the first one you first visit (this includes generated pages, such as those in a multipage document or nested listviews). Keep in mind that a "back" button does not take the place of a standard "home" link, and when building an app with jQuery Mobile, it's good to make use of both (particularly on deep-linked pages). Fixes #908
2011-01-31 22:05:57 +00:00
//define first page in dom case one backs out to the directory root (not always the first page visited, but defined as fallback)
$.mobile.firstPage = $pages.first();
//define page container
$.mobile.pageContainer = $pages.first().parent().addClass( "ui-mobile-viewport" );
//cue page loading message
$.mobile.pageLoading();
This commit includes simplifications to the hashchange event handling & changePage logic, which results in a few bug fixes and removal of some previous limitations. Details: - jquery.mobile.core.js no longer creates pages from every page and dialog in the DOM automatically at domready. Instead, pages are created as they are referenced via changePage, which can speed up pageload in multi-page documents, and means local "dialogs" referenced via data-rel="dialog" no longer need a data-role="dialog" attribute when served. - in changePage, "from" is now allowed to be undefined. This simplifies the logic involved in showing the first page, which never had a "from" page, and previously needed a custom pageChange workaround to accommodate that. - The pageshow event is no longer used as a callback for returning false and preventing the $.mobile.activePage from being set to the newly shown page. In other words, a page always becomes $.mobile.activePage once its shown now (the only reason this was optional before was because of a dialog restriction that's no longer true) - the hashchange event logic for showing a particular page is now greatly simplified. It either shows the page referenced in location.hash, or if there's no hash it changes to the first page in the dom. This means every pageshow (including the first one) now uses pageChange internally. - the hashchange event listener is no longer disabled when ajaxEnabled == false. Doing this before prevented local non-ajax page navigation from working properly. To disable hashchange listening, use $.mobile.urlHistory.listeningEnabled. We might consider defining (or moving) this on the $.mobile hash later as well for easier access. - The internal var $.mobile.startPage is now $.mobile.firstPage, because it's not necessarily the page you started on, but merely a reference to the first "page" in the dom. - Back buttons are auto-added to every page after the first one you first visit (this includes generated pages, such as those in a multipage document or nested listviews). Keep in mind that a "back" button does not take the place of a standard "home" link, and when building an app with jQuery Mobile, it's good to make use of both (particularly on deep-linked pages). Fixes #908
2011-01-31 22:05:57 +00:00
// if hashchange listening is disabled or there's no hash deeplink, change to the first page in the DOM
if( !$.mobile.hashListeningEnabled || !$.mobile.path.stripHash( location.hash ) ){
This commit includes simplifications to the hashchange event handling & changePage logic, which results in a few bug fixes and removal of some previous limitations. Details: - jquery.mobile.core.js no longer creates pages from every page and dialog in the DOM automatically at domready. Instead, pages are created as they are referenced via changePage, which can speed up pageload in multi-page documents, and means local "dialogs" referenced via data-rel="dialog" no longer need a data-role="dialog" attribute when served. - in changePage, "from" is now allowed to be undefined. This simplifies the logic involved in showing the first page, which never had a "from" page, and previously needed a custom pageChange workaround to accommodate that. - The pageshow event is no longer used as a callback for returning false and preventing the $.mobile.activePage from being set to the newly shown page. In other words, a page always becomes $.mobile.activePage once its shown now (the only reason this was optional before was because of a dialog restriction that's no longer true) - the hashchange event logic for showing a particular page is now greatly simplified. It either shows the page referenced in location.hash, or if there's no hash it changes to the first page in the dom. This means every pageshow (including the first one) now uses pageChange internally. - the hashchange event listener is no longer disabled when ajaxEnabled == false. Doing this before prevented local non-ajax page navigation from working properly. To disable hashchange listening, use $.mobile.urlHistory.listeningEnabled. We might consider defining (or moving) this on the $.mobile hash later as well for easier access. - The internal var $.mobile.startPage is now $.mobile.firstPage, because it's not necessarily the page you started on, but merely a reference to the first "page" in the dom. - Back buttons are auto-added to every page after the first one you first visit (this includes generated pages, such as those in a multipage document or nested listviews). Keep in mind that a "back" button does not take the place of a standard "home" link, and when building an app with jQuery Mobile, it's good to make use of both (particularly on deep-linked pages). Fixes #908
2011-01-31 22:05:57 +00:00
$.mobile.changePage( $.mobile.firstPage, false, true, false, true );
}
// otherwise, trigger a hashchange to load a deeplink
else {
$window.trigger( "hashchange", [ true ] );
}
2010-09-10 22:23:13 +00:00
});
2011-01-18 06:33:42 +00:00
//window load event
//hide iOS browser chrome on load
$window.load( $.mobile.silentScroll );
2010-09-13 22:22:51 +00:00
})( jQuery, this );