jQuery Mobile:触发页面事件的顺序是什么?

时间:2012-12-23 10:11:08

标签: javascript jquery events jquery-mobile cordova

我必须为应用程序快速构建原型,并且我想确切地知道插入各种应用程序逻辑的位置。

使用PhoneGap和jQueryMobile时,您可以迭代事件及其触发的顺序吗?

明确了解事件/订单会很棒:

  • 答: 首次打开应用程序时
  • B: 当你改变页面 时(我想不会有一些事件) 了)。
  • C: 当您“最小化”应用 时(例如:当您点击应用中的链接时) 它会带你到短信/电话,或者你只需​​按设备的主页按钮)。
  • D: 还原应用时 (例如:点击“后退”按钮,或者只是 以某种方式“最大化”。

1 个答案:

答案 0 :(得分:24)

简介

此处的所有信息也可以在我的博客ARTICLE中找到,您也可以找到有效的例子。

- 答:初始化

A1 - 使用 deviceReady 事件初始化Phonegap app / framework。

示例:

document.addEventListener("deviceReady", yourCallbackFunction, false);

function deviceReady() {

}

有关暂停的更多信息,请点击此处:http://docs.phonegap.com/en/1.0.0/phonegap_events_events.md.html

A2 - 使用 mobileinit 事件初始化jQuery Mobile app / framework。

示例:

$(document).on("mobileinit", function () {

});

如何检查两个框架是否都已成功加载:https://stackoverflow.com/a/12821151/1848600

- B:更改页面

首先可以在此处找到所有活动:http://jquerymobile.com/test/docs/api/events.html

假设我们有一个页面A和一个页面B,这是一个卸载/加载顺序:

1. page B - event pagebeforecreate

2. page B - event pagecreate

3. page B - event pageinit

4. page A - event pagebeforehide

5. page B - event pagebeforeshow

6. page A - event pageremove

7. page A - event pagehide

8. page B - event pageshow

- C:最小化应用

Phonegap通过 暂停 事件处理此问题。

示例:

document.addEventListener("pause", yourCallbackFunction, false);

有关暂停的更多信息,请点击此处:http://docs.phonegap.com/en/1.0.0/phonegap_events_events.md.html

- D:恢复应用

Phonegap通过 简历 事件处理此问题。

示例:

document.addEventListener("resume", yourCallbackFunction, false);

有关暂停的更多信息,请点击此处:http://docs.phonegap.com/en/1.0.0/phonegap_events_events.md.html

- 最后的话

很少有其他的phonegap和jQM活动,你可以在上面提到的链接中找到它们。

你不应该在jQM app中使用的东西:

$(document).ready(function(){

});

原因:

  

你在jQuery中学到的第一件事就是在里面调用代码   $(document).ready()函数,所以一切都会尽快执行   DOM已加载。但是,在jQuery Mobile中,Ajax用于加载   导航时每个页面的内容都放入DOM中,并准备好DOM   处理程序仅对第一页执行。每当执行代码时   加载并创建新页面,您可以绑定到pageinit事件。   此事件在本页底部详细说明。