等級：25 - 爐火純青 經驗值：0 / 245 魔法值：14373 / 14373 生命值：5%
升級
   100%
TA的每日心情 | 奮斗
17 小時前 |
|---|
簽到天數: 5781 天 [LV.Master]伴壇終老
|
馬上註冊，結交更多好友，享用更多功能，讓你輕鬆玩轉社群。
您需要 登入 才可以下載或檢視，沒有帳號？立即註冊
×
jQuery Mobile 是用於建立移動 Web 應用的前端開發框架。 . o0 K6 v& i" j; z
jQuery Mobile 可以應用於智能手機與平板電腦。
3 d. Q# z4 J- T7 N7 DjQuery Mobile 使用 HTML5 & CSS3 最小的腳本來佈局網頁。" ? l& L1 K- t" ~4 Y; @
! O8 D* N3 r: g) `0 q; M9 Z" b7 c9 K
什麼是 jQuery Mobile?
3 A2 ]: J+ Q: u, V1 }/ |( S
% x' b/ |$ O& q9 |3 hjQuery Mobile 是針對觸屏智能手機與平板電腦的網頁開發框架。
; h2 i) t4 N2 H6 V, h+ I& z \- F( I; v5 B/ V0 t
jQuery Mobile 工作與所有主流的智能手機和平板電腦上：
7 F1 u0 E) A: Y$ T; m! ~$ w
+ A) U/ \# `; I3 o0 K; A: m) rjQuery Mobile 構建於 jQuery 以及 jQuery UI類庫之上，如果您瞭解 jQuery，您可以很容易的學習 jQuery Mobile。
' U1 [/ `6 K$ {4 UjQuery Mobile 使用了極少的 HTML5、CSS3、JavaScript 和 AJAX 腳本代碼來完成頁面的佈局渲染。5 E+ c& ~9 K" y( q% z& t1 p
3 ]. J/ d8 }4 w7 D, {
為什麼使用 jQuery Mobile?, M B. J, E* g, P& B
9 X; `: s4 e4 @( T通過使用jQuery Mobile 可以 "寫更少的代碼，做更多的事情" : 它可以通過一個靈活及簡單的方式來佈局網頁，且兼容所有移動設備。- m1 z- I+ X. n2 G4 u( \! a
lamp 不同設備使用了不同開發語言，jQuery Mobile可以很好的兼容不容的設備或操作系統：
; N' W" ~8 `3 G# {9 N) T
" N: z) R9 f9 A: C Android 和 Blackberry（黑莓） 使用JAVA語言。" T f2 |7 Y5 j: G7 F5 j C: d
iOS 使用 Objective C 語言
" {7 b/ D8 N P8 o; U Windows Phone 使用 C# 和 .net, 等。
4 R; a' _, t' q, q- H& u4 w6 ]1 X1 j7 z# _+ B4 y- ^/ g
jQuery Mobile 解決了不同設備兼容的問題，因為它只使用HTML，CSS和 JavaScript，這是所有移動網絡瀏覽器的標準！
# F' F$ c4 M% U9 x p& @" _- U: @7 ]8 W! i, Y0 ]
jQuery Mobile 安裝
4 [: a% ?& C! D5 ?* w在你的網頁中增加 jQuery Mobile- m* [2 g# \2 j) @8 J y
3 a3 M2 ]' ~" A# l& O$ d% n% a1 \
你可以通過以下幾種方式將jQuery Mobile增加到你的網頁中：
7 i- J) \6 g( I7 A$ j
3 o3 C, _ h1 j, |- N) f 從 CDN 中加載 jQuery Mobile (推薦)
1 g( m! f9 h$ }. H' u8 K' h 從jQuerymobile.com 下載 jQuery Mobile庫: C2 ?" l- o. \# z" r( L% M
7 Q/ M& X; }. r, [" A
下載 jQuery Mobile
$ }; V" i; H8 f
. X. V) F- t4 _. T$ L Z如果你想將 jQuery Mobile 放於你的主機中,你可以從 jQuerymobile.com下載該檔案。* U6 b' n& Z) m5 a# A+ f
5 |, S9 Z* ?3 U: ]5 [4 D
<head>
# q; N5 W* r( u7 v r<meta name="viewport" content="width=device-width, initial-scale=1">
5 M4 ~+ P9 c& G4 S$ i$ {<link rel="stylesheet" href="jquery.mobile-1.4.5.css">
4 v" ?$ n) U/ f2 U# y: ?<script src="jquery.js"></script>
3 N9 Q r# p5 t/ Z& B' {& ~<script src="jquery.mobile-1.4.5.js"></script>+ y X4 ]. d2 l8 h0 S
</head>
/ V3 D* i& U1 V x
, I2 F G' M3 Q( \( z& l提示： 將下載的檔案放置於與網頁同一目錄下。
! B& L& X2 k7 O; J. Vlamp 你是否想知道為什麼在 <script> 標籤中 沒有插入 type="text/javascript" ?
% w1 `6 C' a' U! X+ x+ e
" n6 y# h1 y5 ]/ }, N在 HTML5 已經不需要該屬性。 JavaScript 在所有現代瀏覽器中是 HTML5 的預設腳本語言！6 C/ X) U9 r9 e
' @/ O8 B- i7 o% P. Q9 P
jQuery Mobile 頁面0 G0 J0 z7 `+ n+ x& a; D. d+ q. x
開始學習 jQuery Mobile
7 r2 J0 K! S! t( R4 q實例2 M6 F2 F4 K! p; s0 F2 A/ F
<body>
! f2 D2 F3 H: B<div data-role="page">, f1 @( y j* \8 m3 N
$ e+ [, R! q& T7 R <div data-role="header">/ L" f F! K3 y5 W/ f/ b( Q8 `
<h1>歡迎來到我的主頁</h1>( l8 |+ y6 G, n+ u
</div>3 x: ^* k/ |( O1 [5 _
3 j& }2 s* X. F4 z <div data-role="main" class="ui-content">
6 I1 i& O. d' J; @0 o1 ~4 N <p>我現在是一個移動端開發者!!</p>
7 C: @' s' ^/ w) x* m </div>! P7 ~8 j$ `/ G% J2 ]) G; e
6 z1 H2 F- |1 y. m! _! y% R- V; M- b" X
<div data-role="footer">0 s% c: a" `* m! I
<h1>底部文字</h1>
" R4 P1 `- h: P+ ]+ X </div>
# o$ a2 Y0 B! y7 F' p, B( Q( W! b+ W
</div>3 R' f! |# j L# ?! h
</body> c/ v( H! Q0 c& f$ l% V/ z1 G
實例解析：+ `- N) \1 ^3 ]3 n% M
5 R! i P( O) g8 @4 J5 }3 ~ data-role="page" 是在瀏覽器中顯示的頁面。3 Z3 ~1 H. c+ E/ z
data-role="header" 是在頁面頂部建立的工具條 (通常用於標題或者搜尋按鈕)9 \( _$ w1 k+ g% ?# R$ X! ^
data-role="main" 定義了頁面的內容，比如文字， 圖片，表單，按鈕等。
! y0 f! m9 J% K1 x4 W+ }8 | "ui-content" 類用於在頁面增加內邊距和外邊距。
# ^ [( ~; g) D+ T8 W. q0 G8 }7 E data-role="footer" 用於建立頁面底部工具條。. v6 [' a Z) L4 j1 k
在這些容器中你可以增加任何 HTML 元素 - 段落, 圖片, 標題, 列表等。4 R* ~2 p9 W& l: m" v( w& `, \
( |+ u; P: K$ j, i4 a- j' {, l& K
lamp jQuery Mobile 依賴 HTML5 data-* 屬性來支援各種 UI 元素、過渡和頁面結構。不支援它們的瀏覽器將以靜默方式棄用它們。
, r& n4 H" C) r+ I: k2 T- N
+ D1 A4 W. ~% d/ x在頁面中增加 jQuery Mobile
8 s1 e0 G* y& n3 G3 L
7 A4 `# H# C% s# C( `& z( d7 O/ D. u使用 jQuery Mobile, 你可以再單個 HTML 檔案中建立多個不同的頁面。
& O+ W) Y: P: H+ n0 ?3 q* E) Q7 n; T2 L8 W; P
你可以使用不同的href屬性來區分使用同一個唯一id的頁面：. E+ w% G4 r2 F5 t! s& F- l0 H
實例
6 t" K- |$ j- V* [<div data-role="page" id="pageone">: b0 g) j/ m7 \) ^7 |9 Y ]& B% t& ?
<div data-role="main" class="ui-content">
3 y$ B3 m/ Y1 r6 v* c) e4 E9 b8 m# D <a href="#pagetwo">跳轉到第二個頁面</a>
# C) n* o S5 [8 \. }5 c9 h4 ] </div>
- [& j+ u8 w6 L$ e7 `2 T/ i</div>9 A4 t! k& _- m6 k4 t' z
% G: A% s; z/ @; H
<div data-role="page" id="pagetwo">
) {+ P: x. G7 H1 `6 h <div data-role="main" class="ui-content">
Q2 _9 j3 b7 d <a href="#pageone">跳轉到第一個頁面</a>
" ~& q" @$ I6 U$ l. x </div>
7 }# [) n2 X+ w% T4 n* c" q4 @</div>
4 F! g8 Q, I2 L3 f9 B, u注意： 當web應用有大量的內容（文字，圖片，腳本等）將會嚴重影響加載時間。如果你不想使用內頁連結可以使用外部檔案：
0 |: R% q/ C1 H. z# U$ h! @) K7 L6 ~( e
<a href="externalfile.html">訪問外部檔案</a>
. A0 x5 e5 \! k2 V
! n' v2 k! Z, i頁面作為對話框使用
% ]6 \/ ?" O& }* |$ y$ v0 Y4 p$ c* x" o
對話框是用於顯示頁面內容顯示或者表單內容的輸入。
+ P! J$ D$ E' h. x8 t$ n ?, k
* c" Z" {2 j/ f- ]# f在連結中增加data-rel="dialog"讓會員點閱連結時彈出對話框:
$ V" ~2 ^8 r0 Y& J. Z6 D( s實例
( U3 G: j9 E& C `0 _: A% |<div data-role="page" id="pageone">
( y7 Y% W2 h/ l$ ?+ K$ ~ <div data-role="main" class="ui-content">; t( L/ _: `+ q$ t/ |
<a href="#pagetwo">跳轉到第二個頁面</a>; [/ `5 q2 S; D) `7 e
</div>
6 [* @+ S- F' h5 ?% M</div>
. T' ^! D+ ~1 h# z9 G: x0 t( Z' f5 D5 n5 f* r
<div data-role="page" data-dialog="true" id="pagetwo">0 t1 N( Y! J8 @% `
<div data-role="main" class="ui-content"># b9 X' G. E+ P; d; h3 c
<a href="#pageone">跳轉到第一個頁面</a>: S) K4 S% r& Y5 J( e6 \0 ^
</div># V) U$ w& ]2 H1 K! N
</div> |
|
|Archiver|手機版|禁閉室|MyXNova (原 myxnova.com)
聲望
現金
存款
瀏覽推廣
註冊推廣
金幣
遊戲幣
鑽石
IP卡
狗仔卡
[資訊未更新]
發表於 2016-6-25 16:22:43
提升卡
置頂卡
沉默卡
喧囂卡
變色卡
千斤頂
顯身卡