Jquery mobile 新手問題總匯

此文章將會持續更新，主要收錄一些新手比較常見的問題。

歡迎 向我推薦比較典型的常見問題，我會記錄並整理進文章，方便自己更方便大家。

文章導讀：

• 1、頁面縮放顯示問題
• 2、頁面跳轉后樣式丟失js失效
• 3、跳轉時重復調用pageinit方法的解決辦法
• 4、如何調用loading效果
• 5、動態改變了list的內容，但是內容並沒有變化
• 6、把所有內容放到一個頁面好,還是分開多頁面好
• 7、如何禁掉ajax跳轉
• 8、為什么android2.3系統轉屏無效果？
• 9、如何去掉jqm自帶的組件樣式？
• 10、jquery mobile “閃屏” 問題

2013/4/30 更新內容：

• 11、按鈕按下/划過的狀態感覺反應有些遲緩？

2013/5/1 更新內容：

• 12、jquery mobile各類組件刷新方法

2013/5/7 更新內容：

• 13、在頁面動態添加組件，發現css消失了

2013/5/22 更新內容：

• 14、關於checkbox取值問題

2013/5/28 更新內容：

• 15、點擊屏幕，header和footer會略微抖動？

2013/6/20 更新內容：

• 16、jqm圖標|圖標定位|隱藏圖片上的文字|去除圖標陰影|自定義圖標|去除按鈕陰影/圓角
• 17、jqm組件顯示正常，但是小圖標是“空的”，沒有正常顯示
• 18、$.mobile.changePage方法不能正常跳轉

---

1頁面縮放顯示問題

問題描述：

頁面似乎被縮小了，屏幕太寬了。

解決辦法：

在head標簽內加入：

<meta name="viewport" content="width=device-width, initial-scale=1">

 

2 頁面跳轉后樣式丟失js失效

問題描述：

用ajax跳轉的時候，從a.html跳轉到b.html后，b.html的css以及js都失效了。

解決辦法：

將當前頁面需要用到的css以及js放在<page>div內。

原理：

由於jqm的ajax跳轉的時候，只會把b.html中<page>內的內容加載進dom,而<page>外的代碼都不會加載，所以導致在<page>外的js和css都失效了。

 

3 跳轉時重復調用pageinit方法的解決辦法

問題描述：

用ajax跳轉的時候，從a.html跳轉到b.html，用從b.html返回a.html等等這種反復跳轉的時候，pageinit方法內的代碼會調用多次。

解決辦法：

在page中加入 data-dom-cache="true"屬性，如：

<div data-role="page" id="myPage" data-dom-cache="true">

然后把pageinit方法換為pageshow,如：

 

$("#myPage").live("pageshow", function() {
//...do something
});

 

4 如何調用loading效果

js代碼：

//顯示loading
function showLoading(){
$.mobile.loadingMessageTextVisible = true;
$.mobile.showPageLoadingMsg("a", "加載中..." );
} 

//隱藏loading
function hideLoading(){
$.mobile.hidePageLoadingMsg();
} 

查看Demo »

掃描查看Demo： 

 

5 動態改變了list的內容，但是內容並沒有變化

解決辦法：

調用組件的refresh方法，刷新list,如：

$("#contentList").append(content).listview('refresh');

原理：

jqm組件的顯示原理是把原始的web組件隱藏，而用jqm自定義的UI組件來代替原始的web組件顯示。動態的改變了list的值，其實改變的是原始組件list的值，而jqm的list組件的值並沒有被更新，所以需要調用list組件的refresh方法來使其更新並顯示。

注意:

此問題不只局限於list組件，基本所有的jqm UI組件在改變值之后都需要調用組件對應的refresh方法，例如button組件( $('#id').button('refresh') )等等。更多刷新方法請查看： jquery mobile各類組件刷新方法

 

6 把所有內容放到一個頁面好,還是分開多頁面好？

對於這個問題，說說筆者的個人見解：
#1所有內容放到同一頁面
#2分頁面存放內容
對於#1，如果是比較簡單的網頁內容，可以考慮把內容都放在同一個頁面。但是如果頁面結構很復雜，跳轉頁面比較多的話，那#1就會顯得很臃腫，增加維護的復雜度。
而#2比較適合頁面結構以及頁面比較多的情況，易維護。
性能方面，筆者查了一些資料，也親自做了些實驗，並沒有發現性能上的明顯差異。
結論：根據個人編碼習慣，兩種選擇都是可以的。推薦#1和#2混合使用。

 

7 如何禁掉ajax跳轉？

問題描述：

盡管ajax跳轉有很炫的轉屏動畫，但是在某些時候為了性能或者為了業務需求還是需要禁掉ajax跳轉的。

解決辦法：

禁止ajxa跳轉有兩種情況：

1、禁止局部ajax跳轉

2、禁止全局ajax跳轉

對於#1只需要在a標簽中添加下面的屬性：

data-ajax=“false”

有時我們要用正常的http請求而不用Ajax請求，比如鏈接到別的網站等情況。通過給a標簽加下面的屬性，可以將鏈接指定為正常的http請求:

rel=external

對於#2我們需要設置一個全局的禁止ajax跳轉的方式，js代碼如下：

$(document).bind("mobileinit",function(){// disable ajax nav
			$.mobile.ajaxEnabled=false});

注意：上面的代碼片段需要放在jquery.mobile-xxx.min.js引入之前。

順便說一句，初始化的設置都需要放在此處，例如加載錯誤信息的設置：

$.mobile.pageLoadErrorMessage ='Sorry, something went wrong. Please try again.';

 

8 為什么android2.3系統轉屏無效果？

問題描述：

發現在android2.X系統測試的時候slide等轉屏效果並沒有很好的顯示，而是一閃而過了。但是在android4.0+顯示卻正常。

問題分析：

之所以android2.X系統對slide等轉屏效果支持不是很好，是因為slide等效果都需要3D支持，而android2.X系統不支持3D,

而JQM遇到這種情況的時候把slide等效果“退化”到淡入淡出效果，根據筆者的測試即使這種淡入淡出效果也不盡人意，感覺有點像“閃屏”，在這種情況下直接把轉屏效果設置為none，反而比這種淡入淡出看着更舒服。

既然android2.X不支持3D轉場，但是android4.0支持，我想在4.0系統保留轉場效果，而在2.X上去除轉場效果怎么辦？

解決辦法很簡單，只需要加入下面的代碼即可：

$.mobile.transitionFallbacks.slideout ="none"

更多關於“閃屏”的問題，請看：10、jquery mobile “閃屏” 問題

 

9 如何去掉jqm自帶的組件樣式？

問題描述：

盡管jqm提供了比較美觀的組件樣式，但是有些時候我們需要去掉jqm自帶的樣式。

解決辦法：

解決辦法很簡單，只需要在組件中加上如下屬性就可以了：

data-role='none'

 

10 jquery mobile “閃屏” 問題

官方描述：

Important:Some platforms currently have issues with transitions.We are working on a solution to solve the problem for everyone.If you are experiencing flickers and flashes during or at the end of a transition we suggest the following workaround.Please note that this workaround should be thoroughly tested on the target platform before deployment.This workaround is known to cause performance issues and browser crashes on some platforms, especially Android.Add the following code to your custom css..ui-page {-webkit-backface-visibility: hidden;}

即使加上官方提供的css代碼片段，效果仍舊不盡人意，這個問題到現在仍舊是jqm的一個比較嚴重的問題，希望下個版本可以解決此問題。

除了在8、為什么android2.3系統轉屏無效果？ 中提到的內容外，近日在群里聊天，南京-恰恰虎提出一個可以緩解的方案，即：可以更改jqm的css,讓閃的背景色和頁面的一致，具體修改以下css:

.ui-body-c,.ui-overlay-c {
 border:1px solid #AAA;
 color:#333;
 background:#F9F9F9; //修改這里的顏色代碼}

我想這是一個很好的思路，是個值得一試的方法，但是筆者還沒有親自實驗，需要的朋友可以親自試一試，有空的話記得回來在評論里發表一下實驗結果哦。

 

 

11 按鈕按下/划過的狀態感覺反應有些遲緩？

解決辦法很簡單，只需要加上如下設置就可以了：

$.mobile.buttonMarkup.hoverDelay = "false";

 

12 jquery mobile各類組件刷新方法

1、Combobox or select dropdowns

var myselect = $("#sCountry");
 myselect[0].selectedIndex = 3;
 myselect.selectmenu('refresh');
or
$( ".selector" ).selectmenu( "refresh", true );

2、Listviews

$('#mylist').listview('refresh');

3、Slider control

$('#slider').val(80).slider('refresh');

4、Toggle switch

var myswitch = $("#toggle");
 myswitch[0].selectedIndex = 1;
 myswitch .slider("refresh");

5、Radio buttons

$("input[value=grid]").attr('checked',true).checkboxradio('refresh');
or
$( ".selector" ).prop( "checked", true ).checkboxradio( "refresh" );

6、Checkboxes

$('#checkbox-1').attr('checked',true).checkboxradio('refresh');
or
$( ".selector" ).prop( "checked", true ).checkboxradio( "refresh" );

7、Buttons

$( "[type='submit']" ).button( "refresh" );
or
$( ".selector" ).buttonMarkup( "refresh" );

8、Column-Toggle Table

$( ".selector" ).table-columntoggle( "refresh" );

9、Reflow Table

$( ".selector" ).table( "refresh" );

 

13 在頁面動態添加組件，發現css消失了

首先請試一試上面問題12的解決方案，如果沒有效果的話，那就試試加上.trigger('create')，例如：

$("#id").html(content).trigger('create');
or
$.mobile.pageContainer.trigger("create");

 

14 關於checkbox取值問題

網友流浪的旋律在checkbox取值的時候，發現官網並沒有提供相關方法，通過查閱資料終於找到了取值方法，並找到我分享在此，再次感謝流浪的旋律的分享精神！

取值方式如下：

$(.checkbox)[0].checked

查看checkbox取值Demo »

下載checkbox取值Demo »

 

15 點擊屏幕，header和footer會略微抖動？

問題描述：

在真機運行的時候，輕擊屏幕會發現header和footer有略微的抖動。

解決辦法：

在header和footer中添加如下屬性：

data-tap-toggle="false"

添加這個屬性也可以解決點擊屏幕header或footer消失問題。

 

16 jqm圖標|圖標定位|隱藏圖片上的文字|去除圖標陰影|自定義圖標|去除按鈕陰影/圓角

1、圖標定位 data-iconpos

默認情況下，所有的圖標都放在按鈕的按鈕文本左。此默認可以覆蓋使用 data-iconpos 屬性來設置圖標的右上方（top）、底部（bottom）、右側（right）、左側（left）的文本

2、隱藏圖片上的文字 data-iconpos=”notext”

你也可以創建一個圖標按鈕，設置 data-iconpos=”notext”。按鈕插件將隱藏的文字在屏幕上，但把它作為給屏幕閱讀器和設備支持工具提示上下文鏈接標題屬性。例如，data-iconpos=”right”，data-iconpos=”notext”：

3、自定義圖標 data-icon=”自定義值”

使用自定義圖標，需要指定 data-icon 值。Jquery Mobile的button插件會將生成一個CSS類，它的前綴是ui-icon- ，后面的是data-icon值。假如：有一個按鈕 data-icon 屬性的值為 myapp-email，即 data-icon=“ myapp-email”。那么生產的CSS類是：ui-icon-myapp-email。

然后你可以在你的樣式表寫一個CSS規則來定義 ui-icon-myapp-email。然后在css中指定這個類的背景圖片地址。為了保持與其他圖標的視覺上的一致性，請創建一個白色18×18像素的PNG-8圖標，並且保存為Alpha透明度。

.ui-icon-myapp-email {
  background-image: url("app-icon-email.png");}

這將創建標准分辨率的圖標，但許多設備都有非常高的分辨率的顯示器，就像iPhone 4的視網膜顯示器。添加一個高清圖標，創建一個圖標，36X36像素（18像素大小完全相同的兩倍），並添加第二個規則使用WebKit分鍾裝置像素比例：2。媒體查詢到目標的規則只有以高分辨率顯示器。指定背景圖片高清圖標文件和設置背景像素大小18×18將安裝36個像素圖標到同一個18像素的空間。傳媒查詢塊可以用多個圖標規則：

@media only screen and(-webkit-min-device-pixel-ratio:2){.ui-icon-myapp-email {
    background-image: url("app-icon-email-highres.png");
    background-size:18px18px;}...more HD icon rules go here...}

4、去除按鈕陰影/圓角

data-shadow=”false”
data-corners=”false”

本小結引自：http://www.wpdic.com/?p=59

 

17 jqm組件顯示正常，但是小圖標是“空的”，沒有正常顯示

問題描述：

例如header中的返回按鈕，按鈕的顯示和功能都正常，但是按鈕上的“返回小圖標”沒有顯示。

解決辦法：

這是由於沒有引入jqm的圖片文件引起的，解決方法是在jqm的資源包里找到images文件夾，並把images文件夾引入自己的項目，與jqm的css文件放在同一級目錄里。

 

18 $.mobile.changePage方法不能正常跳轉

問題描述：

$.mobile.changePage不能跳轉，而window.location.href卻可以正常跳轉。

原理：

這個問題牽扯到jqm的跳轉機制了，簡單的說jqm的默認跳轉方式，也就是$.mobile.changePage這種方式，原理是ajax跳轉。聽起來很神秘，其實就是通過ajax動態的把目標頁面的內容加載到當前的dom中。當多頁面跳轉的時候，通過ajax跳轉，就存在ajax跨域的問題。所以解決目前的問題，其實就是解決ajax跨域的問題。

解決辦法：

為了解決跨域問題，我們需要把項目放在服務器環境下。好多朋友不知道什么叫服務器環境，說白了就是把項目部署到WAMP或者TOMCAT等等的服務器下，然后通過http://localhost/xxx 這樣的方式訪問項目。

小結：這里提到了jqm的跳轉機制了，筆者之前寫過一篇文章：JQM進階:轉屏效果的模擬實現，這篇文章完全沒有用jqm，而是模擬了jqm的跳轉過程，想深入了解jqm跳轉的朋友可以看一看這篇文章的實現原理。

 

19 ...還有什么需要補充問題？ 請聯系我

 

原創文章，轉載請注明出處：http://www.wglong.com/main/artical!details?id=4