本文實例講述了使用jQueryMobile實現滑動翻頁效果的方法。分享給大家供大家參考。具體分析如下:
jQuery Mobile是jQuery 在手機上和平板裝置上的版本。 jQuery Mobile 不僅會為主流行動平台帶來jQuery核心函式庫,還會發佈一個完整統一的jQuery行動UI框架。支援全球主流的行動平台。就是能夠迅速能把頁面寫成APP的介面,讓使用者瀏覽網頁,就相當於使用版面好的app一樣。
首先要在jQueryMobile(點擊此處本站下載)下載一個壓縮包,然後把這個壓縮包的所有內容拉到你的站點文件夾,雖然在網頁僅僅是引用jquery. mobile-1.4.5.js與jquery.mobile-1.4.5.css,但其他的輔助檔案除了說明文檔demo資料夾外缺一不可。即使它的js檔案與css文件,但它不像Bootstrap一樣,把所有功能整合到一個js裡面,如果缺乏某些資料夾,某些圖示可能無法顯示。而且,請把原根資料夾jquery.mobile-1.4.5的名字改成jqmobile或其他,反正資料夾中別有.-這些標點符號,否則,在網頁中引用jquery.mobile-1.4.5.js與jquery.mobile-1.4.5.css可能失效。
同時,jquery.mobile作為一個插件,需要jQuery1.11支持,可以到jQuery官網中下載相容舊瀏覽器IE6的jQuery1.11,而不是不相容舊瀏覽器IE6的jQuery2。把下載到的jQuery1.11.js也與jQueryMobile的檔案放在一起吧。如下圖:
之後就可以在網頁寫頁面,程式碼如下,詳情請看註解。
於是,就可以寫出如下的網頁:
其中w3cschool上對於主題的論述有些過時,請注意,最新版本的jQueryMobile的自帶主題刪得只剩下兩種。 jQueryMobile的自帶圖示如下:
在調試的使用,應該使用谷歌瀏覽器、火狐瀏覽器等高級瀏覽器,因為WIN7自帶的IE8出現很多兼容性的問題,畢竟這貨就是用來寫手機頁面的,因此別妄想把jQueryMobile運用到電腦頁面上去。
希望本文所述對大家的jQueryMobile程式設計有所幫助。