快捷導(dǎo)航

jQueryMobile之Helloworld與頁面切換的方法

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

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

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

jQuery Mobile是jQuery 在手機(jī)上和平板設(shè)備上的版本。jQuery Mobile 不僅會(huì)給主流移動(dòng)平臺(tái)帶來jQuery核心庫，而且會(huì)發(fā)布一個(gè)完整統(tǒng)一的jQuery移動(dòng)UI框架。支持全球主流的移動(dòng)平臺(tái)。就是能夠迅速能把頁面寫成APP的界面，讓用戶瀏覽網(wǎng)頁，相當(dāng)于在使用布局好的app一樣。

首先要在jQueryMobile（點(diǎn)擊此處本站下載）下載一個(gè)壓縮包，然后把這個(gè)壓縮包的所有內(nèi)容拉到你的站點(diǎn)文件夾，雖然在網(wǎng)頁僅僅是引用jquery.mobile-1.4.5.js與jquery.mobile-1.4.5.css，但是其他的輔助文件除了說明文檔demo文件夾外缺一不可。即使它的js文件與css文件，但它不像Bootstrap一樣，把所有功能集成到一個(gè)js里面，如果缺乏某些文件夾，某些圖標(biāo)可能無法顯示。而且，請把原根文件夾jquery.mobile-1.4.5的名字改成jqmobile或者其他，反正文件夾中別有.-這些標(biāo)點(diǎn)符號(hào)，否則，在網(wǎng)頁中引用jquery.mobile-1.4.5.js與jquery.mobile-1.4.5.css可能失效。

同時(shí)，jquery.mobile作為一個(gè)插件，需要jQuery1.11支持，可以到j(luò)Query官網(wǎng)中下載兼容舊瀏覽器IE6的jQuery1.11，而不是不兼容舊瀏覽器IE6的jQuery2。把下載到的jQuery1.11.js也與jQueryMobile的文件放在一起吧。如下圖：

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

復(fù)制代碼代碼如下:

<!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>  

<!--要求自動(dòng)適應(yīng)屏幕，不允許手機(jī)用戶自由調(diào)整頁面尺寸-->  

<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>  

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

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

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

<!--data-tap-toggle = "false"是禁止用戶點(diǎn)擊頁面內(nèi)容，也就是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圖標(biāo)，在按鈕中跳轉(zhuǎn)到其它頁面，要使用target="_self"，否則鏈接出錯(cuò)-->  

        <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>