jQueryMobile开发时,遇到的一些问题记录

一、动态加载页面问题

 


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容器。

 

 

二、动态生成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');

问题成功解决。

 

 

三、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部分即可。

 

 

四、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超高问题,返回位置不准确问题。

 

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


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

解决方案,如果页面使用了button那么就使用changePage

如果页面使用了href属性,则在生成目标page后,不需要调用changePage事件。

 

posted @ 2012-11-19 16:41  y0umer  阅读(201)  评论(0编辑  收藏  举报