jquery-mobile學習筆記

admin

jQuery Mobile 是用於建立移動 Web 應用的前端開發框架。
" a5 R2 b' c1 `$ j9 I6 H8 s0 o8 VjQuery Mobile 可以應用於智能手機與平板電腦。
2 B! ~) S- d* fjQuery Mobile 使用 HTML5 & CSS3 最小的腳本來佈局網頁。
* b5 h6 U- L  J. z
什麼是 jQuery Mobile?
0 w/ c( R/ [' T9 X( i  T
jQuery Mobile 是針對觸屏智能手機與平板電腦的網頁開發框架。
; |& b/ [! O( @0 a4 T
jQuery Mobile 工作與所有主流的智能手機和平板電腦上：

jQuery Mobile 構建於 jQuery 以及 jQuery UI類庫之上，如果您瞭解 jQuery，您可以很容易的學習 jQuery Mobile。
jQuery Mobile 使用了極少的 HTML5、CSS3、JavaScript 和  AJAX 腳本代碼來完成頁面的佈局渲染。
- a; j. s" z, Q8 h' o% G
' l7 ~" W, ^9 O$ D& [* h5 b為什麼使用 jQuery Mobile?
; p% C8 Y7 T! {& R; b; k1 i: z
通過使用jQuery Mobile 可以 "寫更少的代碼，做更多的事情" : 它可以通過一個靈活及簡單的方式來佈局網頁，且兼容所有移動設備。
lamp 不同設備使用了不同開發語言，jQuery Mobile可以很好的兼容不容的設備或操作系統：

    Android 和 Blackberry（黑莓） 使用JAVA語言。
( ~$ y! V6 Q( H+ P- \5 h% P    iOS 使用 Objective C 語言
    Windows Phone 使用 C# 和 .net, 等。
6 u# a6 ]) r* z; W; _; j
/ N1 a) C: T3 a! U) r9 u5 r% G8 }jQuery Mobile 解決了不同設備兼容的問題，因為它只使用HTML，CSS和 JavaScript，這是所有移動網絡瀏覽器的標準！
3 ^  E; j8 U& f
) _# _, |6 ?( z; z  X/ DjQuery Mobile 安裝
在你的網頁中增加 jQuery Mobile

4 [6 A* D7 g& D" }9 Y5 _- X你可以通過以下幾種方式將jQuery Mobile增加到你的網頁中：
  @, C% m" _" s  C+ k* F. C4 _: K
% A+ k  t& H! w    從 CDN 中加載 jQuery Mobile (推薦)
    從jQuerymobile.com 下載 jQuery Mobile庫
4 D  W1 o; w9 E9 K! b2 g1 ]" D
下載 jQuery Mobile
4 o2 L" A. e' D
( }/ E# G2 s% K6 w& u3 i  j/ A如果你想將 jQuery Mobile 放於你的主機中,你可以從 jQuerymobile.com下載該檔案。
4 E' t% N9 S7 e0 l
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
2 Y/ P8 t* v) W$ }2 D: N<link rel="stylesheet" href="jquery.mobile-1.4.5.css">
<script src="jquery.js"></script>
<script src="jquery.mobile-1.4.5.js"></script>
1 U! d' D1 v% B/ h& U4 Y</head>

提示： 將下載的檔案放置於與網頁同一目錄下。
, @# ~5 T5 [0 R' a+ d% x" rlamp 你是否想知道為什麼在 <script> 標籤中 沒有插入 type="text/javascript" ?

在 HTML5 已經不需要該屬性。 JavaScript 在所有現代瀏覽器中是 HTML5 的預設腳本語言！

, ?4 T& s/ }# H3 k" B" I6 a- w# c6 C2 EjQuery Mobile 頁面
+ {  {8 ~+ z! c3 v  N7 e開始學習 jQuery Mobile
實例
5 S, A2 [8 C8 c/ G- j<body>
; l3 I6 p; {+ m2 ?' M, e( J<div data-role="page">
5 M( I* C0 P: H/ E4 @7 I" E" V! X
  <div data-role="header">
    <h1>歡迎來到我的主頁</h1>
  </div>
5 @& Y% g6 k8 B6 H* q8 i" O
  <div data-role="main" class="ui-content">
    <p>我現在是一個移動端開發者!!</p>
  V  c6 I" l5 Z  </div>
0 N1 b- M! f8 k9 H- S
* K5 I$ `' e1 L7 ^$ `3 V  <div data-role="footer">
    <h1>底部文字</h1>
$ R1 E  C7 O3 w7 L% |7 o* I( y  </div>

</div>
! [% x6 k. \; l% ^</body>
實例解析：

    data-role="page" 是在瀏覽器中顯示的頁面。
9 k% }+ |, a' d4 a4 p: R7 S2 z! ~    data-role="header" 是在頁面頂部建立的工具條 (通常用於標題或者搜尋按鈕)
    data-role="main" 定義了頁面的內容，比如文字， 圖片，表單，按鈕等。
' E- B  N) c. [5 f8 w    "ui-content" 類用於在頁面增加內邊距和外邊距。
3 Z1 c' x) q/ W" Z7 K" ^" T0 M    data-role="footer" 用於建立頁面底部工具條。
    在這些容器中你可以增加任何 HTML 元素 - 段落, 圖片, 標題, 列表等。

) Y) s% r0 d( }) H4 h  N  ^/ S2 Q! vlamp jQuery Mobile 依賴 HTML5 data-* 屬性來支援各種 UI 元素、過渡和頁面結構。不支援它們的瀏覽器將以靜默方式棄用它們。

在頁面中增加 jQuery Mobile

( D  A+ [: U$ v, u7 H/ G6 P使用 jQuery Mobile, 你可以再單個 HTML 檔案中建立多個不同的頁面。

你可以使用不同的href屬性來區分使用同一個唯一id的頁面：
9 J( N: x1 [+ s, ?/ Z: O5 G0 `7 Q實例
<div data-role="page" id="pageone">
  <div data-role="main" class="ui-content">
, z+ I5 e5 ^  z3 |1 W$ W4 [    <a href="#pagetwo">跳轉到第二個頁面</a>
% B" Q% M- y0 ?/ E0 ]9 L% }  </div>
# V4 A( _3 u4 i& |</div>

' S" ?* P! A) m/ p+ C+ a0 u5 t7 @: b" G<div data-role="page" id="pagetwo">
* `* E7 ^& g! V- W& z1 B; K  <div data-role="main" class="ui-content">
    <a href="#pageone">跳轉到第一個頁面</a>
5 l! U, F! X% T/ U1 F% I% Y6 A3 a* L  </div>
# p3 B/ Q  R7 E/ J</div>
- L" I" B7 ?% B, d注意： 當web應用有大量的內容（文字，圖片，腳本等）將會嚴重影響加載時間。如果你不想使用內頁連結可以使用外部檔案：

; I* ~6 C: k% P: h( s( J. j2 d<a href="externalfile.html">訪問外部檔案</a>

頁面作為對話框使用
6 F9 y8 w* D' ?9 e6 `. \: d1 b, x
! U3 A+ ^& v1 V5 i, b對話框是用於顯示頁面內容顯示或者表單內容的輸入。

5 w& X# j- f; A( g在連結中增加data-rel="dialog"讓會員點閱連結時彈出對話框:
, |) N' e0 [# s7 v實例
  b& X( @9 I$ e, x4 n$ W2 `; d: d, x<div data-role="page" id="pageone">
  <div data-role="main" class="ui-content">
0 `% F4 ]+ r5 H: V- k/ \    <a href="#pagetwo">跳轉到第二個頁面</a>
$ r0 [0 r1 s1 Q7 W. F- h* ~7 T  </div>
6 ^9 x& p; }1 v2 {+ p</div>
1 P" e5 F' _$ {4 i
<div data-role="page" data-dialog="true" id="pagetwo">
/ I7 c4 X1 e9 [( f  <div data-role="main" class="ui-content">
    <a href="#pageone">跳轉到第一個頁面</a>
; q$ L# m0 J% ~; ]" ]  </div>
</div>