jQuery Mobile：触发页面事件的顺序是什么？ [英] jQuery Mobile : What is the order of page events triggering?

问题描述

我可以为应用程序快速构建一个原型，我想知道哪里插入各种应用程序逻辑。在使用PhoneGap和jQueryMobile时，它们会触发？

清楚了解事件/订单是非常好的：

• A： 首次打开应用程序 。


• B： 当您更改页面 （我猜不会有一些事件
  不再）。


• C： 当您最小化应用程序 （例如：当您点击应用程序
  中的链接时
：点击返回按钮，或者只是

以最大化的方式）。

解决方案

简介

这里找到的所有信息也可以在我的博客 ARTICLE ，您还将找到工作示例。

- A：初始化

A1 - 使用 deviceReady 事件的Phonegap应用程序/框架初始化。 / p>

示例：

  document.addEventLis tener（deviceReady，yourCallbackFunction，false）; 
 
函数deviceReady（）{
 
} 
  

更多关于暂停甚至可以在这里找到： http：// docs。 phonegap.com/en/1.0.0/phonegap_events_events.md.html

A2 - 使用 的jQuery Mobile应用程序/框架初始化例如：

  $（document）.on（mobileinit，function（）{
 
}）; 
  

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

- B：更改页面

首先所有活动都可以在这里找到： http ：//jquerymobile.com/test/docs/api/events.html

说我们有一个页面A和一个页面B，这是一个卸载/加载顺序：

  1。第B页 - 事件页面创建
 
 2.页面B  - 事件页面创建
 
 3.页面B  - 事件页面
 
 4.页面A  - 事件页面前
 
 5.页面B  - 事件页面beforeshow 
 
 6.页面A  - 事件页面删除
 
 7.页面A  - 事件页面隐藏
 
 8.页面B  - 事件页面显示
  

- C：最小化应用程序

Phonegap使用 暂停 事件来处理。

示例：

  document.addEventListener（pause，yourCallbackFunction，false）; 
  

更多关于暂停甚至可以在这里找到： http://docs.phonegap.com/en/1.0.0/phonegap_events_events.md.html

- D：恢复应用程序

Phonegap用 简历 strong>事件。

示例：

  document.addEventListener（resume，yourCallbackFunction，false）; 
  

更多关于暂停甚至可以在这里找到： http://docs.phonegap.com/en/1.0.0/phonegap_events_events.md.html

- 最终单词

还有几个其他phonegap和jQM事件，您可以在上面提到的链接中找到它们。

你不应该在jQM应用程序中使用的东西：

  $文件）.ready（function（）{
 
}）; 
  

原因：

您在jQuery中学习的第一件事是调用
$（document）.ready（）函数中的代码，所以一旦加载
DOM就可以执行一切。然而，在jQuery Mobile中，Ajax用于在导航时将每个页面的
内容加载到DOM中，并且DOM ready
处理程序仅对第一个页面执行。要在加载和创建
新页面时执行代码，可以绑定到pageinit事件。
此页面底部将详细介绍此事件。

I have to build fast a prototype for an application and I would like to know exactly where to insert various application logic.

Could you iterate the events and the order in which they trigger when using PhoneGap and jQueryMobile?

It would be great to have a clear understanding of events/order for:

• A: When you open the application for the first time.
• B: When you change page (I guess there won't be some of the events anymore).
• C: When you "minimize" the app (Ex: when you click a link in the app which takes you to sms/call, or you just press device's home button).
• D: When you restore the app (Ex: hitting the "back" button, or just
  "maximize" it somehow).

解决方案

Intro

All information found here can also be found in my blog ARTICLE, you will also find working examples.

- A: Initialization

A1 - Phonegap app/framework initialization with the deviceReady event.

Example:

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

function deviceReady() {

}

More about pause even can be found here: http://docs.phonegap.com/en/1.0.0/phonegap_events_events.md.html

A2 - jQuery Mobile app/framework initialization with the mobileinit event.

Example:

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

});

How to check if both frameworks are successfully loaded: https://stackoverflow.com/a/12821151/1848600

- B: Change page

First all events can be found here: http://jquerymobile.com/test/docs/api/events.html

Lets say we have a page A and a page B, this is a unload/load order:

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: Minimize app

Phonegap handles this with a pause event.

Example:

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

More about pause even can be found here: http://docs.phonegap.com/en/1.0.0/phonegap_events_events.md.html

- D: Restore app

Phonegap handles this with a resume event.

Example:

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

More about pause even can be found here: http://docs.phonegap.com/en/1.0.0/phonegap_events_events.md.html

- Final words

There are few other phonegap and jQM events and you can find them in links mentioned above.

Something you should not use in jQM app:

$(document).ready(function(){

});

Reason:

The first thing you learn in jQuery is to call code inside the $(document).ready() function so everything will execute as soon as the DOM is loaded. However, in jQuery Mobile, Ajax is used to load the contents of each page into the DOM as you navigate, and the DOM ready handler only executes for the first page. To execute code whenever a new page is loaded and created, you can bind to the pageinit event. This event is explained in detail at the bottom of this page.

这篇关于jQuery Mobile：触发页面事件的顺序是什么？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！