jQueryMobile之Helloworld與頁面切換的方法

更新時間：2015年02月04日 10:41:36 作者：yongh701

這篇文章主要介紹了jQueryMobile之Helloworld與頁面切換的方法,實例分析了jQueryMobile的基礎用法,具有一定參考借鑒價值,需要的朋友可以參考下

本文實例講述了使用jQueryMobile實現(xiàn)滑動翻頁效果的方法。分享給大家供大家參考。具體分析如下：

jQuery Mobile是jQuery 在手機上和平板設備上的版本。jQuery Mobile 不僅會給主流移動平臺帶來jQuery核心庫，而且會發(fā)布一個完整統(tǒng)一的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的文件放在一起吧。如下圖：

之后就可以在網頁編寫頁面，代碼如下，詳情請看注釋。

復制代碼代碼如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  

<html xmlns="http://www.w3.org/1999/xhtml">  

<head>  

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  

<title>a</title>  

<!--要求自動適應屏幕，不允許手機用戶自由調整頁面尺寸-->  

<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">  

<link rel="stylesheet" href="jqmobile/jquery.mobile-1.4.5.css">  

<script src="jqmobile/jquery-1.11.1.js"></script>  

<script src="jqmobile/jquery.mobile-1.4.5.js"></script>  

</head>  

<body>  

<!--定義一個page容器，所有組件都必須寫在里面，要求其填充到整個屏幕-->  

<div data-role="page" data-position="fixed" data-fullscreen="true">  

<!--這就是標題欄，在最新的jqmobile中，自帶的主題只刪得只剩黑白兩色，data-theme="a"為白，data-theme="b"為黑-->  

<!--data-tap-toggle = "false"是禁止用戶點擊頁面內容，也就是content就隱藏頁腳-->  

  <div data-role="header" data-theme="b" data-tap-toggle = "false">  

    <h1>Title</h1>  

  </div>  

  <div data-role="content">  

    <p>中文是沒有問題的aaa</p>  

  </div>  

  <div data-role="footer" data-position="fixed" data-fullscreen="true"  data-theme="b" data-tap-toggle = "false">  

      <div data-role="navbar">  

      <ul>  

      <!--讓a按鈕處于凹陷狀態(tài)，使用info圖標，在按鈕中跳轉到其它頁面，要使用target="_self"，否則鏈接出錯-->  

        <li><a href="#" class="ui-btn-active ui-state-persist" data-icon="info">a</a></li>  

        <li><a href="b.html" target="_self" data-icon="grid">b</a></li>  

        <li><a href="c.html" target="_self" data-icon="star">c</a></li>  

      </ul>  

    </div>  

  </div>   

</div>   

</body>  

</html>