首頁  >  文章  >  web前端  >  jQueryMobile之Helloworld與頁面切換的方法_jquery

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

WBOY
WBOY原創
2016-05-16 16:15:571083瀏覽

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

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

複製程式碼 程式碼如下:
 
 
 
 
a 
 
 
 
 
 
 
 
 
 
 
 

 
 
 
   

Title

 
 
 
 
 
   

中文是沒有問題的aaa

 
 
 
 
 
     
 
     
     
           
           
  • a
  •  
           
  • b
  •  
           
  • c
  •  
         
 
   
 
 
  
  
 

於是,就可以寫出如下的網頁:

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

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

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

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn