设置 jQuery Mobile 脚本

Posted 2023-05-09

技术标签:

【中文标题】设置 jQuery Mobile 脚本【英文标题】：Setting up the jQuery Mobile script 【发布时间】：2013-12-25 18:28:22 【问题描述】：

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

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

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

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

);

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

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

还有mobileinit和pageinit有什么区别？

【问题讨论】：

感谢 Juhana 的编辑。我很感激 【参考方案1】：

更新：

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 及以下

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

简介：

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 上完成并且它被隐藏了。