等級：25 - 爐火純青 經驗值：0 / 245 魔法值：13993 / 13993 生命值：5%
升級
   100%
TA的每日心情 | 奮斗
19 小時前 |
|---|
簽到天數: 5641 天 [LV.Master]伴壇終老
|
馬上註冊，結交更多好友，享用更多功能，讓你輕鬆玩轉社群。
您需要 登入 才可以下載或檢視，沒有帳號？立即註冊
×
jQuery Mobile 是用於建立移動 Web 應用的前端開發框架。
. b: [. m7 E8 ]$ ^. C0 L' EjQuery Mobile 可以應用於智能手機與平板電腦。 ( ~$ s' B0 T$ _" ~2 g" a) ?7 U' A
jQuery Mobile 使用 HTML5 & CSS3 最小的腳本來佈局網頁。
! u* _3 V8 p4 h- z1 r* Z7 q4 j3 c
* B5 ]- w* E% W" {2 v7 m什麼是 jQuery Mobile?
3 m" j, H6 K* r
5 I# x9 p! P' W* T8 f/ H( ljQuery Mobile 是針對觸屏智能手機與平板電腦的網頁開發框架。
* Q/ r4 c% A0 P$ a% ~/ Q
! R5 A) f0 @" EjQuery Mobile 工作與所有主流的智能手機和平板電腦上： 2 I! S7 Z$ D, V/ F. ]- ?; r+ ^& m$ x! x
k' f+ N# k {jQuery Mobile 構建於 jQuery 以及 jQuery UI類庫之上，如果您瞭解 jQuery，您可以很容易的學習 jQuery Mobile。
- ]8 Y2 y1 {3 [$ K' A3 ajQuery Mobile 使用了極少的 HTML5、CSS3、JavaScript 和 AJAX 腳本代碼來完成頁面的佈局渲染。
: v, ^2 E7 q6 H, I! f" I* I, b+ c7 {# k+ W! U6 W
為什麼使用 jQuery Mobile?- K! c2 L, \# h- f9 h. `
, O, c1 G' v, @1 n! P
通過使用jQuery Mobile 可以 "寫更少的代碼，做更多的事情" : 它可以通過一個靈活及簡單的方式來佈局網頁，且兼容所有移動設備。
+ c x8 W0 P. X9 f$ j% Xlamp 不同設備使用了不同開發語言，jQuery Mobile可以很好的兼容不容的設備或操作系統：* S; v6 U- @3 h' f) o
/ c2 ~0 a( X' c% P5 o: M
Android 和 Blackberry（黑莓） 使用JAVA語言。& X; q$ F0 Q; M) k: F4 y" z2 u8 B
iOS 使用 Objective C 語言
3 b" m9 p+ F) T6 `# @ Windows Phone 使用 C# 和 .net, 等。
; ` Q. r/ O: N/ g6 c0 e, @) y! U* H3 c$ s/ s9 X
jQuery Mobile 解決了不同設備兼容的問題，因為它只使用HTML，CSS和 JavaScript，這是所有移動網絡瀏覽器的標準！3 m! Y4 q* {" O: D# \; m
0 x/ U* b6 G! ~6 r8 \# s: SjQuery Mobile 安裝8 A8 X: p+ W/ }& P) a$ D
在你的網頁中增加 jQuery Mobile Z. B& B4 a6 r! `" q8 C
7 b; V1 ]' u+ r: ~1 O H) e
你可以通過以下幾種方式將jQuery Mobile增加到你的網頁中：( x7 x' H' M, | h5 n: ?5 e
( W8 q! p. m9 J( t% `8 a) b/ O' {2 T 從 CDN 中加載 jQuery Mobile (推薦)) m/ V& M- B" q0 D0 Z
從jQuerymobile.com 下載 jQuery Mobile庫8 n7 E! G" h+ V( r2 N( I0 O
$ W3 L# Z( R9 w( G5 c2 [, O
下載 jQuery Mobile0 a. e! e9 d8 L) r4 d; H3 T$ A
@: n) T9 c4 Q! @4 z
如果你想將 jQuery Mobile 放於你的主機中,你可以從 jQuerymobile.com下載該檔案。
2 }+ \0 j: S9 H) J( v- K! ^+ w$ P- A& J7 ?
<head>
4 u" T3 v- m& n: m/ P5 d3 H+ }<meta name="viewport" content="width=device-width, initial-scale=1">
9 f, {6 N3 `* S7 M<link rel="stylesheet" href="jquery.mobile-1.4.5.css">
# Q3 T9 Y$ e$ M) h8 a' Y9 ~<script src="jquery.js"></script>
, `6 x+ Z# D; M% i9 A" v<script src="jquery.mobile-1.4.5.js"></script>
# V2 }% F+ e0 i- l* \/ h</head>
/ I3 M7 U) E+ ~, F+ p. `% ]6 T
* o$ s! ]$ {/ I提示： 將下載的檔案放置於與網頁同一目錄下。7 u6 d9 d+ L3 Q, K# d% c3 {; R
lamp 你是否想知道為什麼在 <script> 標籤中 沒有插入 type="text/javascript" ?
- G8 L8 }+ i. T6 ~4 a5 ?; M' V9 u a' F- G( d& a
在 HTML5 已經不需要該屬性。 JavaScript 在所有現代瀏覽器中是 HTML5 的預設腳本語言！
: \' c: d" b' u; {# a; v+ j" W( X% b* Q A, k
jQuery Mobile 頁面
) R" M9 |( v# h開始學習 jQuery Mobile
7 e! {2 d1 \# {; C6 J6 R$ @% q L實例
2 N4 F* T$ P1 z+ g C: [<body>3 M h9 K+ m3 X
<div data-role="page">
: G1 h+ K0 f% r7 g0 `' Y6 n1 f4 [4 g
<div data-role="header">
- v$ C, Z. ?0 V0 r <h1>歡迎來到我的主頁</h1>; j1 p/ S* K0 q* c3 [- m, t
</div>: d9 }6 y7 z; q$ a" o
& N4 E6 W. Q! }, a- k9 t: r <div data-role="main" class="ui-content">
4 M/ G0 W9 f# T9 M" q) O <p>我現在是一個移動端開發者!!</p>
8 N* i* D# D8 i1 ^ </div>; N6 {! C, R- O3 T9 H% H7 o8 a
) h7 U1 b( L5 u" m <div data-role="footer">
" u! b4 O' c& s8 | <h1>底部文字</h1>7 w* n& ~( W3 x5 ?7 s" u- c
</div>" L/ {* w% l0 k- A% i, m
" V) }7 h* d' h
</div>
- \- }) i+ t q& N5 f$ ?" a</body>! ~2 S, w( s! i0 u* O
實例解析：, ~# T; H: r3 b7 D. K" _
: e. i2 Z) s, \0 |0 V6 ?
data-role="page" 是在瀏覽器中顯示的頁面。
$ a. z/ ~( v5 a7 d: b; e. J# f data-role="header" 是在頁面頂部建立的工具條 (通常用於標題或者搜尋按鈕)+ F: l* D2 S6 I9 B' h- ~9 P
data-role="main" 定義了頁面的內容，比如文字， 圖片，表單，按鈕等。7 c9 Q, Z- X, R2 [. Y
"ui-content" 類用於在頁面增加內邊距和外邊距。
/ A+ `# K' C' ?. A5 c4 B' ` data-role="footer" 用於建立頁面底部工具條。
9 L1 B$ e+ [% Q6 a' [$ ]$ Z 在這些容器中你可以增加任何 HTML 元素 - 段落, 圖片, 標題, 列表等。' B5 D* P# C6 j3 m8 Z$ B
4 W7 v a0 X: y/ I! l* T. ^$ _ F
lamp jQuery Mobile 依賴 HTML5 data-* 屬性來支援各種 UI 元素、過渡和頁面結構。不支援它們的瀏覽器將以靜默方式棄用它們。
9 `3 e" T3 i4 B& ]
0 ], Y$ x9 s0 v: o+ v3 B& X7 c在頁面中增加 jQuery Mobile* _6 _& k$ h5 L- O
9 V# e( {$ ]! r) ^4 A" e使用 jQuery Mobile, 你可以再單個 HTML 檔案中建立多個不同的頁面。
, R* s# R$ E/ d' u- j p
- ?& P# Q8 P' a你可以使用不同的href屬性來區分使用同一個唯一id的頁面：6 W* G* M# [) { h" u' L9 g0 ]
實例6 F0 a, B) D1 U1 |6 Q7 ]
<div data-role="page" id="pageone">; v! e8 u6 S+ k+ ^0 u
<div data-role="main" class="ui-content">
( s* J! S4 h4 r' w/ Y( _' U <a href="#pagetwo">跳轉到第二個頁面</a>9 i* R! v, Y7 d) h/ b1 g. g; B
</div>
1 |; d }7 N" L2 f, o/ }* H) o6 G</div>
8 y$ \. u, P1 x& E3 W* N4 m( |
& }4 x' w, @( y5 g; l/ T( j<div data-role="page" id="pagetwo"> ]( E+ ^8 O+ G( m$ a- N3 K, z
<div data-role="main" class="ui-content">4 B) \: \# N' K& O/ u; a$ V/ M% V
<a href="#pageone">跳轉到第一個頁面</a>
: c2 @9 e& W% @' Z: ]* F5 U </div>9 f3 a. n+ X* h! q8 n T
</div>7 Z. J6 E( E( L: V [8 o
注意： 當web應用有大量的內容（文字，圖片，腳本等）將會嚴重影響加載時間。如果你不想使用內頁連結可以使用外部檔案：
5 ?+ Q, R B3 r4 E0 J8 ?) q' r4 F
<a href="externalfile.html">訪問外部檔案</a>1 m" g ~2 Y/ l# I' w _
- s) ^9 T4 U* g7 X6 [
頁面作為對話框使用
% o6 z6 |, b% m$ u
3 h3 d g% a- x5 o0 ~1 o對話框是用於顯示頁面內容顯示或者表單內容的輸入。. x |9 L& b7 |+ G
! `% Z$ g. ~5 n- B1 H; a$ q1 M在連結中增加data-rel="dialog"讓會員點閱連結時彈出對話框:
" w" I+ c% u3 s4 r% _9 o實例+ x! F# | c/ x
<div data-role="page" id="pageone">
+ \* ]$ w- C! ~+ }( }7 ]; U <div data-role="main" class="ui-content">
7 w4 E$ f3 p" s! o# N <a href="#pagetwo">跳轉到第二個頁面</a>
3 S2 z5 ~5 H2 {6 j5 a3 l n </div>; x, G, T8 [0 w% U; v5 ]- U
</div>8 g8 L \3 s2 }! ^
9 W7 m4 C' T& O; z<div data-role="page" data-dialog="true" id="pagetwo">
1 j" |+ J1 G9 X$ S' s1 B' u( [ <div data-role="main" class="ui-content">% m, ]' ^2 ?& ~ o
<a href="#pageone">跳轉到第一個頁面</a>. P; t/ I, Z9 g; K' ?: R
</div>
& k: g1 w U( Z</div> |
|
|Archiver|手機版|禁閉室|MyXNova (原 myxnova.com)
聲望
現金
存款
瀏覽推廣
註冊推廣
金幣
遊戲幣
鑽石
IP卡
狗仔卡
[資訊未更新]
發表於 2016-6-25 16:22:43
提升卡
置頂卡
沉默卡
喧囂卡
變色卡
千斤頂
顯身卡