jQuery Mobile page events
jQuery Mobile page events
Events in jQuery Mobile pages dealing with are divided into four categories:
- Page Initialization - before the page is created when the page is created, and the page after initialization
- Page Load / Unload - when an external page loading, unloading or when first fails
- Page Transition - page transition before and after
- Page Change - When the page is changed, or face failure
For complete information on all events jQuery Mobile, please visit our jQuery Mobile Event Manual .
jQuery Mobile Initialization event
When jQuery Mobile in a typical page is initialized, it will go through three stages:
- Before page creation
- Page creation
- Page initialization
Event triggers can be used in each stage of the operation code or insert.
| event | description |
|---|---|
| pagebeforecreate | When the page is about to initialize, and before jQuery Mobile enhanced page has begun to trigger the event. |
| pagecreate | When the page has been created, but before the completion of enhancements, triggered the event. |
| pageinit | When the page is initialized, and after jQuery Mobile enhanced page has been completed, triggering the event. |
The following example demonstrates the jQuery Mobile when you create a page, when to trigger each event:
Examples
alert ( "pagebeforecreate event trigger!");
});
$ (Document) .on ( "pagecreate", function (event) {
alert ( "pagecreate event trigger!");
});
try it"
jQuery Mobile Load event
Page load event belongs to an external page.
Whenever an external page loading DOM, two events will be triggered. The first one is pagebeforeload, the second is pageload (success) or pageloadfailed (failure).
The following table explains these events:
| event | description |
|---|---|
| pagebeforeload | Prior to any request for a page to load the trigger. |
| pageload | The page was successfully loaded and inserted DOM triggered. |
| pageloadfailed | If a page load request fails, the event is triggered. By default, "Error Loading Page" message will be displayed. |
The following presentation pageload and pagloadfailed event works:
Examples
alert("触发 pageload 事件！\nURL: " + data.url);
});
$(document).on("pageloadfailed",function(event,data){
alert(";抱歉，被请求页面不存在。");
});
try it"
jQuery Mobile transition event
We can also use the event during the transition from one to the next.
Page transitions involving two pages: a "to" page and a "Go" page - these transitions make the current active page ( "to" page) to the new page ( "go to" change course page becomes more dynamic.
| event | description |
|---|---|
| pagebeforeshow | In the "go" Page triggered before the transition animation begins. |
| pageshow | In the "go" screen trigger, after the completion of the transition animation. |
| pagebeforehide | In the "to" trigger page, before the transition animation begins. |
| pagehide | In the "to" screen trigger, after the completion of the transition animation. |
The following illustrates the principle of transition time:
Examples
alert("页面二即将显示");
});
$(document).on("pageshow","#pagetwo",function(){ // 当进入页面二时
alert("现在显示页面二");
});
$(document).on("pagebeforehide","#pagetwo",function(){ // 当进入页面二时
alert("页面二即将隐藏");
});
$(document).on("pagehide","#pagetwo",function(){ // When leaving pagetwo
alert("现在隐藏页面二");
});
try it"