jQueryMobile之Helloworld與頁面切換的方法

2019-11-20 13:13:46

字體：大中小

來源：轉載

供稿：網友

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

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

復制代碼代碼如下:

<!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按鈕處于凹陷狀態，使用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>