JqueryMobile 常見問題

1頁面縮放顯示問題

問題描述:css

頁面彷佛被縮小了,屏幕太寬了。html

解決辦法:jquery

在head標籤內加入: android

<meta name="viewport" content="width=device-width, initial-scale=1">
2 頁面跳轉後樣式丟失js失效

問題描述:web

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

解決辦法:跨域

將當前頁面須要用到的css以及js放在div內。服務器

原理:app

因爲jqm的ajax跳轉的時候,只會把b.html中內的內容加載進dom,而外的代碼都不會加載,因此致使在外的js和css都失效了。dom

 

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

問題描述:

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

解決辦法:

在page中加入 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') )等等。更多刷新方法請查看:12 jquery mobile各種組件刷新方法

 

6 把全部內容放到一個頁面好,仍是分開多頁面好?

對於這個問題,說說筆者的我的看法:
#1全部內容放到同一頁面
#2分頁面存放內容
對於#1,若是是比較簡單的網頁內容,能夠考慮把內容都放在同一個頁面。可是若是頁面結構很複雜,跳轉頁面比較多的話,那#1就會顯得很臃腫,增長維護的複雜度。
而#2比較適合頁面結構以及頁面比較多的狀況,易維護。
性能方面,筆者查了一些資料,也親自作了些實驗,並無發現性能上的明顯差別。
結論:根據我的編碼習慣,兩種選擇都是能夠的。推薦#1和#2混合使用。

 

7 如何禁掉ajax跳轉?

問題描述:

儘管ajax跳轉有很炫的轉屏動畫,可是在某些時候爲了性能或者爲了業務需求仍是須要禁掉ajax跳轉的。

解決辦法:

禁止ajxa跳轉有兩種狀況:

一、禁止局部ajax跳轉

二、禁止全局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"

更多關於「閃屏」的問題,請看:十、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 workaroundis 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的一個比較嚴重的問題,但願下個版本能夠解決此問題。

能夠更改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各種組件刷新方法

一、Combobox or select dropdowns

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

二、Listviews

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

三、Slider control

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

四、Toggle switch

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

五、Radio buttons

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

六、Checkboxes

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

七、Buttons

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

八、Column-Toggle Table

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

九、Reflow Table

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

 

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

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

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

 

14 關於checkbox取值問題

取值方式以下:

$(.checkbox)[0].checked
function showalert(text) { 
     $.mobile.loadingMessageTextVisible = true; 
     $.mobile.showPageLoadingMsg("b", text, true);
  }
 function show(id){
    showalert(id+":"+$("#"+id)[0].checked); 
}

 

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

問題描述:

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

解決辦法:

在header和footer中添加以下屬性:

data-tap-toggle="false"

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

 

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

一、圖標定位 data-iconpos

默認狀況下,全部的圖標都放在按鈕的按鈕文本左。此默承認以覆蓋使用 data-iconpos 屬性來設置圖標的右上方(top)、底部(bottom)、右側(right)、左側(left)的文本

二、隱藏圖片上的文字 data-iconpos=」notext」

你也能夠建立一個圖標按鈕,設置 data-iconpos=」notext」。按鈕插件將隱藏的文字在屏幕上,但把它做爲給屏幕閱讀器和設備支持工具提示上下文連接標題屬性。例 如,data-iconpos=」right」,data-iconpos=」notext」:

三、自定義圖標 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... }

四、去除按鈕陰影/圓角
data-shadow=」false」 data-corners=」false」

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 這樣的方式訪問項目。

相關文章
相關標籤/搜索