開(kāi)始學(xué)習(xí) jQuery Mobile

lamp盡管jQuery Mobile兼容所有的移動(dòng)設(shè)備，但是并不能完全兼容PC機(jī)（由于有限的CSS3支持）。

為了更好的閱讀本教程，建議您使用 Google Chrome 瀏覽器。

實(shí)例

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>

<div data-role="page">
  <div data-role="header">
    <h1>歡迎來(lái)到我的主頁(yè)</h1>
  </div>

  <div data-role="main" class="ui-content">
    <p>我現(xiàn)在是一個(gè)移動(dòng)端開(kāi)發(fā)者!!</p>
  </div>

  <div data-role="footer">
    <h1>底部文本</h1>
  </div>
</div> 

</body>
</html>

運(yùn)行實(shí)例 ?

點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例

實(shí)例解析：

  • data-role="page" 是在瀏覽器中顯示的頁(yè)面。

  • data-role="header" 是在頁(yè)面頂部創(chuàng)建的工具條 (通常用于標(biāo)題或者搜索按鈕)

  • data-role="main" 定義了頁(yè)面的內(nèi)容，比如文本， 圖片，表單，按鈕等。

  • "ui-content" 類用于在頁(yè)面添加內(nèi)邊距和外邊距。

  • data-role="footer" 用于創(chuàng)建頁(yè)面底部工具條。

  • 在這些容器中你可以添加任何 HTML 元素 - 段落, 圖片, 標(biāo)題, 列表等。

lampjQuery Mobile 依賴 HTML5 data-* 屬性來(lái)支持各種 UI 元素、過(guò)渡和頁(yè)面結(jié)構(gòu)。不支持它們的瀏覽器將以靜默方式棄用它們。

在頁(yè)面中添加 jQuery Mobile

使用 jQuery Mobile, 你可以再單個(gè) HTML 文件中創(chuàng)建多個(gè)不同的頁(yè)面。

你可以使用不同的href屬性來(lái)區(qū)分使用同一個(gè)唯一id的頁(yè)面：

實(shí)例

<!DOCTYPE html>

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>

<div data-role="page" id="pageone">
  <div data-role="header">
    <h1>歡迎來(lái)到我的主頁(yè)</h1>
  </div>

  <div data-role="main" class="ui-content">
    <p>歡迎! 點(diǎn)擊以下鏈接跳轉(zhuǎn)到第二個(gè)頁(yè)面。 </p>
    <a href="#pagetwo">跳轉(zhuǎn)到第二個(gè)頁(yè)面</a>
  </div>

  <div data-role="footer">
    <h1>底部文本</h1>
  </div>
</div> 

<div data-role="page" id="pagetwo">
  <div data-role="header">
    <h1>歡迎來(lái)到我的主頁(yè)</h1>
  </div>

  <div data-role="main" class="ui-content">
    <p>這是第二個(gè)頁(yè)面。點(diǎn)擊以下鏈接跳轉(zhuǎn)到第一個(gè)頁(yè)面。</p>
    <a href="#pageone">跳轉(zhuǎn)到第一個(gè)頁(yè)面</a>
  </div>

  <div data-role="footer">
    <h1>底部文本</h1>
  </div>
</div> 

</body>
</html>

運(yùn)行實(shí)例 ?

點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例

注意： 當(dāng)web應(yīng)用有大量的內(nèi)容（文本，圖片，腳本等）將會(huì)嚴(yán)重影響加載時(shí)間。如果你不想使用內(nèi)頁(yè)鏈接可以使用外部文件：

<a href="externalfile.html">訪問(wèn)外部文件</a>

頁(yè)面作為對(duì)話框使用

對(duì)話框是用于顯示頁(yè)面信息顯示或者表單信息的輸入。

在鏈接中添加data-rel="dialog"讓用戶點(diǎn)擊鏈接時(shí)彈出對(duì)話框:

實(shí)例

  <!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>

<div data-role="page" id="pageone">
  <div data-role="header">
    <h1>歡迎來(lái)到我的主頁(yè)</h1>
  </div>

  <div data-role="main" class="ui-content">
    <p>歡迎!</p>
    <a href="#pagetwo">彈出對(duì)話框</a>
  </div>

  <div data-role="footer">
    <h1>底部文本</h1>
  </div>
</div> 

<div data-role="page" data-dialog="true" id="pagetwo">
  <div data-role="header">
    <h1>我是一個(gè)對(duì)話框！</h1>
  </div>

  <div data-role="main" class="ui-content">
    <p>對(duì)話框與普通頁(yè)面不同，它顯示在當(dāng)期頁(yè)面上, 但又不會(huì)填充完整的頁(yè)面，頂部圖標(biāo) "X" 用于關(guān)閉對(duì)話框。</p>
    <a href="#pageone">跳轉(zhuǎn)到第一個(gè)頁(yè)面</a>
  </div>

  <div data-role="footer">
    <h1>對(duì)話框底部文本</h1>
  </div>
</div> 


</body>
</html>

運(yùn)行實(shí)例 ?

點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例