jQueryMobile之Helloworld與頁面切換的方法_jquery

本文實例講述了使用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的檔案放在一起吧。如下圖：

之後就可以在網頁寫頁面，程式碼如下，詳情請看註解。

複製程式碼 程式碼如下:

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

 

 
 

 
   

Title

 
 

 
 

 
   

中文是沒有問題的aaa

 
 

 
 

 
     

 
     

 
       
       
• a
 
       
• b
 
       
• c
 
     

 
   

 
 

  

  
 

於是，就可以寫出如下的網頁：

其中w3cschool上對於主題的論述有些過時，請注意，最新版本的jQueryMobile的自帶主題刪得只剩下兩種。 jQueryMobile的自帶圖示如下：

在調試的使用，應該使用谷歌瀏覽器、火狐瀏覽器等高級瀏覽器，因為WIN7自帶的IE8出現很多兼容性的問題，畢竟這貨就是用來寫手機頁面的，因此別妄想把jQueryMobile運用到電腦頁面上去。

希望本文所述對大家的jQueryMobile程式設計有所幫助。