设置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:

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

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

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

但是对于jQuery Mobile我有一个代码:

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

是否所有代码都在绑定中?我只是有点搞不懂这个或者我什么时候应该在绑定中嵌入代码?当页面加载时，是我想执行的代码吗?

Also what is the difference between the mobileinit and pageinit?

mobileinit和pageinit还有什么区别呢?

1 个解决方案

#1

Update:

jQuery Mobile 1.4

The following events are deprecated and will be removed on jQuery Mobile 1.5:

1. pageshow

   pageshow

   • Replacement: pagecontainershow
   • 替换:pagecontainershow

   • Usage: It is used to retrieve id of previous page.

     用法:用于检索上一页的id。

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

   • This event cant be attached to a specific page ID.

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

   • Recommendation: Use pagebeforeshow instead to attach event to specific pages.

     Demo

     演示

2. pagehide

   pagehide

   • Replacement: pagecontainerhide
   • 替换:pagecontainerhide

   • Usage: It is used to retrieve id of next page.

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

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

   • This event cant be attached to a specific page ID.

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

   • Recommendation: Use pagebeforehide instead to attach event to specific pages.

     Demo

     演示

3. pageinit

   pageinit

   • Replacement: pagecreate
   • 替换:pagecreate

---

jQuery Mobile 1.3.2 and below

^{Some events are deprecated, check update}

有些事件已被弃用，请检查更新

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.

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

Events:

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

我将按顺序介绍最重要的事件和最常用的事件。

• mobileinit: ⁽¹⁾

  mobileinit:(1)

  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.

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

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

  重要提示:您的代码应该使用jQuery。js和jQM之前。以成功地更改默认值。

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

  pagebeforecreate pagecreate:(1)

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

  pageinit:(1)(4)

  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.

  这类似于.ready()，在完全初始化和样式化但仍未查看时，每个页面都会触发一次。使用它将事件绑定到正在初始化的页面。如果不指定页面，每次pageinit发生时都将获得muliple事件。

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

• pagebeforechange: ⁽²⁾

  pagebeforechange:(2)

  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.

  它为以前未浏览过的页面触发两次，为缓存/查看页面触发一次。它省略了数据拓扑和选项的对象，它们包含与将要查看的页面相关的所有细节。知道用户来自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: ⁽³⁾

  pagebeforehide:(3)

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

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

• pagebeforeshow: ⁽³⁾

  pagebeforeshow:(3)

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

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

• pageshow: ⁽³⁾⁽⁴⁾

  pageshow:(3)(4)

  Transition / animation is done and page Y is shown.

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

• pagehide: ⁽³⁾⁽⁴⁾

  pagehide:(3)(4)

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

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

Demo

演示

---

Diagrams (jQM 1.4) ⁽⁵⁾

---

^{(1) Fires once.}

(1)火灾。

^{(2) Fires twice for new page and once for cached page.}

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

^{(3) Fires whenever it occurs.}

(3)发生时就生火。

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

(4)从jQM 1.4开始弃用，将在jQM 1.5上删除

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

(5)资源:PageContainer事件链接1和链接2