随笔 - 11  文章 - 2  评论 - 1

jQuery Mobile 页面事件总结

一、页面初始化事件(Page initiallization) 在页面创建前,当页面创建时,以及在页面初始化之后。只在第一次加载时执行。

1. pagebeforecreate 页面创建前

[sourcecode language="plain"]

$(document).on("pagebeforecreate", function(){
console.log("执行pagebeforecreate");
});

[/sourcecode]

2. pagecreate页面创建时

[sourcecode language="plain"]

$(document).on("pagecreate", function(){
console.log("执行pagecreate");
});
[/sourcecode]

3. pageinit 页面初始化之后

[sourcecode language="plain"]

$(document).on("pageinit", function(){
console.log("执行pageinit");
});
[/sourcecode]

 

二、页面加载事件(Page Load/Unload) 当外部页面加载时、卸载时或加载失败时

  1. pagebeforeload

[sourcecode language="plain"]

$(document).on("pagebeforeload", function(event, data){
console.log("执行pagebeforeload" + data.url);
});
[/sourcecode]

 

2. pageload

[sourcecode language="plain"]

$(document).on("pageload", function(event, data){
console.log("执行pageload" + data.url);
});
[/sourcecode]

三、页面过渡事件(Page Transition) 在页面过渡之前和之后,每次过渡时都会触发。

  1. pagebeforeshow

[sourcecode language="plain"]

$(document).on("pagebeforeshow", "#index2", function(){
console.log("index-pagebeforeshow");
});

[/sourcecode]

2. pageshow(常用)

[sourcecode language="plain"]

$(document).on("pageshow", "#index2", function(){
console.log("index-pageshow");
});
[/sourcecode]

3. pagebeforehide

[sourcecode language="plain"]

$(document).on("pagebeforehide", "#index", function(){
console.log("index-pagebeforehide");
});
[/sourcecode]

4. pagehide

[sourcecode language="plain"]

$(document).on("pagehide", "#index", function(){
console.log("index-pagehide");
});
[/sourcecode]

页面index过渡到index2,执行顺序为:

a. 页面index的 pagebeforehide

b. 页面index2的pagebeforeshow

c. 页面index的 pagehide

d. 页面index2的 pageshow

 

注意:pageinit和pageshow的区别, pageinit初始化一次,pageshow每次进入页面都会执行。

查看原文:http://www.haojianhua.com/2015/09/23/jquery-mobile-页面事件总结/

posted @ 2016-01-11 16:15  Double405  阅读(345)  评论(0编辑  收藏  举报