jquery-mobile學習筆記

admin

jQuery Mobile 是用於建立移動 Web 應用的前端開發框架。
6 C  p0 N) O. G8 mjQuery Mobile 可以應用於智能手機與平板電腦。
jQuery Mobile 使用 HTML5 & CSS3 最小的腳本來佈局網頁。

, x/ C" e7 @4 K! l& [8 g什麼是 jQuery Mobile?
  s( u. @! F, ^
, {: w/ B4 `; y$ R2 I" U3 BjQuery Mobile 是針對觸屏智能手機與平板電腦的網頁開發框架。

5 V1 M4 r6 M* z7 Z9 k" Z$ M3 x% A- ljQuery Mobile 工作與所有主流的智能手機和平板電腦上：

jQuery Mobile 構建於 jQuery 以及 jQuery UI類庫之上，如果您瞭解 jQuery，您可以很容易的學習 jQuery Mobile。
  j' X. q. s) }# e) ?) e; HjQuery Mobile 使用了極少的 HTML5、CSS3、JavaScript 和  AJAX 腳本代碼來完成頁面的佈局渲染。

為什麼使用 jQuery Mobile?
. F: R) e7 d7 T$ k
1 S- z- e$ d% o8 x8 u通過使用jQuery Mobile 可以 "寫更少的代碼，做更多的事情" : 它可以通過一個靈活及簡單的方式來佈局網頁，且兼容所有移動設備。
lamp 不同設備使用了不同開發語言，jQuery Mobile可以很好的兼容不容的設備或操作系統：
& R3 ^7 H( w! y; y
' f3 j: v/ j4 U& h/ E) p    Android 和 Blackberry（黑莓） 使用JAVA語言。
: T& a) n5 {0 q    iOS 使用 Objective C 語言
    Windows Phone 使用 C# 和 .net, 等。

jQuery Mobile 解決了不同設備兼容的問題，因為它只使用HTML，CSS和 JavaScript，這是所有移動網絡瀏覽器的標準！
: x+ o  o5 Y* M+ T4 \* E
/ [& W  D3 U' Y& i. M3 |* ljQuery Mobile 安裝
4 _& M! }- n9 ]在你的網頁中增加 jQuery Mobile
# @. U! X+ g3 |& `1 H9 P. ?
你可以通過以下幾種方式將jQuery Mobile增加到你的網頁中：

    從 CDN 中加載 jQuery Mobile (推薦)
* Z7 u' K, U# c5 q  H& e; \( S    從jQuerymobile.com 下載 jQuery Mobile庫
9 ~; P* z0 p" z' E- `# `
下載 jQuery Mobile
/ W( E# a  K! @- u
" Q. r) N/ j' i如果你想將 jQuery Mobile 放於你的主機中,你可以從 jQuerymobile.com下載該檔案。
% V$ P$ ^9 h: P
* F/ F& `2 X; {# R; V<head>
" ]+ k: D( v) t; P- q) @  Z<meta name="viewport" content="width=device-width, initial-scale=1">
' s$ R1 b8 R  U% S, A<link rel="stylesheet" href="jquery.mobile-1.4.5.css">
<script src="jquery.js"></script>
( w$ R4 S. J) c( Y" w/ E0 F# ~<script src="jquery.mobile-1.4.5.js"></script>
</head>

1 G+ c) `* w. `  L; ^7 E6 }/ n提示： 將下載的檔案放置於與網頁同一目錄下。
, E3 x* ?+ d- ~: flamp 你是否想知道為什麼在 <script> 標籤中 沒有插入 type="text/javascript" ?
: e# S+ S: k/ _9 ^. L, W% i+ T
: q6 S0 z8 x" k; G, Q在 HTML5 已經不需要該屬性。 JavaScript 在所有現代瀏覽器中是 HTML5 的預設腳本語言！
4 {4 S9 R+ V/ j- y
* ^+ M' f! Q# w0 z. t+ T3 qjQuery Mobile 頁面
開始學習 jQuery Mobile
實例
8 k. G& c  _$ U7 ^( F/ R<body>
<div data-role="page">

# r; ^7 @+ |1 Y( i8 G# R2 ^  <div data-role="header">
    <h1>歡迎來到我的主頁</h1>
  </div>

  <div data-role="main" class="ui-content">
0 H- }* ~7 L" I- ^. n    <p>我現在是一個移動端開發者!!</p>
1 \* r* q' L+ V' r  </div>

2 D5 r; ?; d- T- F$ M  <div data-role="footer">
8 z- o) n: ?+ ~- |2 D# D" x    <h1>底部文字</h1>
# u% J' L4 v. S% Z  </div>

1 f9 i+ Y8 L# P</div>
</body>
實例解析：
- g+ D* e* D. S2 c! a% p
; _  E; L5 F) D+ q' g& M    data-role="page" 是在瀏覽器中顯示的頁面。
    data-role="header" 是在頁面頂部建立的工具條 (通常用於標題或者搜尋按鈕)
    data-role="main" 定義了頁面的內容，比如文字， 圖片，表單，按鈕等。
    "ui-content" 類用於在頁面增加內邊距和外邊距。
    data-role="footer" 用於建立頁面底部工具條。
& h+ {- f* Y. Y8 ^4 e4 B* B. X8 L0 e    在這些容器中你可以增加任何 HTML 元素 - 段落, 圖片, 標題, 列表等。
1 ?0 l- ?2 r3 I
; g9 f5 p9 {3 L/ w; t8 M' n3 nlamp jQuery Mobile 依賴 HTML5 data-* 屬性來支援各種 UI 元素、過渡和頁面結構。不支援它們的瀏覽器將以靜默方式棄用它們。
3 h2 L8 M9 q* O6 Z: K0 w& B
0 w6 s7 @4 A6 u. [. q在頁面中增加 jQuery Mobile

使用 jQuery Mobile, 你可以再單個 HTML 檔案中建立多個不同的頁面。
& t, u" N, h$ K" i+ W
- R& D1 F: i0 X6 {) j7 J3 E你可以使用不同的href屬性來區分使用同一個唯一id的頁面：
- P$ S5 N: b& |; S# ]& {實例
<div data-role="page" id="pageone">
8 C; C/ q% Y5 R  <div data-role="main" class="ui-content">
' F8 E3 A# z, s6 S    <a href="#pagetwo">跳轉到第二個頁面</a>
  </div>
</div>

* o0 x7 U8 v: O) u% X<div data-role="page" id="pagetwo">
, Y1 s" h' P$ _5 Q; A! l  <div data-role="main" class="ui-content">
    <a href="#pageone">跳轉到第一個頁面</a>
  </div>
</div>
) i8 o  M8 w! j$ M9 S0 i4 F注意： 當web應用有大量的內容（文字，圖片，腳本等）將會嚴重影響加載時間。如果你不想使用內頁連結可以使用外部檔案：
6 {7 ~8 |0 ?# R  d- e% j! ~: l
4 Z" i; V5 S1 r( M<a href="externalfile.html">訪問外部檔案</a>
0 k. Q  E6 b+ \
, v, \" x& C3 `8 c2 \2 w頁面作為對話框使用
/ `( C# |' L2 S1 E; K
' ^0 M0 B+ I: c; J9 X對話框是用於顯示頁面內容顯示或者表單內容的輸入。

在連結中增加data-rel="dialog"讓會員點閱連結時彈出對話框:
1 {8 g* M! V1 Z* Q3 g實例
<div data-role="page" id="pageone">
  <div data-role="main" class="ui-content">
    <a href="#pagetwo">跳轉到第二個頁面</a>
4 f* V1 j# q  |9 P$ t  o  </div>
</div>
9 [- k: r+ X+ Y* b  Y  k& O% e
<div data-role="page" data-dialog="true" id="pagetwo">
  <div data-role="main" class="ui-content">
& _; K# n5 b' W! Y6 @3 p1 u    <a href="#pageone">跳轉到第一個頁面</a>
  </div>
3 s: g# ^7 D% J- `; ?$ [</div>