【技術】jQuery mobile問題

原文http://www.mansonchor.com/blog/blog_detail_62.html

1.頁面轉場閃屏問題

在頁面轉場時，頁面內容常常會閃動，特別對於slide效果，fade的話沒那麼嚴重但也仍是會覺察到閃動。這對於用戶體驗是致命傷，緣由是手機瀏覽器對於css3的支持還不算太好。解決的方法就是讓頁面轉場效果進行的時候，先將內容背景隱藏，加上下面的一段CSS

1 2 3 4 5 6

/* fixed閃屏 */ .ui-page {       backface- visibility : hidden ;       -webkit-backface- visibility : hidden ; /* Chrome and Safari */       -moz-backface- visibility : hidden ; /* Firefox */  }

須要注意的是你的jquery最好使用 1.7.1或以上的版本，不然有上面的css也可能仍是會閃屏。

1.7版的jquery加多了對CSS3的支持和兼容，能夠說是爲移動端而設計的。

 

2.position fixed問題

jquery mobile在1.1.0版本以前，是沒法真正實現fixed效果的，在header使用fixed的時候，拖動頁面你會看到header一閃一閃的跟下來，這實際是使用js實現header置頂的。

1.1.0版推出後，jquery mobile聲稱他們真正的實現了header fixed，確實從外觀效果來看，是和fixed無異了，咱們也用得很爽。

但在這裏我要說明了，真正意義的css  position:fixed，只有在IOS 5才支持，IOS 4和android各版本的瀏覽器都是不支持的（其它手機操做系統的瀏覽器我沒試過）。這就跟IE6對position:fixed的狀況相似的。jquery mobile可以把header和footer作成fixed是它自己框架的UI功能，並不是解決了瀏覽器的兼容問題。

因此若是你正在作一個項目，設計裏面有不少須要fixed去實現的效果，建議你仍是和設計師們談談吧。不然你將會面臨痛苦的兼容問題。

 

3.頁面page控制、緩存問題

jquery mobile的頁面機制主要分兩種，一是單頁，而是多頁。

單頁就是你在一個 html頁面裏面把全部須要用到的page都寫在裏面了，這個時候頁面之間的轉場一個能夠靠 a標籤裏的href，裏面是想要轉到頁面的ID

1	< a href = "#page_id" ></ a >

單頁裏面寫到的page都會一直存在於dom中，因此不存在緩存的問題，頁面轉換時也不須要ajax去獲取新加載頁面的內容。缺點就是當需求比較多時，在一個html頁面寫完整個app須要的page和相應的js，頁面會顯得臃腫並且很差維護。

那麼咱們更多的是使用多頁的機制，把每一個page獨立寫到不一樣的html頁面裏，在須要轉到對應頁面時，才經過ajax去獲取頁面的內容和js，這樣使咱們的app代碼部署就如咱們網站開發同樣，一個頁面一個html文件。

這樣就會存在一個問題，由於每一個page不像單頁同樣寫在一塊兒，jquery mobile的機制只會把須要顯示的page加載到dom裏面，當離開這個page時，會自動把這個page的dom清除掉，假如你想要保留這個page在dom裏，之後再次顯示，須要加上 data-dom-cache="true" 一屬性

1 2 3

< div data-role = "page" data-dom-cache = "true" >     page內容 </ div >

解決了page緩存的問題，那麼又會遇到page裏的js問題。例如我但願把page的dom緩存下來，可是我又但願每次這個page顯示的時候，觸發執行一些js，那麼這個時候咱們在對應page的事件處理時，就不能用 pageinit而是要用pageshow了，由於pageinit只在這個page從dom加載進來時觸發，若是page緩存了，那麼pageinit只會在第一次時觸發。

1 2 3

$( '#page_id' ).bind( 'pageshow' , function (){      //頁面每次顯示你須要作的 })

除了pageshow，還有pagehide、pageremove、pagebeforeshow、pagebeforehide等等事件響應，都是能夠針對不一樣的需求使用的。

 

4.更多jQuery mobile問題，見：

http://www.wglong.com/main/artical!details?id=4#q10