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

Mic*_*ael 7 javascript jquery events jquery-mobile cordova

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

您可以在使用PhoneGap和jQueryMobile时迭代它们触发的事件和顺序吗?

很清楚地了解事件/顺序:

  • 答:第一次打开应用程序时.
  • B:当你改变页面时(我想不再有一些事件).
  • C:当您"最小化"应用程序时(例如:当您点击应用程序中的链接时,您将进入短信/呼叫,或者您只需按设备的主页按钮).
  • D:当您恢复应用程序时(例如:点击"后退"按钮,或者只是
    以某种方式"最大化").

Gaj*_*res 24

介绍

此处的所有信息也可以在我的博客文章中找到,您也可以找到工作示例.

- 答:初始化

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

例:

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

function deviceReady() {

}
Run Code Online (Sandbox Code Playgroud)

有关暂停的更多信息,请访问:http://docs.phonegap.com/en/1.0.0/phonegap_events_events.md.html

A2 - 使用mobileinit事件进行jQuery Mobile app/framework初始化.

例:

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

});
Run Code Online (Sandbox Code Playgroud)

如何检查两个框架是否都已成功加载: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
Run Code Online (Sandbox Code Playgroud)

- C:最小化应用程序

Phonegap通过暂停事件处理此事.

例:

document.addEventListener("pause", yourCallbackFunction, false);
Run Code Online (Sandbox Code Playgroud)

有关暂停的更多信息,请访问:http://docs.phonegap.com/en/1.0.0/phonegap_events_events.md.html

- D:恢复应用

Phonegap通过简历事件处理此事.

例:

document.addEventListener("resume", yourCallbackFunction, false);
Run Code Online (Sandbox Code Playgroud)

有关暂停的更多信息,请访问:http://docs.phonegap.com/en/1.0.0/phonegap_events_events.md.html

- 最后的话

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

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

$(document).ready(function(){

});
Run Code Online (Sandbox Code Playgroud)

原因:

你在jQuery中学到的第一件事就是在$(document).ready()函数中调用代码,这样一旦加载了DOM就会执行所有操作.但是,在jQuery Mobile中,Ajax用于在导航时将每个页面的内容加载到DOM中,而DOM ready处理程序仅针对第一个页面执行.要在加载和创建新页面时执行代码,您可以绑定到pageinit事件.此事件在本页底部详细说明.