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

1頁面縮放顯示問題

問題描述：

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

解決辦法：

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

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

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

問題描述：

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

解決辦法：

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

原理：

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

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

問題描述：

用ajax跳轉(zhuǎn)的時(shí)候，從a.html跳轉(zhuǎn)到b.html，用從b.html返回a.html等等這種反復(fù)跳轉(zhuǎn)的時(shí)候，pageinit方法內(nèi)的代碼會(huì)調(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?動(dòng)態(tài)改變了list的內(nèi)容，但是內(nèi)容并沒有變化

解決辦法：

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

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

原理：

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

注意:

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

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

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

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

問題描述：

盡管ajax跳轉(zhuǎn)有很炫的轉(zhuǎn)屏動(dòng)畫，但是在某些時(shí)候?yàn)榱诵阅芑蛘邽榱藰I(yè)務(wù)需求還是需要禁掉ajax跳轉(zhuǎn)的。

解決辦法：

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

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

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

對(duì)于#1只需要在a標(biāo)簽中添加下面的屬性：

data-ajax=“false”

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

rel=external

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

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

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

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

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

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

問題描述：

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

問題分析：

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

而JQM遇到這種情況的時(shí)候把slide等效果“退化”到淡入淡出效果，根據(jù)筆者的測(cè)試即使這種淡入淡出效果也不盡人意，感覺有點(diǎn)像“閃屏”，在這種情況下直接把轉(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)于“閃屏”的問題，請(qǐng)看：10、jquery mobile “閃屏” 問題

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

問題描述：

盡管jqm提供了比較美觀的組件樣式，但是有些時(shí)候我們需要去掉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代碼片段，效果仍舊不盡人意，這個(gè)問題到現(xiàn)在仍舊是jqm的一個(gè)比較嚴(yán)重的問題，希望下個(gè)版本可以解決此問題。

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

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

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

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

解決辦法很簡單，只需要加上如下設(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?在頁面動(dòng)態(tài)添加組件，發(fā)現(xiàn)css消失了

首先請(qǐng)?jiān)囈辉嚿厦鎲栴}12的解決方案，如果沒有效果的話，那就試試加上.trigger('create')，例如：

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

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

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

取值方式如下：

$(.checkbox)[0].checked

查看checkbox取值Demo ?

下載checkbox取值Demo ?

15?點(diǎn)擊屏幕，header和footer會(huì)略微抖動(dòng)？

問題描述：

在真機(jī)運(yùn)行的時(shí)候，輕擊屏幕會(huì)發(fā)現(xiàn)header和footer有略微的抖動(dòng)。

解決辦法：

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

data-tap-toggle="false"

添加這個(gè)屬性也可以解決點(diǎn)擊屏幕header或footer消失問題。

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

1、圖標(biāo)定位 data-iconpos

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

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

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

3、自定義圖標(biāo) data-icon=”自定義值”

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

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

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

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

問題描述：

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

解決辦法：

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

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

問題描述：

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

原理：

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

解決辦法：

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

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

總結(jié)

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

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