|
等級：25 - 爐火純青 經驗值：0 / 246 魔法值：14453 / 14453 生命值：6%
升級
   100%
TA的每日心情 | 奮斗
4 小時前 |
|---|
簽到天數: 5809 天 [LV.Master]伴壇終老
|
發表於 2016-6-25 16:22:43
|顯示全部樓層
馬上註冊，結交更多好友，享用更多功能，讓你輕鬆玩轉社群。
您需要 登入 才可以下載或檢視，沒有帳號？立即註冊
×
jQuery Mobile 是用於建立移動 Web 應用的前端開發框架。
9 p9 H i+ L8 ]% @# G. `jQuery Mobile 可以應用於智能手機與平板電腦。 ; n" V9 y) c- X6 m4 u- j6 ?5 X
jQuery Mobile 使用 HTML5 & CSS3 最小的腳本來佈局網頁。
) h. P; [; k" @0 L! i* S
- D; g& m6 s0 n" p: }& [什麼是 jQuery Mobile? . d3 a) u4 u7 \9 Y9 z, I8 e
/ H9 E' d5 d1 I2 i; G) X7 ojQuery Mobile 是針對觸屏智能手機與平板電腦的網頁開發框架。
; V! N$ r0 e3 R- d- N0 p$ r9 C0 Y' [% [1 \2 B4 J
jQuery Mobile 工作與所有主流的智能手機和平板電腦上： ) } Q! {0 ^+ z8 f1 F2 Y3 W- W
+ ~; ^. U+ n' U* U7 A( ^
jQuery Mobile 構建於 jQuery 以及 jQuery UI類庫之上，如果您瞭解 jQuery，您可以很容易的學習 jQuery Mobile。 # S' `" `/ G- V1 \' J7 B" Y
jQuery Mobile 使用了極少的 HTML5、CSS3、JavaScript 和 AJAX 腳本代碼來完成頁面的佈局渲染。# Y$ G \9 V. I q! a5 N' u' z
( X) E, |2 j3 P+ ~為什麼使用 jQuery Mobile?. F F! w* Y* P2 t2 j8 _) Q' X
4 _. i: `5 L7 \2 d通過使用jQuery Mobile 可以 "寫更少的代碼，做更多的事情" : 它可以通過一個靈活及簡單的方式來佈局網頁，且兼容所有移動設備。6 a8 s, v( Q |6 c# x. f3 j
lamp 不同設備使用了不同開發語言，jQuery Mobile可以很好的兼容不容的設備或操作系統：, F {8 A& V) R$ ? N7 Z
8 k! _) F: [( \" ?/ j: d( A$ J
Android 和 Blackberry（黑莓） 使用JAVA語言。
9 n6 `$ \* M, c% N+ e B9 \ iOS 使用 Objective C 語言
. t8 E8 D+ R. n. {& }0 N3 f Windows Phone 使用 C# 和 .net, 等。! _: r- W" G, U3 g* i( N% a
' P- ~. m; n3 O, h7 ojQuery Mobile 解決了不同設備兼容的問題，因為它只使用HTML，CSS和 JavaScript，這是所有移動網絡瀏覽器的標準！
" ~: k; T$ b! t2 ]9 l8 i# F
: ]3 x; s. Y8 N+ C( y4 ^$ Q2 g% `2 J/ fjQuery Mobile 安裝
& I& E8 z( E6 W! z- k3 c在你的網頁中增加 jQuery Mobile2 o/ r6 E0 U% y
" F& f/ g3 t4 x* F% N) r
你可以通過以下幾種方式將jQuery Mobile增加到你的網頁中：$ V5 N% F! l$ x+ q' D% B
$ ~+ g4 u7 l9 j+ [" @: q+ k4 l- A
從 CDN 中加載 jQuery Mobile (推薦)
. |$ L# b9 {; m 從jQuerymobile.com 下載 jQuery Mobile庫
, E4 j% X' b9 d% R0 e. t7 X) Q; L0 y( u9 w, E
下載 jQuery Mobile3 l# S- ~. t. ^
2 O& n( D* l' }" `
如果你想將 jQuery Mobile 放於你的主機中,你可以從 jQuerymobile.com下載該檔案。
# {! B& @& g& s. a: {6 g" j; E/ H3 v
3 j! ~2 N6 _' K<head>
. w! |. Y1 B1 [) f0 x$ V<meta name="viewport" content="width=device-width, initial-scale=1">
! N" B: x* g( S, K3 C) T2 P<link rel="stylesheet" href="jquery.mobile-1.4.5.css">2 { p: G9 y. f. p% e1 E
<script src="jquery.js"></script>/ E3 `! I# T0 A% L8 q- D
<script src="jquery.mobile-1.4.5.js"></script>
5 W7 u3 B9 S( S& ~) f. B</head> ?! e6 ], L" s5 q
: h! V% S- P& C. n5 K3 n提示： 將下載的檔案放置於與網頁同一目錄下。9 @6 E! W/ Q% A. D
lamp 你是否想知道為什麼在 <script> 標籤中 沒有插入 type="text/javascript" ?
# z+ ^. L* N, Y2 k! K5 i
# R* _8 K, E+ h3 p, t在 HTML5 已經不需要該屬性。 JavaScript 在所有現代瀏覽器中是 HTML5 的預設腳本語言！7 G# T4 d5 H$ ^: Q3 f @
% Q9 I* G2 Z) H5 W" ^( |jQuery Mobile 頁面
6 @; u6 _/ |0 U, }開始學習 jQuery Mobile' ~7 g/ a/ t$ }, }" @$ e
實例
* e0 }9 L' s# D. h* s<body>
/ B7 N1 \8 a/ Z<div data-role="page">
- U" q1 f) y0 W1 X; j: ]
' f9 k e) d! }% I# } x <div data-role="header">& r$ E0 a$ N5 N: @" L" }5 [" q
<h1>歡迎來到我的主頁</h1>. i, C i, J- ]; N4 v* C- f
</div>
b, R& u; E: N- \
( e& l' x8 j* g" w% W' O( q <div data-role="main" class="ui-content">
( {; u ]& U% s5 \# J <p>我現在是一個移動端開發者!!</p>
% L: \3 F) }: F H7 v4 X) e8 t </div>
1 w& z+ h1 S1 ^
- l d9 r; n9 }0 b8 G! F; X <div data-role="footer">
2 d5 w; L Y! t r <h1>底部文字</h1>
8 Q& K5 m; u1 @! l& P! Z </div>1 O5 N. J1 r' _$ u" g" w3 C
6 \1 f: e- G+ a: U* P</div>/ D6 Y9 Z& L: ]! v7 I) e- {* O3 C
</body>
- W' L7 x- |6 G' W& I實例解析：
' m' ~ X: Q8 D4 b- b0 _% u
5 n. A; i6 |, `! i data-role="page" 是在瀏覽器中顯示的頁面。; @7 F8 v) Y; E
data-role="header" 是在頁面頂部建立的工具條 (通常用於標題或者搜尋按鈕)
1 |9 @% h0 H: [ data-role="main" 定義了頁面的內容，比如文字， 圖片，表單，按鈕等。
. P+ q [5 D+ ]% T "ui-content" 類用於在頁面增加內邊距和外邊距。& j% C, M3 z3 u8 r2 p* b+ w
data-role="footer" 用於建立頁面底部工具條。$ V# N) A) O5 }( _) j" X
在這些容器中你可以增加任何 HTML 元素 - 段落, 圖片, 標題, 列表等。
, Q4 j# I5 p3 m5 n% ^" o. K V1 x; G r% U) R( E) F3 t5 M8 \
lamp jQuery Mobile 依賴 HTML5 data-* 屬性來支援各種 UI 元素、過渡和頁面結構。不支援它們的瀏覽器將以靜默方式棄用它們。
; x S' O% B. H2 |" U
. f! n( [/ F. X& s在頁面中增加 jQuery Mobile
8 E8 ^3 n6 S/ Q( i
1 E' `- r6 {+ C% [1 B; P使用 jQuery Mobile, 你可以再單個 HTML 檔案中建立多個不同的頁面。
: t- L5 d; [/ w/ D) s2 ]
/ T& k- l' b9 [% `你可以使用不同的href屬性來區分使用同一個唯一id的頁面：+ E% L+ W- \9 `4 C7 U* j
實例
. t/ k$ \" G/ F2 x5 |- A<div data-role="page" id="pageone">3 j M5 f) P+ B. X8 M% W1 d7 }3 d
<div data-role="main" class="ui-content">% V: l# B/ N: J1 G& T/ N7 p1 S
<a href="#pagetwo">跳轉到第二個頁面</a>' z- e, E0 J6 D- [2 v
</div>
3 M# |, @3 M: n* }1 |</div>
" \4 ^5 J S: p* I Y0 x
; K H" \5 L" v% M+ e" ^# j2 T<div data-role="page" id="pagetwo">" r1 H& Y/ L6 F& u7 O+ g# ?
<div data-role="main" class="ui-content">
! O/ V6 L1 u) `8 X <a href="#pageone">跳轉到第一個頁面</a>" P& |. r' L, |
</div>
( T: {9 C g% Y</div># t! A& ]* P9 z4 n( U+ Z
注意： 當web應用有大量的內容（文字，圖片，腳本等）將會嚴重影響加載時間。如果你不想使用內頁連結可以使用外部檔案：% F/ a' j2 V- s* }) R
* u) w) ^$ s/ z; I! ?# |
<a href="externalfile.html">訪問外部檔案</a>- r( S1 H+ ? R: o [
% g3 k; [* P$ d頁面作為對話框使用
1 L) w% X" V5 `% @& B* O/ O9 o9 k/ \" E% E7 w5 _: B1 m& v& s; v& A- Q
對話框是用於顯示頁面內容顯示或者表單內容的輸入。
6 T R3 R. S% l4 q3 R
2 n W) n& ~ U0 q在連結中增加data-rel="dialog"讓會員點閱連結時彈出對話框:
+ Y: ]$ d3 S4 n) T2 U實例
. D" x( _2 u( } d<div data-role="page" id="pageone">
0 a' r! o, G0 Z% y7 e <div data-role="main" class="ui-content">
) n: P8 c3 v* O8 b" E <a href="#pagetwo">跳轉到第二個頁面</a>) S& @: A: W: w. U. l5 C
</div>
+ x9 J( [2 q7 V; P$ E/ }8 }6 z</div>
8 V2 \5 y( D$ a. Y# ~/ ~, V1 n7 J. z; H- L
<div data-role="page" data-dialog="true" id="pagetwo">
8 x9 P" i0 N+ [; o <div data-role="main" class="ui-content"># M, _% @! i6 o' N" Z* Y% V$ m
<a href="#pageone">跳轉到第一個頁面</a>
4 H2 G l j) A$ [1 R) F </div>
1 M6 Z7 z3 D; a7 r. Q- V</div> |
|
IP卡
狗仔卡
[資訊未更新]
提升卡
置頂卡
沉默卡
喧囂卡
變色卡
千斤頂
顯身卡