W3C中文教程
全球最大最新的中文 Web 技术教程
HTML CSS SQL PHP COLORS MYSQL BOOTSTRAP
 

jQuery Mobile 页面事件



jQuery Mobile 页面事件

在jQuery Mobile中处理页面的事件分为四类:

  • Page Initialization - 在页面创建前,当页面创建时,以及在页面初始化之后
  • Page Load/Unload - 当外部页面加载时、卸载时或遭遇失败时
  • Page Transition - 在页面过渡之前和之后
  • Page Change - 当页面被更改,或遭遇失败时

有关所有jQuery Mobile事件的完整参考,请访问我们的 jQuery Mobile 事件参考手册


jQuery Mobile Initialization 事件

当 jQuery Mobile 中的一张典型页面进行初始化时,它会经历三个阶段:

  • 在页面创建前
  • 页面创建

每个阶段触发的事件都可用于插入或操作代码。

事件 描述
pagebeforecreate 当页面即将初始化,并且在 jQuery Mobile 已开始增强页面之前,触发该事件。
pagecreate 当页面已创建,但增强完成之前,触发该事件。

下面的例子演示在 jQuery Mobile 中创建页面时,何时触发每种事件:

Example

$(document).on("pagebeforecreate",function(event){
  alert("pagebeforecreate event fired!");
});
$(document).on("pagecreate",function(event){
  alert("pagecreate event fired!");
});
尝试一下 »

jQuery Mobile 加载事件

页面加载事件用于外部页面。

每当外部页面加载到DOM中时,都会发生2个事件。 第一个是pagecontainerbeforeload,第二个是 pagecontainerload(success)或 pagecontainerloadfailed(fail)。

下表说明了这些事件:

事件 描述
pagecontainerbeforeload 在进行任何页面加载请求之前触发。
pagecontainerload 页面成功加载并插入DOM后触发。
pagecontainerloadfailed 如果页面加载请求失败,则触发。默认情况下会显示“加载页错误”消息。

以下示例演示了 pagecontainerload 和 pagecontainerloadfailed 事件的工作原理:

Example

$(document).on("pagecontainerload",function(event,data){
  alert("pageload event fired!\nURL: " + data.url);
});
$(document).on("pagecontainerloadfailed",function(event,data){
  alert("Sorry, requested page does not exist.");
});
尝试一下 »

jQuery Mobile 过渡事件

当我们从一个页面转换到另一个页面时,我们也可以使用事件。

页面转换涉及两个页面:“从”页面和“到”页面 - 这些转换将当前活动页面(fromPage)的更改动画化为新页面(toPage)。

事件 描述
pagebeforeshow 在转换动画开始之前在“到”页面上触发
pageshow 在转换动画完成后,在“到”页面上触发
pagebeforehide 在转换动画开始之前的“从”页面触发
pagehide 在转换动画完成后,从“从”页面触发

以下示例演示了转换事件的工作原理:

Example

$(document).on("pagebeforeshow","#pagetwo",function(){ // When entering pagetwo
  alert("pagetwo is about to be shown");
});
$(document).on("pageshow","#pagetwo",function(){ // When entering pagetwo
  alert("pagetwo is now shown");
});
$(document).on("pagebeforehide","#pagetwo",function(){ // When leaving pagetwo
  alert("pagetwo is about to be hidden");
});
$(document).on("pagehide","#pagetwo",function(){ // When leaving pagetwo
  alert("pagetwo is now hidden");
});
尝试一下 »