jquery-mobile學習筆記
jQuery Mobile 是用於建立移動 Web 應用的前端開發框架。jQuery Mobile 可以應用於智能手機與平板電腦。
jQuery Mobile 使用 HTML5 & CSS3 最小的腳本來佈局網頁。
什麼是 jQuery Mobile?
jQuery Mobile 是針對觸屏智能手機與平板電腦的網頁開發框架。
jQuery Mobile 工作與所有主流的智能手機和平板電腦上：
jQuery Mobile 構建於 jQuery 以及 jQuery UI類庫之上，如果您瞭解 jQuery，您可以很容易的學習 jQuery Mobile。
jQuery Mobile 使用了極少的 HTML5、CSS3、JavaScript 和AJAX 腳本代碼來完成頁面的佈局渲染。
為什麼使用 jQuery Mobile?
通過使用jQuery Mobile 可以 "寫更少的代碼，做更多的事情" : 它可以通過一個靈活及簡單的方式來佈局網頁，且兼容所有移動設備。
lamp 不同設備使用了不同開發語言，jQuery Mobile可以很好的兼容不容的設備或操作系統：
Android 和 Blackberry（黑莓） 使用JAVA語言。
iOS 使用 Objective C 語言
Windows Phone 使用 C# 和 .net, 等。
jQuery Mobile 解決了不同設備兼容的問題，因為它只使用HTML，CSS和 JavaScript，這是所有移動網絡瀏覽器的標準！
jQuery Mobile 安裝
在你的網頁中增加 jQuery Mobile
你可以通過以下幾種方式將jQuery Mobile增加到你的網頁中：
從 CDN 中加載 jQuery Mobile (推薦)
從jQuerymobile.com 下載 jQuery Mobile庫
下載 jQuery Mobile
如果你想將 jQuery Mobile 放於你的主機中,你可以從 jQuerymobile.com下載該檔案。
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="jquery.mobile-1.4.5.css">
<script src="jquery.js"></script>
<script src="jquery.mobile-1.4.5.js"></script>
</head>
提示： 將下載的檔案放置於與網頁同一目錄下。
lamp 你是否想知道為什麼在 <script> 標籤中 沒有插入 type="text/javascript" ?
在 HTML5 已經不需要該屬性。 JavaScript 在所有現代瀏覽器中是 HTML5 的預設腳本語言！
jQuery Mobile 頁面
開始學習 jQuery Mobile
實例
<body>
<div data-role="page">
<div data-role="header">
<h1>歡迎來到我的主頁</h1>
</div>
<div data-role="main" class="ui-content">
<p>我現在是一個移動端開發者!!</p>
</div>
<div data-role="footer">
<h1>底部文字</h1>
</div>
</div>
</body>
實例解析：
data-role="page" 是在瀏覽器中顯示的頁面。
data-role="header" 是在頁面頂部建立的工具條 (通常用於標題或者搜尋按鈕)
data-role="main" 定義了頁面的內容，比如文字， 圖片，表單，按鈕等。
"ui-content" 類用於在頁面增加內邊距和外邊距。
data-role="footer" 用於建立頁面底部工具條。
在這些容器中你可以增加任何 HTML 元素 - 段落, 圖片, 標題, 列表等。
lamp jQuery Mobile 依賴 HTML5 data-* 屬性來支援各種 UI 元素、過渡和頁面結構。不支援它們的瀏覽器將以靜默方式棄用它們。
在頁面中增加 jQuery Mobile
使用 jQuery Mobile, 你可以再單個 HTML 檔案中建立多個不同的頁面。
你可以使用不同的href屬性來區分使用同一個唯一id的頁面：
實例
<div data-role="page" id="pageone">
<div data-role="main" class="ui-content">
<a href="#pagetwo">跳轉到第二個頁面</a>
</div>
</div>
<div data-role="page" id="pagetwo">
<div data-role="main" class="ui-content">
<a href="#pageone">跳轉到第一個頁面</a>
</div>
</div>
注意： 當web應用有大量的內容（文字，圖片，腳本等）將會嚴重影響加載時間。如果你不想使用內頁連結可以使用外部檔案：
<a href="externalfile.html">訪問外部檔案</a>
頁面作為對話框使用
對話框是用於顯示頁面內容顯示或者表單內容的輸入。
在連結中增加data-rel="dialog"讓會員點閱連結時彈出對話框:
實例
<div data-role="page" id="pageone">
<div data-role="main" class="ui-content">
<a href="#pagetwo">跳轉到第二個頁面</a>
</div>
</div>
<div data-role="page" data-dialog="true" id="pagetwo">
<div data-role="main" class="ui-content">
<a href="#pageone">跳轉到第一個頁面</a>
</div>
</div>
頁:
[1]