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

问题描述

我必须为应用程序快速构建一个原型，并且我想知道在哪里插入各种应用程序逻辑。

你可以迭代事件和顺序在使用PhoneGap和jQueryMobile时，它们会触发？

清楚了解事件/顺序是非常好的：

• A： 第一次打开应用程序 。


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


• C： 当您最小化应用程式时 （例如：当您点击应用程式中的连结
  
（Ex）时，您可以按照设备的主页按钮启动应用程序。 ：点击返回按钮，或只是

以最大化某种方式）。

解决方案

简介

此处的所有资讯也可以在我的网志中找到 ARTICLE 。您还可以找到工作示例。

- A ：初始化

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

示例：

  document.addEventListener（deviceReady，yourCallbackFunction ，false）; 
 
 function deviceReady（）{
 
} 
  

有关暂停的详情，请参阅： http://docs.phonegap.com/en/ 1.0.0 / phonegap_events_events.md.html

A2 - jQuery Mobile应用/框架初始化 mobileinit / strong>事件。

示例：

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

如何检查两个框架是否都已成功加载：

- B：更改页面

-

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

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

  1。页面B  - 事件pagebeforecreate 
 
 2.页面B-事件pagecreate 
 
 3.页面B-事件pageinit 
 
 4.页面A  - 事件页面beforeforehide 
 
 5.页面B-事件pagebeforeshow 
 
 6.页面A  - 事件页面删除
 
 7.页面A  - 事件页面隐藏
 
 8. page B  - 活动pagehow 
  

- C：最小化应用程式

Phonegap通过 暂停 活动处理此事。

：

  document.addEventListener（pause，yourCallbackFunction，false）; 
  

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

- D：还原应用程式

Phonegap使用 恢复 p>

例如：

  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: http://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屋！