【摘】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事件。