Home  >  Article  >  Web Front-end  >  Page initialization and loading events in jQuery mobile web development_jquery

Page initialization and loading events in jQuery mobile web development_jquery

WBOY
WBOYOriginal
2016-05-16 15:27:441032browse

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!');
});

Note: By binding pagebeforecreate and then returning false, you disable the page plugin's own operations. Also, be sure to bind these functions before Jquery Mobile is executed so that they are called during the initial page load. You can use them in the mobileinit event handler.

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:

  • url (string): the absolute or relative address passed to $.mobile.loadPage() through the callback
  • absUrl (string): The absolute address version of the url.
  • dataUrl (string): The filtered version of the absolute address used when identifying the page or updating the browser address
  • deferred (object): The callback function that calls preventDefault() for this event must be called for this event
  • resolve() or reject() method allows the changePage() request to be restored.

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:

  • url (string): URL.
  • absUrl (string): The absolute address version of the url.
Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn