Home >Web Front-end >JS Tutorial >Page initialization and loading events in jQuery mobile web development_jquery
Page initialization events (pagebeforecreate, pagecreate)
Jquery Mobile will automatically initialize some plug-ins based on the enhanced conventions in the page. For example: assigning the type=range attribute to an input box will automatically generate a custom slider. These automatic initialization behaviors are subject to " page" plug-in control, which deploys deployment events before and after execution, allowing you to operate the page before and after initialization, or even provide initialization behavior yourself to disable automatic initialization. Note that the following page initialization events are only triggered once per "page", Just the opposite of the show/hide event every time the page is shown or hidden
pagebeforecreate: When the page is initialized, touch before initialization.
pagecreate: When the page is initialized, touch after initialization.
$('#aboutPage').live('pagebeforecreate',function(event){ alert('This page was just inserted into the dom!'); }); $('#aboutPage').live('pagecreate',function(event){ alert('This page was just enhanced by Jquery Mobile!'); });
Page loading events (pagebeforeload, pageload)
When an external page is loaded into the DOM, two events are triggered. The first is pagebeforeload, and the second is pageload, or pageloadfailed.
pagebeforeload
Triggered before the loading request is issued. The callback function bound to this event can call preventDefault() on the event to indicate that they will handle the loading request. To do this, the callback function must call resolve() or reject() on the object passed to the callback function through the data object. The object passed to the callback function through the second parameter contains the following properties:
For example:
$( document ).bind( "pagebeforeload", function( event, data ){ //让jqm框架知道由我们来处理load事件. event.preventDefault(); //...加载文档然后插入到DOM中 //在这个回调中,或者通过其他的异步加载手段中, //调用resolve,转入到下面的参数中,加上一个 //包含有页面dom元素的jquery选择器。 data.deferred.resolve( data.absUrl, data.options, page ); });
pageload
Fired after the page has been successfully loaded and inserted into the DOM. The callback function bound to this event will be passed a data object as the second parameter. This object contains the following information: