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

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

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

實例

<!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>歡迎來到我的主頁</h1>
  </div>

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

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

</body>
</html>

運行實例 ?

點擊 "運行實例" 按鈕查看在線實例

實例解析：

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

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

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

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

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

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

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

在頁面中添加 jQuery Mobile

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

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

實例

<!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>歡迎來到我的主頁</h1>
  </div>

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

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

<div data-role="page" id="pagetwo">
  <div data-role="header">
    <h1>歡迎來到我的主頁</h1>
  </div>

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

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

</body>
</html>

運行實例 ?

點擊 "運行實例" 按鈕查看在線實例

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

<a href="externalfile.html">訪問外部文件</a>

頁面作為對話框使用

對話框是用于顯示頁面信息顯示或者表單信息的輸入。

在鏈接中添加data-rel="dialog"讓用戶點擊鏈接時彈出對話框:

實例

  <!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>歡迎來到我的主頁</h1>
  </div>

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

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

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

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

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


</body>
</html>

運行實例 ?

點擊 "運行實例" 按鈕查看在線實例