jQuery Mobile
定義：是一種爲觸控優化的web框架，用於創建移動web 應用程序
適用於所有流行的智能手機和平板電腦
使用HTML5、CSS3、JavaScript、AJAX，通過儘可能少的代碼來完成對頁面的佈局
優點：會自動爲網頁設計交互的易用外觀，並能在所有移動設計上保持一致
使用：從 http://jquerymobile.com/download/ 下載資源庫
從 CDN 引用 jQuery Mobile:
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.1/jquery.mobile-1.4.1.min.css" />
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.1/jquery.mobile-1.4.1.min.js"></script>
</head>
基本屬性定義： data-role="page" //顯示在瀏覽器中的頁面 <div data-role="page">....</div>
data-role="header" //創建頁面上方的工具欄 （常用於標題和搜索按鈕） <div data-role="header">....</div>
data-role="content" // 真正定義頁面的內容 <div data-role="content">....</div>
data-role="footer" //創建頁面底部的工具欄 <div data-role="footer">....</div>
data-rel="dialog" //添加在鏈接處，此時用戶點擊該鏈接時，會以對話框形式呈現將要跳轉的頁面
<a href="#otherLink" data-role="dialog">....</a>
<h1>標題</h1> // h1-h6是標題
p.s. HTML5 data-* 屬性用於通過 jQuery Mobile，爲移動設備創建 “對觸控友好的”交互外觀。
e.g. <!DOCTYPE html>
<html>
<head>
........// CDN 引用 jQuery Mobile
</head>
<body>
<div data-role="page" id="page1">
<div data-role="header">
<h1>這是page1</h1>
</div>
<div data-role="content">
<a href="#page2">跳轉到頁面二</a>
<a href="#page3" data-rel="dialog">對話框彈出頁面二</a>
</div>
<div data-role="footer">
<h1>頁腳</h1>
</div>
</div>
<div data-role="page" id="page2">
<div data-role="header">
<h1>這是page2</h1>
</div>
<div data-role="content">
<a href="#page1">跳轉到頁面一</a>
<a href="externalFile.html">跳轉到外部頁面</a>
</div>
</div>
<div data-role="page" id="page3">
<div data-role="header">
<h1>這是page3</h1>
</div>
<div data-role="content">
<a href="#page1">跳轉到頁面一</a>
</div>
</div>
</body>
</html>
