【摘】jQueryMobile开发问题记录

1、动态加载页面问题

1.存在这样一个页面布局：

    main.html 为主界面A,B为该页面中的三个page，其中A为splitview左部分页面，B为右半部页面

    a1.html 为一个独立的页面

    a2.html为一个独立的页面

2.在main.html中有这样一段script

    $("#A1").live("pagecreate",function(){

      $.getScript("a1.js", function(){

        $.mobile.changePage(a1.html',{transition: "none",changeHash:false});

      });    

    });

    而a1.html中存在一个按钮btn1,a1.js中有这样一段代码

    $("#btn1").live("click",function(){

      $.getScript("a2.js", function(){

        $.mobile.changePage(a2.html',{transition: "none",changeHash:false});

      });    

    });

    不管a1.js仍是a2.js中的按钮触发一个动做，而后动态生成一个页面填充至B,然后使用

    $.mobile.changePage("#B");

    这种操做是不能成功的。

每当a1->a2时，a2页面中的pageceate及pageinit事件会被调用

同理，每当a2->a1时，a1页面中的pageceate及pageinit事件会被调用

为了解决这个问题，

方法1.能够删除a1,a2页面，把这两个页面的html代码合并至main.html中。

方法2.若是这样会致使页面庞大很差维护，也能够采用在页面一加载之初，a1.html的内容使用ajax获取，而且追加至A容器中，当btn1按钮点击时，一样，使用ajax把a2.html的内容追加至A容器。

2、动态生成ListView问题

---

这个问题花了整整一天的时间才解决了。以前总是出现各类奇怪的错误，典型如：

Uncaught cannot call methods on listview prior to initialization; attempted to call method 'refresh'

 

个人listview的容器ul彻底是动态生成的。动态HTML代码以下：

      <div data-role="page" id="pLogin" data-hash="false">

        <div data-role="header" data-theme="b" data-position="inline">

          <h1>欢迎使用</h1>

        </div>

        <div data-role="content">  

      <div class="content-primary">

        <ul data-role="listview" data-inset="true" id="lv1">

          <li><a href="#">AAAAAAAAAAA<a></li>

          <li><a href="#">BBBBBBBBBBB<a></li>

          <li><a href="#">CCCCCCCCCCC<a></li>

          <li><a href="#">DDDDDDDDDDD<a></li>

        </ul>

      </div>

        </div>

      </div>

调用

$("#lv").listview('refresh');时，出错了：Uncaught cannot call methods on listview prior to initialization; attempted to call method 'refresh'

查了N多资料，终于弄明白了。由于个人page容器也是动态生成的。page数据加载至容器时，jquerymobile并无对该page容器进行初始化。所以调用 page的content下的listview组件的refresh方法时，会出现异常。

解决方法：

在dom数据加载完成后，从新生成page

        $("#pLogin").page();

        $("#lv").listview('refresh');

问题成功解决。

3、splitview导航时，导航标签所在页面消失。

存在场景，L为splitview的左部分，R为splitview的右部分。 

在L容器中，存在

<li><a id="a1" onclick="fun1()" href="#d1">导航1</a></li>

<li><a id="a2" onclick="fun1()"href="#d2">导航2</a></li>

在点击a1,a2按钮后，触发fun1，使用ajx去服务器取数据，而且生成一段HTML格式化代码，填充至R容器中。

服务器生成HTML代码以下：

      <div data-role="page" id="d1" data-hash="false">

        <div data-role="header" data-theme="b" data-position="inline">HHHHHH</div>

        <div data-role="content">  

      <div class="content-primary">

            XXXXXXXXXXX

      </div>

        </div>

      </div>

fun1代码：

    html = ${发送ajax后，由服务器生成的格式如上}

   $("#R").append(html);

   $.mobile.changePage("d1");

问题就出现了，是的，R部分显示了XXXXXXXXXXX，是该显示的东东，不过，L部分变成空白了。

琢磨了好久，原来是这样，由于使用ajax，是异步请求，a1点击时锚点对应的d1 页面并无生成，而且填充至R容器，因为找不到d1，所以左部分空白了。

解决方法仍然有两个：

1.在R部分再作一个空白的page,a1,a2的href属性设置为该空白page的id便可

2.在发送异步请求以前，先生成page所在div容器，至少让d1容器先生成出来，不至于a1找不到锚点。在请求完成后，把请求获得的数据填充至content部分便可。

4、header上增长返回按钮时，致使header变高

个人header部分是动态生成的。根据业务须要，有的page须要返回按钮，有的page不须要。业务详情共用一个page,每次点击后，根据业务信息更新header及业务状况，决定是否显示返回按钮。

个人方法：

在header中加入一个按钮header.append('<a onclick="history.go(-1)">返回<a>');

而后再去修改header部分的文字信息。

不过，问题就来了，第一，返回按钮的地方不必定准确。第二，header部分变得特别高。把content部分都遮挡了。

 

解决方案：删除生成了返回按钮，使用page带的返回按钮属性。

<div data-role="page" id="p'+id+'" data-add-back-btn="true" data-back-btn-text="返回">

 

业务逻辑中，使用这样的代码

      if(back){

        $("a[data-rel='back']",header).show();

      }else{

        $("a[data-rel='back']",header).hide();

      }

来决定是否显示返回按钮。

这样作解决了header超高问题，返回位置不许确问题。

5、关于a标签结合changePage使用问题

---

若是点击一个a标签后，调用一个changePage转到目标页面，而在a标签上，又设置了href="#id"属性，这样可能会致使点击a标签后， 页面屡次跳转问题。

解决方案，若是页面使用了button那么就使用changePage

若是页面使用了href属性，则在生成目标page后，不须要调用changePage事件。