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="" target="_blank" rel="external nofollow"  onClick="goTo('myPageTwo.html')">change to myPageTwo</a>
           

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

頁面切換demo下載下傳

了解更多關于webapp開發小知識請關注魏翼超然個人網站