设置jQuery Mobile脚本

我是jQuery手机新手。 我完全知道如何引用我所有的脚本和CSS文件。 但是现在我对如何embedded我自己的代码有点困惑。 以编码正常的jQuery为例，我们使用：

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

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

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

所以我embedded了我所有的代码。

应该所有的代码在绑定？ 我只是有点困惑，或者当我想在代码中embedded代码？ 是页面加载时，我想要执行的代码？

还有什么是mobileinit和pageinit之间的区别？

Answer 1

更新：

jQuery Mobile 1.4

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

1. pageshow

   • replace： pagecontainershow

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

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

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

   • build议：使用pagebeforeshow代替将事件附加到特定页面。
     

     演示

2. pagehide

   • replace： pagecontainerhide

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

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

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

   • build议：使用pagebeforehide代替将事件附加到特定页面。
     

     演示

3. pageinit

   • replace： 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）

  这些事件几乎是一样的。 在他们的小部件自动初始化，并开始增强内容标记。 它们有用于覆盖小部件对特定元素的默认值。

   $(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）

  对于一个没有被浏览过的页面，一次为一个caching/浏览过的页面，它会触发两次。 它省略了数据的一个对象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上触发，但在页面转换/animation发生之前触发。

• pagebeforeshow ： ^（3）

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

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

  转换/animation完成，并显示页面Y.

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

  转换/animation在第X页完成，并且被隐藏。

演示

---

图（jQM 1.4） ^（5）

---

^{（1）一次起火。}

^{（2）新页面激发两次，caching页面激活一次。}

^{（3）每当发生火灾时。}

^{（4）自jQM 1.4 弃用 ， 并将在jQM 1.5上删除}

^{（5）资源：PageContainer事件链接1和链接2}