设置jQuery Mobile脚本 [英] Setting up the jQuery Mobile script

问题描述

我是jQuery mobile的新手.我完全知道如何引用我所有的脚本和CSS文件.但是现在我对如何嵌入自己的代码有些困惑. 例如，当我们编码普通的jQuery时，我们使用:

I am new to jQuery mobile. I perfectly know how to reference all my scripts and CSS file. But right now I am a little bit confused on how to embeded my own code. Take for example when coding normal jQuery we use:

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

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

But for jQuery Mobile I have a code which I use:

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

});

所以我将所有代码嵌入其中.

So I embed all my code inside.

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

Should all code be in the bind? I am just a little bit confused on this or when am I suppose to embed a code inside the bind? Is it code that I want to execute when the page loads?

mobileinit和pageinit有什么区别?

Also what is the difference between the mobileinit and pageinit?

推荐答案

更新:

jQuery Mobile 1.4

不推荐使用以下事件，并将在jQuery Mobile 1.5上将其删除:

1. pageshow

• 替换: pagecontainershow

• 用法:用于检索上一页的id.

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

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

演示

Demo

pagehide

• 替换: pagecontainerhide

• 用法:用于检索下一页的id.

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

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

演示

Demo

pageinit

• 替换: pagecreate

---

jQuery Mobile 1.3.2及更低版本

^{不建议使用某些事件，请检查更新}

jQuery Mobile 1.3.2 and below

^{Some events are deprecated, check update}

简介:

jQuery Mobile使用Ajax导航将页面/视图加载到DOM(页面容器)中，对其进行增强(样式化)，然后根据要求显示它们.从页面插入DOM到删除页面，页面经历了许多步骤(页面事件).这适用于单页和多页这两种模型.

Introduction:

jQuery Mobile uses Ajax navigation to load pages/views into DOM (pagecontainer), enhance (style) them and then display them on request. A page goes through many steps (page events) from the time it gets inserted into DOM until it's removed. This applies to both models, Single-Page and Multi-Page.

我将按顺序依次处理基本事件和最常用的事件.

I will go through essential events and most used ones in their sequential order.

• mobileinit:⁽¹⁾

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

The very first event that fires when a website using jQM is loaded. jQM consists of many widgets that have default options. Those widgets are not initiated during that event, therefore, you can override Global Settings / defaults of those widgets once this event fires.

重要提示:您的代码应在jQuery.js之后和jQM.js之前，以成功更改默认值.

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:⁽¹⁾

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

These events are almost the same. During them widgets auto-initialize and start enhance contents markup. They are useful to override widget's defaults of a specific element(s).

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

pageinit:^{(1) (4)}

这与.ready()相似，并且在完全初始化和设置样式但仍无法查看时，每页触发一次.使用它可以将事件绑定到正在初始化的页面.如果您不指定页面，则每次pageinit发生时，您都会得到多个事件.

This is similar to .ready() and it fires once per page when it's fully initialized and styled but still not viewed. Use it to bind events to that page being initialized. If you don't specify a page, you will get muliple events every time pageinit occurs.

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

pagebeforechange:⁽²⁾

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

It fires twice for a page that not has been viewed before and once for a cached/viewed page. It omits an object of data toPage and options, they contain all details related to the page that will be viewed. It's very useful to know the user came from page X and going to page Y. During this event, you can prevent the user from viewing page Y and take him to page 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 上触发，但在页面转换/动画发生之前.

It triggers on the current active page X but before page transition / animation takes place.

pagebeforeshow:⁽³⁾

它将在页面 Y 上触发，该页面将显示在当前页面之后，但仍不会显示过渡效果/动画.

It triggers on the page Y that will be shown after the current page but still no transition / animation.

pageshow:^{(3) (4)}

已完成过渡/动画，并显示页面 Y .

Transition / animation is done and page Y is shown.

pagehide:^{(3) (4)}

过渡/动画在第 X 页上完成，并且已隐藏.

Transition / animation is done on page X and it's hidden.

演示

Demo

---

图(jQM 1.4)⁽⁵⁾

---

Diagrams (jQM 1.4) ⁽⁵⁾

---

^{(1)触发一次.}

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

^{(3)每当它发生时触发.}

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

^{(4) Deprecated as of jQM 1.4 and will be removed on jQM 1.5}

^{(5)资源:PageContainer事件链接1 & 链接2}

^{(5) Resource: PageContainer Events link 1 & link 2}

这篇关于设置jQuery Mobile脚本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！