jquery-mobile學習筆記

admin

jQuery Mobile 是用於建立移動 Web 應用的前端開發框架。
jQuery Mobile 可以應用於智能手機與平板電腦。
: f0 S! M+ G; ^- U% YjQuery Mobile 使用 HTML5 & CSS3 最小的腳本來佈局網頁。

什麼是 jQuery Mobile?

jQuery Mobile 是針對觸屏智能手機與平板電腦的網頁開發框架。
( O) \( a/ G7 j8 F
jQuery Mobile 工作與所有主流的智能手機和平板電腦上：
  P3 d+ ~& v& L1 i
2 a. w; H5 \% _% k' w; M1 ljQuery Mobile 構建於 jQuery 以及 jQuery UI類庫之上，如果您瞭解 jQuery，您可以很容易的學習 jQuery Mobile。
6 M5 e, Z9 z8 J/ ajQuery Mobile 使用了極少的 HTML5、CSS3、JavaScript 和  AJAX 腳本代碼來完成頁面的佈局渲染。
9 F& x' x# K, ]; B0 Y- S; r
- j5 K" Y6 e" L0 C6 ^; m- f為什麼使用 jQuery Mobile?
& z* M4 M( Q3 k) G
通過使用jQuery Mobile 可以 "寫更少的代碼，做更多的事情" : 它可以通過一個靈活及簡單的方式來佈局網頁，且兼容所有移動設備。
lamp 不同設備使用了不同開發語言，jQuery Mobile可以很好的兼容不容的設備或操作系統：

    Android 和 Blackberry（黑莓） 使用JAVA語言。
    iOS 使用 Objective C 語言
6 [) \' b- N' h% k. o* r    Windows Phone 使用 C# 和 .net, 等。

jQuery Mobile 解決了不同設備兼容的問題，因為它只使用HTML，CSS和 JavaScript，這是所有移動網絡瀏覽器的標準！

jQuery Mobile 安裝
# `, ~1 X! L; v( |" Y' P9 \8 k在你的網頁中增加 jQuery Mobile

你可以通過以下幾種方式將jQuery Mobile增加到你的網頁中：

    從 CDN 中加載 jQuery Mobile (推薦)
    從jQuerymobile.com 下載 jQuery Mobile庫

* c8 c. H' H: Y% ]4 p- K下載 jQuery Mobile
. z5 t$ X; Q! P2 ^8 A& l
' W5 d8 M1 }; b6 C4 B1 n0 H! x如果你想將 jQuery Mobile 放於你的主機中,你可以從 jQuerymobile.com下載該檔案。
7 y: h7 U: S  d5 T
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="jquery.mobile-1.4.5.css">
0 j+ |& Z2 I: Y" [$ T3 I& A<script src="jquery.js"></script>
2 r8 F% U  ^0 Y% i<script src="jquery.mobile-1.4.5.js"></script>
* v) `( d! i- z. |5 o7 A</head>

+ {; [: l' _, D& z6 q/ z; R提示： 將下載的檔案放置於與網頁同一目錄下。
lamp 你是否想知道為什麼在 <script> 標籤中 沒有插入 type="text/javascript" ?
/ y! E8 l9 b9 v8 ?+ `
在 HTML5 已經不需要該屬性。 JavaScript 在所有現代瀏覽器中是 HTML5 的預設腳本語言！

. }, g, l& R) M5 y6 k$ TjQuery Mobile 頁面
0 Y8 P# v! o0 D) I( n+ h2 U& m1 i開始學習 jQuery Mobile
實例
<body>
<div data-role="page">
5 X4 q/ L" j+ N5 w
4 Y0 `4 w! i6 K' D4 R$ h4 A  <div data-role="header">
: \2 K/ e: i3 i    <h1>歡迎來到我的主頁</h1>
3 D% \0 ]9 V6 S6 N$ [: S  </div>
6 `* Y, ]* w; h/ C1 i! q% V( f
  <div data-role="main" class="ui-content">
0 t4 m5 Q$ m. D5 @( m+ A    <p>我現在是一個移動端開發者!!</p>
  </div>
- n# o5 M" G  x: W+ x9 N
  <div data-role="footer">
- m$ z! D' o0 S& g. o  u" S    <h1>底部文字</h1>
  </div>
- I! P6 u3 s% n5 H% o9 t3 D5 ~( W
( u+ S' s0 w8 ?# z2 D</div>
! j, K$ s4 I  t4 T5 |3 m</body>
( i# B! q7 y& W9 `) p實例解析：

; T% Z! i# H3 d    data-role="page" 是在瀏覽器中顯示的頁面。
    data-role="header" 是在頁面頂部建立的工具條 (通常用於標題或者搜尋按鈕)
    data-role="main" 定義了頁面的內容，比如文字， 圖片，表單，按鈕等。
- C; Q7 z# d3 h7 l* P$ [! ?    "ui-content" 類用於在頁面增加內邊距和外邊距。
    data-role="footer" 用於建立頁面底部工具條。
    在這些容器中你可以增加任何 HTML 元素 - 段落, 圖片, 標題, 列表等。

+ |# o3 h8 I! g2 G" dlamp jQuery Mobile 依賴 HTML5 data-* 屬性來支援各種 UI 元素、過渡和頁面結構。不支援它們的瀏覽器將以靜默方式棄用它們。

在頁面中增加 jQuery Mobile

# c7 {# ?% d4 j. J$ y' d使用 jQuery Mobile, 你可以再單個 HTML 檔案中建立多個不同的頁面。

6 u4 Z9 R! M0 a* d你可以使用不同的href屬性來區分使用同一個唯一id的頁面：
: s0 R7 c: M' w實例
<div data-role="page" id="pageone">
( n3 `9 d2 ^2 o% |/ Y  <div data-role="main" class="ui-content">
1 {2 w* H# d8 @$ P    <a href="#pagetwo">跳轉到第二個頁面</a>
  </div>
4 b' j4 B& I- _9 {" i5 C! g</div>
2 A0 M) m7 m" a9 Z3 A1 w# Y
0 g! O$ {3 P, G8 ]/ A9 a  Y  W<div data-role="page" id="pagetwo">
  <div data-role="main" class="ui-content">
    <a href="#pageone">跳轉到第一個頁面</a>
$ _3 b6 ]) [4 E% x% d: d4 D  </div>
</div>
注意： 當web應用有大量的內容（文字，圖片，腳本等）將會嚴重影響加載時間。如果你不想使用內頁連結可以使用外部檔案：
& i3 t: U, {* R8 E$ R9 `# z
* K/ @3 i( B3 P4 p& w  E<a href="externalfile.html">訪問外部檔案</a>

5 ]' a6 P" D3 C2 W3 q, y" j) c頁面作為對話框使用

; h0 u$ `: K2 i- a7 [對話框是用於顯示頁面內容顯示或者表單內容的輸入。

1 c$ D3 s0 R& K6 f) j0 {在連結中增加data-rel="dialog"讓會員點閱連結時彈出對話框:
實例
, _# W5 c5 W# B  Z( o0 b<div data-role="page" id="pageone">
  <div data-role="main" class="ui-content">
1 K5 R' }4 C( L; h4 w+ ^    <a href="#pagetwo">跳轉到第二個頁面</a>
  f9 T  o! [* @$ }) W* y  </div>
</div>
" X; \/ i! n2 a) |/ v" ?( Q
<div data-role="page" data-dialog="true" id="pagetwo">
  <div data-role="main" class="ui-content">
: V9 Y( @" L& ^* [    <a href="#pageone">跳轉到第一個頁面</a>
8 m, m2 D/ R. W! i6 q  </div>
; i$ T0 ^! W/ h) D</div>