等級：25 - 爐火純青 經驗值：0 / 245 魔法值：14062 / 14062 生命值：5%
升級
   100%
TA的每日心情 | 奮斗
13 小時前 |
|---|
簽到天數: 5666 天 [LV.Master]伴壇終老
|
馬上註冊，結交更多好友，享用更多功能，讓你輕鬆玩轉社群。
您需要 登入 才可以下載或檢視，沒有帳號？立即註冊
×
jQuery Mobile 是用於建立移動 Web 應用的前端開發框架。
8 U2 ]/ e# T6 A: M( N8 `jQuery Mobile 可以應用於智能手機與平板電腦。 9 u' j* I1 E- z- Z& Z& H Q4 N$ |
jQuery Mobile 使用 HTML5 & CSS3 最小的腳本來佈局網頁。- `" K/ z0 C5 b) H/ z0 H( ~
& C1 c H, _1 K1 H( H什麼是 jQuery Mobile? % \5 H- F$ j7 c8 Z
) y0 J3 N* h- H% GjQuery Mobile 是針對觸屏智能手機與平板電腦的網頁開發框架。 % W& r6 b0 D4 S2 e; n# X4 `
' r/ y% E/ E* P& D; l: rjQuery Mobile 工作與所有主流的智能手機和平板電腦上： & @$ ]5 J, t1 k/ ?
8 S: ^+ h8 `- k8 g* q# }
jQuery Mobile 構建於 jQuery 以及 jQuery UI類庫之上，如果您瞭解 jQuery，您可以很容易的學習 jQuery Mobile。
& J9 P C+ Y" W& ijQuery Mobile 使用了極少的 HTML5、CSS3、JavaScript 和 AJAX 腳本代碼來完成頁面的佈局渲染。4 j. R Y+ y$ |3 R
/ q8 u2 K0 O. d0 T% P. A$ D為什麼使用 jQuery Mobile?
; x0 b5 a: M* o: w& M& l' U
! h7 l% W! D- ]5 d6 _& N6 c通過使用jQuery Mobile 可以 "寫更少的代碼，做更多的事情" : 它可以通過一個靈活及簡單的方式來佈局網頁，且兼容所有移動設備。
; X$ }5 m" m2 c" d) h" C% u0 j+ M0 qlamp 不同設備使用了不同開發語言，jQuery Mobile可以很好的兼容不容的設備或操作系統：
% _, Z7 r* T2 k. R' j \2 f/ r. [1 k, C% s
Android 和 Blackberry（黑莓） 使用JAVA語言。
: F) Q, ]2 `7 {1 c iOS 使用 Objective C 語言5 j' v' }1 @! A. Q% ~' [
Windows Phone 使用 C# 和 .net, 等。) c5 o" B8 }) _6 t# {
; c* R; s; _: @+ i8 m: K9 w% V7 Z% o6 TjQuery Mobile 解決了不同設備兼容的問題，因為它只使用HTML，CSS和 JavaScript，這是所有移動網絡瀏覽器的標準！
# g& H) d7 f( F: @, v% h6 B+ @4 `* f1 u w
jQuery Mobile 安裝1 e0 i% f# p3 c3 \
在你的網頁中增加 jQuery Mobile
3 G" x1 |' p* E4 k4 ?9 C, g- r9 t a2 x5 ]' X$ b6 q
你可以通過以下幾種方式將jQuery Mobile增加到你的網頁中： \9 y: t% ~1 B& Y G8 e' O
3 ?" M4 G5 r( }; P% L* V 從 CDN 中加載 jQuery Mobile (推薦)
, \. T( q4 v8 t/ `2 C. S 從jQuerymobile.com 下載 jQuery Mobile庫/ x' s" p2 o8 f) t. L
f/ A- f, X9 c$ J. n2 K% o# u下載 jQuery Mobile4 |1 C/ v) N; b$ D4 q: B- o
0 A H; @( V; d6 J; y' ~4 u7 e如果你想將 jQuery Mobile 放於你的主機中,你可以從 jQuerymobile.com下載該檔案。$ Y w- y" J' m) H2 a# i
; o$ i- M2 Y& m+ e, f3 M
<head>$ R' u) K- }5 t8 j9 i
<meta name="viewport" content="width=device-width, initial-scale=1">- I$ N: v& }3 h: ] m7 d0 a
<link rel="stylesheet" href="jquery.mobile-1.4.5.css">5 w2 z+ |) P" P2 E
<script src="jquery.js"></script>! E9 L2 Q! R, |5 w4 j
<script src="jquery.mobile-1.4.5.js"></script>
" a, |* f& q9 t3 R% J</head>
5 ]8 X* e7 g& j8 g1 d7 ]4 |9 @
8 L2 ?* b, Q+ Q/ }0 N3 D3 C; o提示： 將下載的檔案放置於與網頁同一目錄下。
* A3 X, q+ q% @1 f9 J+ @7 U$ alamp 你是否想知道為什麼在 <script> 標籤中 沒有插入 type="text/javascript" ?8 y: Y' S0 p+ A6 \ x; z
6 ]" O' @) i0 D0 v在 HTML5 已經不需要該屬性。 JavaScript 在所有現代瀏覽器中是 HTML5 的預設腳本語言！
; @" M7 P e _% g
/ t! P, |) A' k$ K! e, t0 bjQuery Mobile 頁面
( P) d! z2 p0 {( z) y開始學習 jQuery Mobile' ^, {+ T' J/ _' \! h# o) G. U b' W
實例
( g! ^- K% M% b- ]) d' e<body> f$ ?" J8 f* u# N" o( A9 k
<div data-role="page">! C2 H; @. ?) e" _5 v- q( `" e
v$ y$ d ^. Y: A; k( b$ w
<div data-role="header">6 v2 F6 p! w% S; w
<h1>歡迎來到我的主頁</h1>; J+ q5 U6 T8 T0 j
</div>6 d7 W; M7 ]$ x" D" `7 v
# ?, b$ A2 ~& v! o1 M: t <div data-role="main" class="ui-content">! l7 e# l% b( }4 p. ]' a4 h
<p>我現在是一個移動端開發者!!</p> s- ^9 D& P: W- ~6 `# F$ }
</div>+ v/ }7 T, E0 X4 o: W
7 R1 Q/ x4 _6 Q% k <div data-role="footer">3 [: c7 ^- k' T% n, Z, `7 O
<h1>底部文字</h1>! D' Q0 k. O, }$ Z+ L. v
</div>/ N# t) ]. V; D# q, P9 {7 s
2 ?% {" U: j6 e; p- D6 \</div>
; N" ^2 F5 b5 O, { D</body>; N7 S) f E0 _6 {* e
實例解析：
2 |6 a" m' v+ x) Z# N( `
, N( k. N1 P4 ?. m+ p, t4 l9 c data-role="page" 是在瀏覽器中顯示的頁面。
; ]9 G8 k! g9 q+ n$ ~ g data-role="header" 是在頁面頂部建立的工具條 (通常用於標題或者搜尋按鈕)
# O/ I( k, f3 a; r) M7 Q data-role="main" 定義了頁面的內容，比如文字， 圖片，表單，按鈕等。
9 u) q4 p3 Q4 k "ui-content" 類用於在頁面增加內邊距和外邊距。
9 z& R3 O7 h' v Y data-role="footer" 用於建立頁面底部工具條。6 a/ a! B5 I% h
在這些容器中你可以增加任何 HTML 元素 - 段落, 圖片, 標題, 列表等。. Q+ b) e9 i( T
# Z8 C+ e: I' r/ O( Q
lamp jQuery Mobile 依賴 HTML5 data-* 屬性來支援各種 UI 元素、過渡和頁面結構。不支援它們的瀏覽器將以靜默方式棄用它們。
' z' u4 n3 w; |4 Y
6 D* `5 E) V0 _ {# ?在頁面中增加 jQuery Mobile7 l" A% x" q" S. a- s, \
+ T7 F! z5 G$ |- q* _* R/ R使用 jQuery Mobile, 你可以再單個 HTML 檔案中建立多個不同的頁面。4 H5 C7 L# L0 }6 |1 F
7 ]4 a8 \; M: R5 }; Y& |你可以使用不同的href屬性來區分使用同一個唯一id的頁面：5 I: `% [" J" D+ y2 }/ M
實例# ]. r' |! X) N! P; i, K! _) ^/ j( v
<div data-role="page" id="pageone">" L, }$ F; O9 ~0 ^9 [" d) b
<div data-role="main" class="ui-content">
# C4 }& ]& I- O" T4 [) i <a href="#pagetwo">跳轉到第二個頁面</a>
& r* `. H8 r: d% N4 |/ v* a </div>
* A9 f! @! D$ ^</div>, M6 w/ n @0 d/ x- T
+ g1 X, _3 Q' N8 d
<div data-role="page" id="pagetwo">2 R' |3 U7 p3 S: v# Q
<div data-role="main" class="ui-content">
: F7 m- E }* x3 Z8 z <a href="#pageone">跳轉到第一個頁面</a>
2 y- _5 L( d6 O# J/ B C4 j </div>
) g$ k; c# E" c# [/ n( q( O' j</div>
& R$ @3 U0 J3 } W" g注意： 當web應用有大量的內容（文字，圖片，腳本等）將會嚴重影響加載時間。如果你不想使用內頁連結可以使用外部檔案：0 R" n+ t* v" \/ z* H
0 j9 F% P, ?% }/ [2 H% z% D7 }5 A
<a href="externalfile.html">訪問外部檔案</a>
$ N: J6 R9 `. [* q0 Q, h
3 G% x3 d% \( T1 I' K! @! C# U頁面作為對話框使用/ I/ R0 R, S" p% P0 U2 M/ h
. C: P/ r- E1 D0 ~9 z* K' D- ]' r ?對話框是用於顯示頁面內容顯示或者表單內容的輸入。 D" g/ n1 j6 k/ b
* x- V ` }7 x0 C
在連結中增加data-rel="dialog"讓會員點閱連結時彈出對話框:
: }% l" ~7 C' d7 G! Y: U1 U* ~實例5 l3 F9 g$ \8 d+ u- S# J3 Y8 P
<div data-role="page" id="pageone">
6 f) f, U! g! n <div data-role="main" class="ui-content">8 K4 O; n2 N6 x1 f& [ L) a; `1 E
<a href="#pagetwo">跳轉到第二個頁面</a>0 E2 _) L3 x8 B7 i; }
</div>
1 P& W1 ]# \0 ?. m& @: {</div>' T5 Z( H) m( k4 l2 X
5 i" F) v- G2 d/ K6 j% D1 m' i
<div data-role="page" data-dialog="true" id="pagetwo">
# Q! V; ?! N% d+ l0 ^8 T5 z <div data-role="main" class="ui-content">% `0 X/ o( c1 U" W* P' r' E X
<a href="#pageone">跳轉到第一個頁面</a>
/ ]. L( ~) L3 _- T. H </div>
" c+ {! n( m9 m# Y; d3 \5 t, l</div> |
|
|Archiver|手機版|禁閉室|MyXNova (原 myxnova.com)
聲望
現金
存款
瀏覽推廣
註冊推廣
金幣
遊戲幣
鑽石
IP卡
狗仔卡
[資訊未更新]
發表於 2016-6-25 16:22:43
提升卡
置頂卡
沉默卡
喧囂卡
變色卡
千斤頂
顯身卡