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

问题描述

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

$(document).ready(function (){//我们在这里嵌入了代码});

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

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

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

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

还有mobileinit和pageinit的区别是什么?

解决方案

更新:

jQuery Mobile 1.4

以下事件已弃用，并将在 jQuery Mobile 1.5 上移除:

1. &链接 2

   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
   });
   

   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?

   Also what is the difference between the mobileinit and pageinit?

   解决方案

   Update:

   jQuery Mobile 1.4

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

   1. pageshow

      • Replacement: pagecontainershow

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

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

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

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

        Demo

   2. pagehide

      • Replacement: pagecontainerhide

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

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

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

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

        Demo

   3. pageinit

      • Replacement: 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.

   Events:

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

   • mobileinit: ⁽¹⁾

     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.

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

     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)}

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

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

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

   • pagebeforeshow: ⁽³⁾

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

   • pageshow: ^{(3) (4)}

     Transition / animation is done and page Y is shown.

   • pagehide: ^{(3) (4)}

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

   Demo

   ---

   Diagrams (jQM 1.4) ⁽⁵⁾

   ---

   ^{(1) Fires once.}

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

   ^{(3) Fires whenever it occurs.}

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

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

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