jQuery Mobile offers several custom events that build upon native events to create useful hooks for development. Note that these events employ various touch, mouse, and window events, depending on event existence, so you can bind to them for use in both handheld and desktop environments. You can bind to these events like you would with other jQuery events, using live()
or bind()
.
pagecreate
event. This event is explained in detail at the bottom of this page.tap
taphold
swipe
Triggers when a horizontal drag of 30px or more (and less than 20px vertically) occurs within 1 second duration but these can be configured:
scrollSupressionThreshold
(default: 10px) – More than this horizontal displacement, and we will suppress scrollingdurationThreshold
(default: 1000ms) – More time than this, and it isn’t a swipehorizontalDistanceThreshold
(default: 30px) – Swipe horizontal displacement must be more than this.verticalDistanceThreshold
(default: 75px) – Swipe vertical displacement must be less than this.swipeleft
swiperight
orientationchange
orientation
property equal to either "portrait" or "landscape". These values are also added as classes to the HTML element, allowing you to leverage them in your CSS selectors. Note that we currently bind to the resize event when orientationChange is not natively supported.scrollstart
scrollstop
Whenever a page is shown or hidden in jQuery Mobile, two events are triggered on that page. The events triggered depend on whether that page is being shown or hidden, so when a page transition occurs, there are actually 4 events triggered: 2 for each page.
pagebeforeshow
pagebeforehide
pageshow
pagehide
Note that all four of these events expose a reference to either the next page (nextPage
) or previous page (prevPage
), depending on whether the page is being shown or hidden, and whether that next or previous page exists (the first ever page shown does not have a previous page to reference, but an empty jQuery object is provided just the same). You can access this reference via the second argument of a bound callback function. For example:
$('div').live('pageshow',function(event, ui){
alert('This page was just hidden: '+ ui.prevPage);
});
$('div').live('pagehide',function(event, ui){
alert('This page was just shown: '+ ui.nextPage);
});
Also, for these handlers to be invoked during the initial page load, you must bind them before jQuery Mobile executes. This can be done in the mobileinit
handler, as described on the global config page.
Internally, jQuery Mobile auto-initializes plugins based on the markup conventions found in a given "page". For example, an input
element with a type
of range
will automatically generate a custom slider control.
This auto-initialization is controlled by the "page" plugin, which dispatches events before and after it executes, allowing you to manipulate a page either pre-or-post initialization, or even provide your own intialization behavior and prevent the auto-initializations from occuring. Note that these events will only fire once per "page", as opposed to the show/hide events, which fire every time a page is shown and hidden.
pagebeforecreate
Triggered on the page being initialized, before initialization occurs.
$('#aboutPage').live('pagebeforecreate',function(event){
alert('This page was just inserted into the dom!');
});
Note that by binding to pagebeforecreate
and returning false
, you can prevent the page plugin from making its manipulations.
$('#aboutPage').live('pagebeforecreate',function(event){
//run your own enhancement scripting here...
return false;
});
pagecreate
Triggered on the page being initialized, 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.
$('#aboutPage').live('pagecreate',function(event){
alert('This page was just enhanced by jQuery Mobile!');
});
We provide a set of "virtual" click 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.
vmouseover
mouseover
eventsvmousedown
mousedown
eventsvmousemove
mousemove
eventsvmouseup
mouseup
eventsvclick
click
eventsvmousecancel
mousecancel
eventsjQuery Mobile exposes the animationComplete
plugin, which you can utilize after adding or removing a class that applies a CSS transition.