设置jQuery Mobile脚本

Question

我是jQuery mobile的新手.我完全知道如何引用我的所有脚本和CSS文件.但是现在我对如何嵌入我自己的代码感到有些困惑.以我们使用的正常jQuery编码为例:

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

但对于jQuery Mobile,我有一个代码,我使用:

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

});

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

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

另外mobileinit和pageinit有什么区别？

Answer 1

更新:

jQuery Mobile 1.4

以下事件已弃用,将在jQuery Mobile 1.5上删除:

1. pageshow

   • 替换: pagecontainershow

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

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

   • 此事件无法附加到特定页面ID.

   • 建议:pagebeforeshow改为使用事件将事件附加到特定页面.

     演示

2. pagehide

   • 替换: pagecontainerhide

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

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

   • 此事件无法附加到特定页面ID.

   • 建议:pagebeforehide改为使用事件将事件附加到特定页面.

     演示

3. pageinit

   • 替换: pagecreate

jQuery Mobile 1.3.2及以下版本

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

介绍:

jQuery Mobile使用Ajax导航将页面/视图加载到DOM(pagecontainer)中,增强(样式)它们,然后根据请求显示它们.从插入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:⁽¹⁾

  这些事件几乎相同.在它们期间,小部件自动初始化并开始增强内容标记.它们可用于覆盖窗口小部件特定元素的默认值.

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

• pageinit:^{(1) (4)}

  这类似于.ready()它,当它完全初始化并设置样式但仍未查看时,每页触发一次.使用它将事件绑定到正在初始化的页面.如果您没有指定页面,则每次都会pageinit发生多个事件.

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

• pagebeforechange:⁽²⁾

  对于之前未查看的页面和缓存/查看页面的页面,它会触发两次.它省略了数据对象,toPage并且options包含与将要查看的页面相关的所有详细信息.知道用户来自第X页并转到第Y页非常有用.在这种情况下,可以防止从观看页面的用户ÿ并带他到页面ž.

  $(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:^{(3) (4)}

  过渡/动画完成和页面ÿ所示.

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

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

演示

图表(jQM 1.4)⁽⁵⁾

^{(1)发射一次.}

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

^{(3)发生时发生火灾.}

^{(4)已过时作为JQM 1.4的,将被删除的JQM 1.5}

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