jquery mobile自訂webapp開發執行個體（一）——前言篇

用jquery mobile做了一段時間的webapp開發，準備用自己的一個小demo做一個模組化的分享

點擊demo示範

手機示範二維碼：

此demo已經是比較老的版本，使用者體驗流暢度確實還存在很大的問題，但在我寫這一系列的webapp開發執行個體後，將會解決大部分問題

下面是以後準備寫到的一些點：

1：談談關於jquery mobile 一些常見問題的解決。（常見問題的解決查看）2：jquery mobile實現多頁面跳轉（不是官網上那樣把所以的page在一個.html檔案內，而是每個page分離到不同的.html檔案內） 3：自訂jquery mobile及自訂jquery mobile主題樣式
4：iScroll實現下拉重新整理，自訂捲軸效果 5：支援左右滑動開啟關閉的面板panel 6：自適應滑動自動播放全屏輪播廣告效果 7：菜單導航內容更多時左右滑動切換 8：像app一樣的啟動頁面效果，滑動到最後一張圖片後進入首頁，或者設定秒數進入首頁 9：自訂jquery mobile表單及表單驗證提示訊息顯示數秒自動隱藏 10：html5 audio自訂添加點擊聲音及html video自訂播放器
11：響應設計（已經有個關於響應設計的小demo）12：ajax頁面跳轉參數傳遞及擷取 13：圖片延時載入加快反映速度 14：webapp html5離線緩衝

差不多就這些了....此執行個體將全部採用jqm1.4.2版本

上面說了一大堆，現在我就說說jqm頁面跳轉吧：

頁面跳轉goTo()函數代碼：

function goTo(page) {$.mobile.changePage(page, {  transition: "slide"});}

此方法調用了jqm對象changePage()方法實現頁面跳轉，

transition: "slide"的值可以修改為自己想要的頁面轉場效果如果：pop   flip  flow等等，這些值都可以在jquery mobile中文api裡有

頁面跳轉a標籤，href不用像原生頁面跳轉那樣寫，直接什麼都不要寫了，跳轉用onClick事件調用goTo()函數來實現跳轉

<a href="" onClick="goTo('myPageTwo.html')">change to myPageTwo</a>

注意：goTo()方法內傳的值是跳轉到的頁面的路徑加檔案名稱，別忘記寫.html

頁面切換demo下載

瞭解