设置 jQuery Mobile 脚本

Question

我是 jQuery 移动新手。我完全知道如何引用我的所有脚本和 CSS 文件。但是现在我对如何嵌入我自己的代码有点困惑。 以我们使用的普通 jQuery 编码为例：

$(document).ready(function (){
   // we embedded codes here
});

但是对于 jQuery Mobile，我有一个我使用的代码：

$(document).bind('pageinit',function (){

});

所以我将所有代码都嵌入其中。

所有代码都应该在绑定中吗？我对此有点困惑，或者我什么时候应该在绑定中嵌入代码？是我要在页面加载时执行的代码吗？

还有mobileinit和pageinit有什么区别？

Answer 1

更新：

jQuery Mobile 1.4

以下事件已被弃用，将在 jQuery Mobile 1.5 中删除：

1. pageshow

   • 替换：pagecontainershow

   • 用途：用于检索上一页的id。

     $(document).on("pagecontainershow", function (e, ui) {
       var previous = ui.prevPage;
     });
     

   • 此事件不能附加到特定的页面 ID。

   • 建议：改用pagebeforeshow 将事件附加到特定页面。

     Demo

2. pagehide

   • 替换：pagecontainerhide

   • 用途：用于检索下一页的id。

     $(document).on("pagecontainerhide", function (e, ui) {
       var next = ui.nextPage;
     });
     

   • 此事件不能附加到特定的页面 ID。

   • 建议：改用pagebeforehide 将事件附加到特定页面。

     Demo

3. pageinit

   • 替换：pagecreate

---

jQuery Mobile 1.3.2 及以下

^{某些事件已被弃用，请检查更新}

简介：

jQuery Mobile 使用 Ajax 导航将页面/视图加载到 DOM（页面容器）中，增强（样式）它们，然后根据请求显示它们。一个页面从它被插入到 DOM 直到它被移除，经历了许多步骤（页面事件）。这适用于两种模型，单页和多页。

事件：

我将按顺序介绍基本事件和最常用的事件。

• mobileinit:⁽¹⁾

  加载使用 jQM 的网站时触发的第一个事件。 jQM 由许多具有默认选项的小部件组成。这些小部件不会在该事件期间启动，因此，一旦此事件触发，您可以覆盖这些 小部件 的 全局设置 / 默认值。

  重要提示：您的代码应该在 jQuery.js 之后和 jQM.js 之前才能成功更改默认值。

  <script src="jQuery.js"></script>
  <script>
    $(document).on("mobileinit", function () {
      $.mobile.page.prototype.options.theme = "b"; // set theme "b" to all pages
    });
  </script>
  <script src="jQuery-Mobile.js"></script>
  

• pagebeforecreate 和 pagecreate：⁽¹⁾

  这些事件几乎相同。在他们widgets自动初始化并开始增强内容标记。它们对于覆盖 widget 的特定元素的默认值很有用。

  $(document).on("pagecreate", "[data-role=page]", function () {
    $(".selector").listview({ icon: "star" }); // changes list items icons to "star"
  });
  

• pageinit：⁽¹⁾⁽⁴⁾

  这类似于.ready()，当它完全初始化和设置样式但仍未查看时，它每页触发一次。使用它将事件绑定到正在初始化的页面。如果不指定页面，每次pageinit发生时都会得到多个事件。

  $(document).on("pageinit", "#myPage" , function () {
    $(this).on("swipeleft", function () {
     // code
    });
  });
  

• pagebeforechange:⁽²⁾

  对于之前未查看过的页面触发两次，对于缓存/查看过的页面触发一次。它省略了数据对象toPage 和options，它们包含与将要查看的页面相关的所有详细信息。知道用户来自页面 X 并转到页面 Y 非常有用。在此活动期间，您可以阻止用户查看页面 Y，并将他带到页面 Z。

  $(document).on("pagebeforechange", function (e, data) {
    if(data.toPage[0].id == "Y") {
      $.mobile.changePage("Z");
      e.preventDefault(); // don't update $.mobile.urlHistory
    }
  });
  

• pagebeforehide: ⁽³⁾

  它在当前活动页面X上触发，但在页面转换/动画发生之前。

• pagebeforeshow:⁽³⁾

  它在页面 Y 上触发，该页面将显示在当前页面之后，但仍然没有过渡/动画。

• pageshow：⁽³⁾⁽⁴⁾

  过渡/动画完成并显示页面Y。

• pagehide：⁽³⁾⁽⁴⁾

  过渡/动画在页面 X 上完成并且它被隐藏了。

Demo

---

图表 (jQM 1.4) ⁽⁵⁾

---

^{(1) 触发一次。}

^{(2) 新页面触发两次，缓存页面触发一次。}

^{(3) 发生时触发。}

^{(4) 从 jQM 1.4 起已弃用，并将在 jQM 1.5 上删除}

^{(5) 资源：PageContainer 事件link 1 & link 2}