admin 發表於 2016-6-25 16:22:43

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]
檢視完整版本: jquery-mobile學習筆記