轉(zhuǎn)載：http://www.wglong.com/main/artical!details?id=4#q6

1頁面縮放顯示問題

問題描述：

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

解決辦法：

在head標簽內(nèi)加入：

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

2?頁面跳轉(zhuǎn)后樣式丟失js失效

問題描述：

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

解決辦法：

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

原理：

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

3?跳轉(zhuǎn)時重復調(diào)用pageinit方法的解決辦法

問題描述：

用ajax跳轉(zhuǎn)的時候，從a.html跳轉(zhuǎn)到b.html，用從b.html返回a.html等等這種反復跳轉(zhuǎn)的時候，pageinit方法內(nèi)的代碼會調(diào)用多次。

解決辦法：

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

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

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

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

4?如何調(diào)用loading效果

js代碼：

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

查看Demo ?

掃描查看Demo：?

5?動態(tài)改變了list的內(nèi)容，但是內(nèi)容并沒有變化

解決辦法：

調(diào)用組件的refresh方法，刷新list,如：

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

原理：

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

注意:

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

6?把所有內(nèi)容放到一個頁面好,還是分開多頁面好？

對于這個問題，說說筆者的個人見解：
#1所有內(nèi)容放到同一頁面
#2分頁面存放內(nèi)容
對于#1，如果是比較簡單的網(wǎng)頁內(nèi)容，可以考慮把內(nèi)容都放在同一個頁面。但是如果頁面結(jié)構(gòu)很復雜，跳轉(zhuǎn)頁面比較多的話，那#1就會顯得很臃腫，增加維護的復雜度。
而#2比較適合頁面結(jié)構(gòu)以及頁面比較多的情況，易維護。
性能方面，筆者查了一些資料，也親自做了些實驗，并沒有發(fā)現(xiàn)性能上的明顯差異。
結(jié)論：根據(jù)個人編碼習慣，兩種選擇都是可以的。但是似乎并不能混合使用，根據(jù)項目選其一使用吧。

7?如何禁掉ajax跳轉(zhuǎn)？

問題描述：

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

解決辦法：

禁止ajxa跳轉(zhuǎn)有兩種情況：

1、禁止局部ajax跳轉(zhuǎn)

2、禁止全局ajax跳轉(zhuǎn)

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

data-ajax=“false”

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

rel=external

對于#2我們需要設(shè)置一個全局的禁止ajax跳轉(zhuǎn)的方式，js代碼如下：

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

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

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

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

8?為什么android2.3系統(tǒng)轉(zhuǎn)屏無效果？

問題描述：

發(fā)現(xiàn)在android2.X系統(tǒng)測試的時候slide等轉(zhuǎn)屏效果并沒有很好的顯示，而是一閃而過了。但是在android4.0+顯示卻正常。

問題分析：

之所以android2.X系統(tǒng)對slide等轉(zhuǎn)屏效果支持不是很好，是因為slide等效果都需要3D支持，而android2.X系統(tǒng)不支持3D,

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

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

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

$.mobile.transitionFallbacks.slideout = "none"

更多關(guān)于“閃屏”的問題，請看：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代碼片段，效果仍舊不盡人意，這個問題到現(xiàn)在仍舊是jqm的一個比較嚴重的問題，希望下個版本可以解決此問題。

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

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

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

11?按鈕按下/劃過的狀態(tài)感覺反應有些遲緩？

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

$.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?在頁面動態(tài)添加組件，發(fā)現(xiàn)css消失了

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

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

14?關(guān)于checkbox取值問題

網(wǎng)友流浪的旋律在checkbox取值的時候，發(fā)現(xiàn)官網(wǎng)并沒有提供相關(guān)方法，通過查閱資料終于找到了取值方法，并找到我分享在此，再次感謝流浪的旋律的分享精神！

取值方式如下：

$(.checkbox)[0].checked

查看checkbox取值Demo ?

下載checkbox取值Demo ?

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

問題描述：

在真機運行的時候，輕擊屏幕會發(fā)現(xiàn)header和footer有略微的抖動。

解決辦法：

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

data-tap-toggle="false"

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

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

1、圖標定位 data-iconpos

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

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

你也可以創(chuàng)建一個圖標按鈕，設(shè)置 data-iconpos=”notext”。按鈕插件將隱藏的文字在屏幕上，但把它作為給屏幕閱讀器和設(shè)備支持工具提示上下文鏈接標題屬性。例如，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”。那么生產(chǎn)的CSS類是：ui-icon-myapp-email。

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

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

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

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

4、去除按鈕陰影/圓角

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

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

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

問題描述：

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

解決辦法：

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

18?$.mobile.changePage方法不能正常跳轉(zhuǎn)

問題描述：

$.mobile.changePage不能跳轉(zhuǎn)，而window.location.href卻可以正常跳轉(zhuǎn)。

原理：

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

解決辦法：

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

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

總結(jié)

以上是生活随笔為你收集整理的Jquery mobile问题总汇的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。