[轉載]Jquery mobile 新手問題總彙

原文連結： http://www.wglong.com/main/artical!details?id=4

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

歡迎 

向我推薦 比較典型的常見問題，我會記錄并整理進文章，友善自己更友善大家。

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();
}       

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: 18px 18px;
  }
  ...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 ...還有什麼需要補充問題？

作者：

Candyメ奶糖

出處：

http://www.cnblogs.com/Candies/

本文版權歸作者和部落格園共有，歡迎轉載，但未經作者同意必須保留此段聲明，且在文章頁面明顯位置給出原文連接配接，否則保留追究法律責任的權利。

博文來源廣泛，如原作者認為我侵犯知識産權，請盡快給我發郵件

[email protected]

聯系，我将以第一時間删除相關内容。