设置jQuery Mobile脚本

Question

我是jQuery mobile的新手。我完全知道如何引用我的所有脚本和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（pagecontainer）中，增强（样式）它们，然后根据请求显示它们。从插入DOM到删除页面之前，页面会经历许多步骤（页面事件）。这适用于两种型号，单页和多页。

活动：

我会按顺序查看基本事件和最常用的事件。

• mobileinit：^（1）

  加载使用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：^（1）

  这些事件几乎相同。在它们期间小部件自动初始化并开始增强内容标记。它们可用于覆盖 widget 的特定元素的默认值。

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

• pageinit：^{（1） （4）}

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

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

• pagebeforechange：^（2）

  对于之前未查看的页面和缓存/查看页面的页面，它会触发两次。它省略了数据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：^（3）

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

• pagebeforeshow：^（3）

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

• pageshow：^{（3） （4）}

  完成转换/动画并显示页面 Y 。

• pagehide：^{（3） （4）}

  转换/动画在页面 X 上完成，并且已隐藏。

  

<强> Demo

---

图表（jQM 1.4）^（5）

  



---

  



^{（1）发射一次。}

^{（2）针对新页面触发两次，针对缓存页面触发一次。}

^{（3）无论何时发生火灾。}

^{（4）从jQM 1.4开始不推荐，将在jQM 1.5上删除}

^{（5）资源：PageContainer Events link 1＆amp; link 2}