jquery - 设置 jQuery Mobile 脚本

Question

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

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

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

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

});

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

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

另外mobileinit和pageinit有什么区别？

Answer 1

Update:

jQuery Mobile 1.4

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

pageshow

替换: pagecontainershow

用途:用于检索id上一页。

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

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

建议:使用 pagebeforeshow 而是将事件附加到特定页面。

Demo

pagehide

替换: pagecontainerhide

用途:用于检索id的下一页。

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

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

建议:使用 pagebeforehide 而是将事件附加到特定页面。

Demo

pageinit

替换: pagecreate

jQuery Mobile 1.3.2 and below

^{Some events are deprecated, check update}

介绍:

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

事件:

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

mobileinit : (1)

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

Important: Your code should go after jQuery.js and before jQM.js to successfully change defaults.

<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()当它完全初始化和设置样式但仍未查看时，它每页触发一次。使用它将事件绑定(bind)到正在初始化的页面。如果不指定页面，每次都会得到多个事件pageinit发生。

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

pagebeforechange : (2)

对于之前未查看过的页面，它会触发两次，对于缓存/查看过的页面会触发一次。它省略了一个数据对象 toPage和 options ，它们包含与将要查看的页面相关的所有详细信息。知道用户来自页面 非常有用X 并转到页面 是 .在此事件期间，您可以阻止用户查看页面 是 并带他到页面 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)

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

pageshow : (3) (4)

过渡/动画完成和页面是 显示。

pagehide : (3) (4)

过渡/动画在页面 上完成X 它是隐藏的。

Demo

图表 (jQM 1.4) (5)

(1) 触发一次。

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

(3) 发生时触发。

(4) 自 jQM 1.4 起已弃用，并将在 jQM 1.5 上删除

(5) 资源:PageContainer 事件 link 1 & link 2