JQuery Mobile框架使用技巧幾則打賞

個人認為,JQuery Mobile是一個非常好的框架,雖然我暫時沒接觸過Sencha Touch,但據說學習成本要比JQuery Mobile大很多,從目前Web應用UI框架選擇少的情況來看,JQuery Mobile是最好的選擇了。

JQuery本身就已經是一個成熟的框架了,JQuery Mobile作為它的附屬品,繼承了write less,do more的傳統。但是作為一個新興起的項目,毛病也是有不少。以下是一些常見問題的解決小技巧,希望做移動Web應用的朋友能用得著。

1.頁面跳轉時,當前頁會先回到頂部,再跳轉到目標頁
相信在JQuery Mobile 1.1.0 版本出來之前,每個人都會遇到的問題。頁面短的還好,假如頁面內容很長,每次頁面轉換時都能明顯的看到滾動條自動回到頂部的一下操作,更可怕的是當你返回上一頁時,JQuery Mobile會恢復你上次瀏覽的位置,滾動條又從頂部跳回你之前的地方。
這種頁面的錯頓感嚴重影響用戶體驗,特別是在android的手機上。各種搜索引擎無果后,曾經我避免把頁面長度做得超過1屏,也嘗試修改JQuery Mobile的源碼(但效果不好),折磨了一段時間后,迎來了JQuery Mobile的更新,然后1.1.0版本解決了這個問題,具體問題所在,也不再追究了。所以如果還被這個問題困擾的同學們,趕緊去下新版的JQuery Mobile。

2.頁面跳轉時閃屏問題
在頁面跳轉時,頁面內容經常會閃動,特別對于slide效果,fade的話沒那么嚴重但也還是會覺察到閃動。這對于用戶體驗是致命傷,原因是手機瀏覽器對于css3的支持還不算太好。解決的方法就是讓頁面跳轉效果進行的時候,先將內容背景隱藏,加上下面的一段CSS

/* fixed閃屏 */
.ui-page {
backface- visibility : hidden ;
-webkit-backface- visibility : hidden ; /* Chrome and Safari */
-moz-backface- visibility : hidden ; /* Firefox */
}

需要注意的是你的JQuery最好使用 1.7.1或以上的版本,否則有上面的css也可能還是會閃屏。
1.7版的jquery加多了對CSS3的支持和兼容,可以說是為移動端而設計的,假如你正在開發移動Web應用,有什么理由不用它呢?

3.Tab選擇之后back不能恢復原始狀態問題
在幾個均有導航的頁面如果其中有一個頁面有Tab頁面,選擇非默認的之后,返回上一個頁面,之后在回來,沒有采用默認的那個tab選中并改變默認顏色。可以采用如下代碼:ui-btn-active表示選中樣式
html:

<!--?header?-->
<div data-role="header"?data-position="fixed">
<a data-icon="arrow-l"?data-Iconpos='left'?data-rel="back">返回</a>
<h1>屬性管理</h1>
<div ?data-role="navbar"?data-grid="a">
<ul class="menuMain">
<li id="1"><a id="TypeURL"?href="#"?class="ui-btn-active">類型</a></li>
<li id="2"><a ?id="areaURL"?href="#">區域</a></li>
</ul>
</div>
<!--?/navbar?-->
</div>

js:

if(tabId=="1"){ //類型
$("#content-first").css("display","block");
$("#content-second").css("display","none");

divId="#content-first";
$("#TypeURL").addClass("ui-btn-active");
$("#areaURL").removeClass("ui-btn-active");

queryURL=AssertAttrWSURL.queryAllAssetType+"/"+stationCode+"/"+pageNum;
}else if(tabId=="2"){ //區域
$("#content-first").css("display","none");
$("#content-second").css("display","block");
divId="#content-second";
$("#TypeURL").removeClass("ui-btn-active");
$("#areaURL").addClass("ui-btn-active");
queryURL=AssertAttrWSURL.queryAllArea+"/"+stationCode+"/"+pageNum;
}

js中引號因wordpress編輯器緣故自動轉換為全角,僅供參考

4.特殊情況下選中相關問題連接沒有加載
解決的方案有兩種:
a.采用非ajax調用(data-ajax='false',rel="external" , data-ajax="false" )
b.采用同一個頁面多個page模式,采用pageshow加載并初始化。

JQuery Mobile框架使用技巧幾則
文章《JQuery Mobile框架使用技巧幾則》二維碼
  • 微信打賞
  • 支付寶打賞

已有43條評論

  1. 我就這個調調

    rel=”external” 放在a標簽里,頁面跳轉鏈接外部 就好了耶

    2013-03-12 14:20 回復
  2. 虎哥

    ie低版本留言體驗還是不好啊,多說插件么?

    2012-07-27 22:10 回復
    • 樸人博客

      沒辦法,快要淘汰的東西了。

      2012-07-27 22:12 回復
      • 韓武

        也是哦。呵呵

        2012-07-27 22:15 回復
  3. 虎哥

    ie低版本留言體驗還是不好啊,多說插件么?

    2012-07-27 22:10 回復
    • 樸人博客

      沒辦法,快要淘汰的東西了。

      2012-07-27 22:12 回復
      • 韓武

        也是哦。呵呵

        2012-07-27 22:15 回復
  4. 路人甲

    現在速度提升不少啊

    2012-07-27 22:08 回復
  5. 路人甲

    現在速度提升不少啊

    2012-07-27 22:08 回復
  6. 虎哥

    不錯的。

    2012-07-27 22:07 回復
  7. 虎哥

    不錯的。

    2012-07-27 22:07 回復
  8. 小勇

    支持博主來了。

    2012-07-27 22:06 回復
  9. 小勇

    支持博主來了。

    2012-07-27 22:06 回復
  10. 琳琳

    代碼高亮換了么?以前不死這樣的,現在這樣還不錯,比以前養眼點,呵呵

    2012-07-27 22:05 回復
    • 樸人博客

      嗯,禁用了插件,自己把關鍵代碼寫函數里了。

      2012-07-27 22:13 回復
  11. 琳琳

    代碼高亮換了么?以前不死這樣的,現在這樣還不錯,比以前養眼點,呵呵

    2012-07-27 22:05 回復
    • 樸人博客

      嗯,禁用了插件,自己把關鍵代碼寫函數里了。

      2012-07-27 22:13 回復
  12. 小杰

    學習了。這個還不錯

    2012-07-27 22:04 回復
  13. 小杰

    學習了。這個還不錯

    2012-07-27 22:04 回復
  14. 即時比分

    看完了,沒接觸過這塊的東西,表示看的很吃力啊

    2012-07-27 16:10 回復
  15. 即時比分

    看完了,沒接觸過這塊的東西,表示看的很吃力啊

    2012-07-27 16:10 回復
  16. 珠寶招聘

    看完還是不懂啊

    2012-07-26 16:59 回復
  17. 珠寶招聘

    看完還是不懂啊

    2012-07-26 16:59 回復
  18. 緣來逝你

    學習了~博主貌似每天都有更啊,很勤的說—很感人!我很少推薦關于愛情的圖文視頻,但這兩部真的很感人,特別是第一部,可能很多人已經看過了,但再看一兩遍也不多,沒看過的抽時間看看吧。《讓愛飛》(Lostlove2011)、《緣來逝你》(LoveC++2012)http://www.sve.com.cn/dv.asp

    2012-07-26 14:47 回復
  19. 緣來逝你

    學習了~博主貌似每天都有更啊,很勤的說

    很感人!我很少推薦關于愛情的圖文視頻,但這兩部真的很感人,特別是第一部,可能很多人已經看過了,
    但再看一兩遍也不多,沒看過的抽時間看看吧。《讓愛飛》(Lostlove2011)、《緣來逝你》(LoveC++2012)
    http://www.sve.com.cn/dv.asp

    2012-07-26 14:47 回復
  20. 籃球比分

    博主更文更得很勤啊

    2012-07-26 11:11 回復
  21. 籃球比分

    博主更文更得很勤啊

    2012-07-26 11:11 回復
  22. zhiqin

    我是不是在hostloc上見過你?

    2012-07-26 01:49 回復
  23. zhiqin

    我是不是在hostloc上見過你?

    2012-07-26 01:49 回復

(必填)

(必填)

(可選)

黑龙江22选5开奖