jQuery Mobile page events
jQuery Mobile page events
The events that deal with the page in jQuery Mobile are divided into four categories:
Page Initialization - in Before page creation, when page is created, and after page initialization
Page Load/Unload - when external page loads, unloads, or encounters failure
Page Transition - Before and after a page transition
Page Change - When a page is changed, or fails
For complete information on all jQuery Mobile events, visit our jQuery Mobile Events Reference.
jQuery Mobile Initialization event
When a typical page in jQuery Mobile is initialized, it goes through three stages:
Before page creation
Page creation
Page initialization
Triggered at each stage Events can be used to insert or manipulate code.
| Event | Description |
|---|---|
| pagebeforecreate | When the page is about to initialize, and in jQuery This event is fired before Mobile has started enhancing the page. |
| pagecreate | This event is triggered when the page has been created but before the enhancement is completed. |
| pageinit | This event is fired when the page has been initialized and after jQuery Mobile has completed page enhancements. |
The following example demonstrates when each event is triggered when creating a page in jQuery Mobile:
Example
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script>
$(document).on("pagebeforecreate",function(){
alert("pagebeforecreate 事件触发 - 页面即将初始化。jQuery Mobile 还未增强页面");
});
$(document).on("pagecreate",function(){
alert("pagecreate 事件触发 - 页面已经创建，但还未增强完成");
});
</script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>头部文本</h1>
</div>
<div data-role="main" class="ui-content">
<p>页面已创建，并增强完成。</p>
</div>
<div data-role="footer">
<h1>底部文本</h1>
</div>
</div>
</body>
</html>Run instance»
Click the "Run instance" button to view the online instance
jQuery Mobile Load event
Page load events belong to external pages.
Whenever the external page loads the DOM, two events will be triggered. The first is pagebeforeload, the second is pageload (success) or pageloadfailed (failed).
These events are explained in the following table:
| Event | Description |
|---|---|
| pagebeforeload | Fires before any page load request is made. |
| pageload | Fires after the page has successfully loaded and inserted into the DOM. |
| pageloadfailed | This event is triggered if the page loading request fails. By default, the "Error Loading Page" message will be displayed. |
The following demonstrates how the pageload and pagloadfailed events work:
Example
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script>
$(document).on("pagecontainerload",function(event,data){
alert("pagecontainerload 事件触发!\nURL: " + data.url);
});
$(document).on("pagecontainerloadfailed",function(event,data){
alert("抱歉，被请求页面不存在。");
});
</script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>页眉文本</h1>
</div>
<div data-role="main" class="ui-content">
<a href="externalpage.html">外部页面</a>
<br><br>
<a href="externalnotexist.html">外部页面不存在</a>
</div>
<div data-role="footer">
<h1>页脚文本</h1>
</div>
</div>
</body>
</html>Run Example»
Click" Run Example" button to view the online example
jQuery Mobile Transition Events
We can also use events when transitioning from one page to the next.
Page transitions involve two pages: a "coming" page and a "going" page - these transitions move the currently active page (the "coming" page) to a new page (the "going" page The page changing process becomes more dynamic.
| Description | |
|---|---|
| Triggered on the "Going" page, before the transition animation starts. | |
| Triggered on the "Going" page, after the transition animation is completed ##. | #pagebeforehide |
| ##pagehide | |
| ##The following demonstrates how the transition time works: |
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script>
$(document).on("pagebeforeshow","#pagetwo",function(){
alert("触发 pagebeforeshow 事件 - 页面二即将显示");
});
$(document).on("pageshow","#pagetwo",function(){
alert("触发 pageshow 事件 - 现在显示页面二");
});
$(document).on("pagebeforehide","#pagetwo",function(){
alert("触发 pagebeforehide 事件 - 页面二即将隐藏");
});
$(document).on("pagehide","#pagetwo",function(){
alert("触发 pagehide 事件 - 现在隐藏页面二");
});
</script>
</head>
<body>
<div data-role="page" id="pageone">
<div data-role="header">
<h1>页眉文本</h1>
</div>
<div data-role="main" class="ui-content">
<p>页面一</p>
<a href="#pagetwo">转到页面二</a>
</div>
<div data-role="footer">
<h1>页脚文本</h1>
</div>
</div>
<div data-role="page" id="pagetwo">
<div data-role="header">
<h1>页眉文本</h1>
</div>
<div data-role="main" class="ui-content">
<p>页面二</p>
<a href="#pageone">转到页面一</a>
</div>
<div data-role="footer">
<h1>页脚文本</h1>
</div>
</div>
</body>
</html>
