|
等級：25 - 爐火純青 經驗值：0 / 244 魔法值：13482 / 13482 生命值：4%
升級
   100%
TA的每日心情 | 開心
3 小時前 |
|---|
簽到天數: 5459 天 [LV.Master]伴壇終老
|
發表於 2016-6-25 16:22:43
|顯示全部樓層
馬上註冊，結交更多好友，享用更多功能，讓你輕鬆玩轉社群。
您需要 登入 才可以下載或檢視，沒有帳號？立即註冊
×
jQuery Mobile 是用於建立移動 Web 應用的前端開發框架。 - S) |8 G; v0 Z6 P9 k" ^1 A
jQuery Mobile 可以應用於智能手機與平板電腦。 ! b- U# d1 X5 q+ ]$ g
jQuery Mobile 使用 HTML5 & CSS3 最小的腳本來佈局網頁。+ a$ X& t0 \% s d9 ?, R k
0 T' O. b% \( W
什麼是 jQuery Mobile?
7 Z) z7 F! a" q) Y! d. A
+ S9 U Z4 l; T, HjQuery Mobile 是針對觸屏智能手機與平板電腦的網頁開發框架。
" e+ _+ h+ B3 ^' {& K7 e0 b
6 \$ ` {& k# njQuery Mobile 工作與所有主流的智能手機和平板電腦上：
V, e/ N6 ]% y2 \& o2 |: Z5 C; p* A
jQuery Mobile 構建於 jQuery 以及 jQuery UI類庫之上，如果您瞭解 jQuery，您可以很容易的學習 jQuery Mobile。 1 n. n9 W8 p: {5 J$ E! \
jQuery Mobile 使用了極少的 HTML5、CSS3、JavaScript 和 AJAX 腳本代碼來完成頁面的佈局渲染。
0 L, W$ b- {0 I# b8 c2 v! x9 @6 _- J7 E* X/ D$ g6 P4 P
為什麼使用 jQuery Mobile?
3 J# E0 ]& r/ x7 `; d2 N
; n& P A* K0 U6 n5 U8 p1 }通過使用jQuery Mobile 可以 "寫更少的代碼，做更多的事情" : 它可以通過一個靈活及簡單的方式來佈局網頁，且兼容所有移動設備。4 `4 B3 }4 t2 ?0 K
lamp 不同設備使用了不同開發語言，jQuery Mobile可以很好的兼容不容的設備或操作系統：
# \1 Y& q& L5 V# j: t# x' O
! m9 _1 ], F) H" d8 W& n Android 和 Blackberry（黑莓） 使用JAVA語言。9 \* S" {. Q: X8 b& F) W
iOS 使用 Objective C 語言
) V; @3 l+ G+ }0 J# }. a! e! [0 o* B+ p Windows Phone 使用 C# 和 .net, 等。
( l7 F* c! Y% R$ ]; k4 X. q7 t
0 k5 M% N* _3 S$ n" u7 g. ojQuery Mobile 解決了不同設備兼容的問題，因為它只使用HTML，CSS和 JavaScript，這是所有移動網絡瀏覽器的標準！& W+ ^9 O) n4 s7 ^* p# N
" ^0 M6 n. d( }* Z2 ZjQuery Mobile 安裝; J% R# a/ {. }/ M3 S
在你的網頁中增加 jQuery Mobile
9 D0 x& ]2 ~3 i6 [# g [" q
# ?3 V4 V% t9 q% w2 s8 z你可以通過以下幾種方式將jQuery Mobile增加到你的網頁中：
$ o0 f& f1 C0 D
: G1 K- |* B: K" ~ P# `& ~ 從 CDN 中加載 jQuery Mobile (推薦)5 z/ z9 k# O/ j! r
從jQuerymobile.com 下載 jQuery Mobile庫 f+ `2 e _5 x. B
! j; P5 Z q, r+ t% _8 |+ Q$ @/ t下載 jQuery Mobile% G+ D& v+ N& G8 x( {- R' p* y+ x
. f! J! I' x) j1 i# @! Z% M
如果你想將 jQuery Mobile 放於你的主機中,你可以從 jQuerymobile.com下載該檔案。. @% p B& _% Z4 C( M
' c- d* L" e1 B# e
<head>
9 w5 g) D8 _* \$ o7 x: ]<meta name="viewport" content="width=device-width, initial-scale=1">& K5 r7 l) }$ G; P! F
<link rel="stylesheet" href="jquery.mobile-1.4.5.css">7 R* h1 G: y3 _- H5 j) ~8 i" ?4 |
<script src="jquery.js"></script>: g" f+ E4 A- u
<script src="jquery.mobile-1.4.5.js"></script>
0 b/ @$ s1 s: t</head>
+ s' _: N2 t* v4 C, b
6 i$ N6 N+ X6 x8 K: ?- k: |提示： 將下載的檔案放置於與網頁同一目錄下。
7 L4 I0 ]( ^! X- U* h$ m% vlamp 你是否想知道為什麼在 <script> 標籤中 沒有插入 type="text/javascript" ?0 ^9 s4 {/ w* a6 v: T }- }- N$ y
- Q4 e. j7 D* i& O0 F! h% z6 z
在 HTML5 已經不需要該屬性。 JavaScript 在所有現代瀏覽器中是 HTML5 的預設腳本語言！0 R" t5 q, ^* U& ]+ W8 w0 D7 S
7 E8 L4 K# X; R) o: P, i+ GjQuery Mobile 頁面
9 f. s' E; q+ [7 A$ R開始學習 jQuery Mobile1 y) o. Z! ?) R9 z! M" B B) p5 b
實例
6 |& y; s- e9 F0 e<body>3 L8 m2 t) T: J7 s
<div data-role="page">
$ {, o3 [9 O6 P+ P
+ H+ z1 y( |4 w5 m1 ?6 v3 H <div data-role="header">1 _7 p H5 p7 m) D/ B& Q/ B
<h1>歡迎來到我的主頁</h1>
5 g. [- O$ H' o/ `/ H </div>& V; ]0 W8 v9 b4 ]
. [) z# p& M: u p; i4 l$ G
<div data-role="main" class="ui-content">
8 S( v" ~* Z8 k: \ o <p>我現在是一個移動端開發者!!</p>( O4 @! }% Q' D5 O+ o C
</div>! g7 S7 O Y0 Z
, u$ z2 C T" p: i
<div data-role="footer">4 n+ B) S! A5 e/ Q, v) e
<h1>底部文字</h1>
2 c% ?( _/ Y% i0 L9 F) a </div>" Y; c* b- Y' c& ^* I
7 h6 [' V d z5 R+ ?6 k2 W g
</div>+ \; K3 x1 Q/ @/ p
</body>
4 U7 h! G1 S1 B! Q U3 s實例解析：/ H) k7 V0 f3 H F+ x8 s1 }
' y+ k+ A( g/ L0 _/ s) F) J
data-role="page" 是在瀏覽器中顯示的頁面。
3 a: ], l0 p+ m, [+ Y7 m data-role="header" 是在頁面頂部建立的工具條 (通常用於標題或者搜尋按鈕)' l: A# m* g8 K" r0 g% p9 J, L
data-role="main" 定義了頁面的內容，比如文字， 圖片，表單，按鈕等。
9 V; J0 Y, e: F; v8 [ "ui-content" 類用於在頁面增加內邊距和外邊距。
: y. O6 H" b! ?) I; e) Z/ k data-role="footer" 用於建立頁面底部工具條。9 Z1 d8 K7 C3 y" [5 B, v# a0 z0 w6 `- ^
在這些容器中你可以增加任何 HTML 元素 - 段落, 圖片, 標題, 列表等。4 M& {3 @( Y6 c) c4 E8 r$ T9 Q
3 c) K0 h' w6 i1 l+ D$ _7 z8 Zlamp jQuery Mobile 依賴 HTML5 data-* 屬性來支援各種 UI 元素、過渡和頁面結構。不支援它們的瀏覽器將以靜默方式棄用它們。$ d1 P9 [- t- o# R
Q( I! p! e! s8 n在頁面中增加 jQuery Mobile: u6 B3 p6 _/ o$ y/ [
: [+ P3 Q/ z+ m4 p$ ], d4 ]使用 jQuery Mobile, 你可以再單個 HTML 檔案中建立多個不同的頁面。
# V5 b" c* l- r, x* m: ^5 }' H Z- {& r9 G
6 d2 m) x2 Q( z, V, r+ J7 N你可以使用不同的href屬性來區分使用同一個唯一id的頁面：
1 R% I& @0 ]( G5 W5 |* e3 c! {& c實例
2 ~( j3 R t2 `/ c& p<div data-role="page" id="pageone">* T2 @( |# z/ m# I) B0 H9 p- h
<div data-role="main" class="ui-content">
* |3 h, Z+ Z; x* L- E* h0 m <a href="#pagetwo">跳轉到第二個頁面</a>/ x' r9 r% I5 q- R5 v- o2 n- P
</div>
) y1 v; a6 g$ z5 L</div>2 H5 c9 [; ?2 w
. v4 E' {: I$ I2 _ f<div data-role="page" id="pagetwo">
- q' Q! H! a+ j6 e/ p! y" t8 i <div data-role="main" class="ui-content">' y% f8 e9 ~! \" f1 X3 Y5 j
<a href="#pageone">跳轉到第一個頁面</a>
. U: [( K2 ~8 @& H* @$ f' ? </div>; M! K# q) Z7 |( p3 d m
</div>
0 e$ \: V8 e& ?( \( T) P' _8 v注意： 當web應用有大量的內容（文字，圖片，腳本等）將會嚴重影響加載時間。如果你不想使用內頁連結可以使用外部檔案：
; r Y) X; h% g7 r! L% r6 X) N$ [; z0 \+ B+ X
<a href="externalfile.html">訪問外部檔案</a>
7 l9 }7 K' c( n
2 j$ u: }! H: S頁面作為對話框使用
2 K9 I o1 k' ~4 y6 _ I' E& y( ^- c6 E. o
對話框是用於顯示頁面內容顯示或者表單內容的輸入。: L# V3 r$ m! b6 c8 y" K
' F3 f$ ]: }1 O5 }+ V* F% g在連結中增加data-rel="dialog"讓會員點閱連結時彈出對話框:
7 z. {, k0 {% U! B4 D0 }7 A) c6 i實例% I9 h% j, |$ D- S
<div data-role="page" id="pageone">
8 D7 O" ^$ Z, `$ {& t0 D <div data-role="main" class="ui-content">
( c# ^% H4 o# t5 A <a href="#pagetwo">跳轉到第二個頁面</a>
" s2 M8 r7 \! p </div>
5 m: b1 h S7 y, G" e0 n</div>; p2 w- Y/ `! C
4 S* [: \ k% r6 e<div data-role="page" data-dialog="true" id="pagetwo">
6 e+ B' ?9 |& Q9 H' k% X) S: } <div data-role="main" class="ui-content">
/ \1 i1 O, I& b5 y1 Y4 k4 k- \ <a href="#pageone">跳轉到第一個頁面</a>2 ^+ j4 f! L( C' Z
</div>4 \3 n* R( j' n- h. ]+ W9 b0 z
</div> |
|
IP卡
狗仔卡
[資訊未更新]
提升卡
置頂卡
沉默卡
喧囂卡
變色卡
千斤頂
顯身卡