jquery mobile外掛程式使用心得筆記

jquery mobile是一個好架構，雖然我沒用過Sencha Touch，但據說學習成本要比jq mobile大很多，從目前web app ui架構選擇少的情況來看，jq mobile是最好的選擇。

jquery本身已是一個成熟的架構，jq mobile作為它的附屬，繼承了 write less,do more 的傳統。

但是作為一個新興起的項目，毛病也是有不少。我在運用到項目中時，發現了如下問題並積累了下解決方案。

 

1.頁面轉場時，當前頁會先回到頂部，再跳轉到目標頁

相信在jquery mobile 1.1.0 版本出來之前，每個人都會遇到的問題。頁面短的還好，假如頁面內容很長，每次頁面轉換時都能明顯的看到捲軸自動回到頂部的一下操作，更可怕的是當你返回上一頁時，jquery mobile會恢複你上次瀏覽的位置，捲軸又從頂部跳回你之前的地方。

這種頁面的錯頓感嚴重影響使用者體驗，特別是在android的手機上。各種seo/seo.html" target="_blank">搜尋引擎無果後，曾經我避免把頁面長度做得超過1屏，也嘗試修改jq mobile的源碼（但效果不好），折磨了一段時間後，迎來了jquery mobile的更新，然後 1.1.0版本解決了這個問題。

所以如果還被這個問題困擾的同學們，趕緊去下新版的jq mobile。

2.頁面轉場閃屏問題

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

需要注意的是你的jquery最好使用 1.7.1或以上的版本，否則有上面的css也可能還是會閃屏。

代碼如下	複製代碼
/* fixed閃屏 */ .ui-page {       backface-visibility: hidden;       -webkit-backface-visibility: hidden; /* Chrome and Safari */      -moz-backface-visibility: hidden; /* Firefox */  }

 

1.7版的jquery加多了對CSS3的支援和相容，可以說是為移動端而設計的，假如你正在開發web app，有什麼理由不用它呢？

 

3.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去實現的效果，建議你還是和設計師們談談吧。否則你將會面臨痛苦的相容問題，我是有深深的感受阿。

 

4.頁面page控制、緩衝問題

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

單頁就是你在一個 html頁面裡面把所有需要用到的page都寫在裡面了，這個時候頁面之間的轉場一個可以靠 a標籤裡的href，裡面是想要轉到頁面的ID

 

代碼如下	複製代碼
<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" 一屬性

代碼如下	複製代碼
<DIV data-dom-cache="true" data-role="page">    page內容 </DIV>

 

解決了page緩衝的問題，那麼又會遇到page裡的js問題。例如我希望把page的dom緩衝下來，但是我又希望每次這個page顯示的時候，觸發執行一些js，那麼這個時候我們在對應page的事件處理時，就不能用 pageinit而是要用pageshow了，因為pageinit只在這個page從dom載入進來時觸發，如果page緩衝了，那麼pageinit只會在第一次時觸發。

 

代碼如下	複製代碼
$('#page_id').bind('pageshow',function(){     //頁面每次顯示你需要做的 })

除了pageshow，還有pagehide、pageremove、pagebeforeshow、pagebeforehide等等事件響應，都是可以針對不同的需求使用的。