等級：25 - 爐火純青 經驗值：0 / 246 魔法值：14929 / 14929 生命值：6%
升級
   100%
TA的每日心情 | 奮斗
17 小時前 |
|---|
簽到天數: 5940 天 [LV.Master]伴壇終老
|
馬上註冊，結交更多好友，享用更多功能，讓你輕鬆玩轉社群。
您需要 登入 才可以下載或檢視，沒有帳號？立即註冊
×
jQuery Mobile 是用於建立移動 Web 應用的前端開發框架。
2 r N. Z2 `3 s' K9 G5 ]jQuery Mobile 可以應用於智能手機與平板電腦。 d9 S; ?' T: x6 K, X
jQuery Mobile 使用 HTML5 & CSS3 最小的腳本來佈局網頁。
& U' f0 O: j9 a8 @$ G( H; f% J7 t
什麼是 jQuery Mobile?
& t/ Z1 |/ D6 L$ n! _. L; _" C. s+ I8 o/ u! N: g2 _+ L5 l
jQuery Mobile 是針對觸屏智能手機與平板電腦的網頁開發框架。 : g, f3 F/ {8 `# k1 g
" u* m: x6 e0 d, Q0 e8 n. rjQuery Mobile 工作與所有主流的智能手機和平板電腦上： 3 P+ Q2 [# Z& g7 ]
r: U7 C- {# t$ G/ }jQuery Mobile 構建於 jQuery 以及 jQuery UI類庫之上，如果您瞭解 jQuery，您可以很容易的學習 jQuery Mobile。 : Q" {1 b6 k, `7 X6 P
jQuery Mobile 使用了極少的 HTML5、CSS3、JavaScript 和 AJAX 腳本代碼來完成頁面的佈局渲染。) ]9 ^- }( N- y) M! Y
" z5 o# o+ _# C* R- l為什麼使用 jQuery Mobile?
* x T% b; O+ o+ ]! V- P' p' f
6 ]1 D" _% ?3 R _( L. S通過使用jQuery Mobile 可以 "寫更少的代碼，做更多的事情" : 它可以通過一個靈活及簡單的方式來佈局網頁，且兼容所有移動設備。! K- c2 v3 i" D2 P- b
lamp 不同設備使用了不同開發語言，jQuery Mobile可以很好的兼容不容的設備或操作系統：
7 o' U. G$ Q2 p d! U& W B
0 |7 [: R& a: v$ q0 r# [- H5 n Android 和 Blackberry（黑莓） 使用JAVA語言。
) ^2 }; S. d1 Y, D0 o; y/ W iOS 使用 Objective C 語言
& }- ` P! ?. J S. { Windows Phone 使用 C# 和 .net, 等。
! D& _7 Y5 ~% X% Q4 M! H3 N( x4 v$ H2 m
jQuery Mobile 解決了不同設備兼容的問題，因為它只使用HTML，CSS和 JavaScript，這是所有移動網絡瀏覽器的標準！# b6 K% i7 S. I3 _
5 z% \. E2 E: G# d$ G J0 y' w
jQuery Mobile 安裝
, q2 ~8 H5 |2 h6 R: Q2 x在你的網頁中增加 jQuery Mobile1 w: R0 H& R8 I z) O2 @! I
( S+ W& t+ n5 G/ p+ r" C0 C" D, y你可以通過以下幾種方式將jQuery Mobile增加到你的網頁中：
6 c9 m$ ^9 m7 \/ v2 T7 b9 g- p2 _: h
7 r- G& L# H0 E& b& V- \; ? 從 CDN 中加載 jQuery Mobile (推薦)
# E0 e% A& w6 a2 m1 u 從jQuerymobile.com 下載 jQuery Mobile庫2 m! [1 `- `. z0 d; a; Q* q
6 j% h' W& T, a# k下載 jQuery Mobile! c6 ~/ a2 _9 N! w
& _! a. W/ @ L m( T+ X2 m; Y. K如果你想將 jQuery Mobile 放於你的主機中,你可以從 jQuerymobile.com下載該檔案。
+ c* c/ P- a7 ~. u- b, @# |8 w0 W0 j* L2 M
<head>
7 _) b+ {$ {. h: h& C1 \, z7 m<meta name="viewport" content="width=device-width, initial-scale=1">0 ~) ~6 ~( x# c
<link rel="stylesheet" href="jquery.mobile-1.4.5.css">
% n& R# }1 r; I8 f3 p F9 g s<script src="jquery.js"></script>
7 Z5 I J$ ^% U S3 ]( E/ c<script src="jquery.mobile-1.4.5.js"></script># j; }( y# X3 b
</head>
6 h2 Q* m$ X8 W' `
+ Z: Q6 Z3 {0 J* Q l6 o4 B提示： 將下載的檔案放置於與網頁同一目錄下。
0 d; L- K# A, K9 j0 O; I' _lamp 你是否想知道為什麼在 <script> 標籤中 沒有插入 type="text/javascript" ?# }7 n I: I0 C8 C7 f9 m( s e
& l$ D' M, ] R4 A3 I3 [/ W在 HTML5 已經不需要該屬性。 JavaScript 在所有現代瀏覽器中是 HTML5 的預設腳本語言！4 H7 ?' \: F& J9 l4 k5 I: m# C
* V" ^: E6 A, J2 E6 B" c0 V
jQuery Mobile 頁面* l! q/ d: u i
開始學習 jQuery Mobile- o$ I" p" U1 u; B F
實例
+ v4 |# D; \3 b$ D. G1 w/ v! ?3 X; O<body>( o, n8 \& x6 R* |* U
<div data-role="page">
! u/ |; E- s8 V$ r( V0 J3 o! H8 k! L1 ^( f, N+ U
<div data-role="header">5 D' s; b( S8 M& J. J: H- c6 K8 A
<h1>歡迎來到我的主頁</h1>8 M& c# ]1 ~3 \5 G( r+ W
</div>
! U9 s5 g3 Z: y: C# Q) b) L. q3 t6 C: n; e
<div data-role="main" class="ui-content">
; k9 S; |: {) u% b; h7 e# x <p>我現在是一個移動端開發者!!</p>6 f( [2 r9 U! k& v: }+ d
</div>
1 M* [6 e: }$ h
- B: X3 G8 u2 x% X8 L <div data-role="footer">& t. a9 ~8 W4 Q9 I2 z, X
<h1>底部文字</h1>, d2 K' N( i2 B3 S/ C3 h
</div>
) Q& D2 N- t& W1 S' K$ K3 s9 p( ?0 W8 y/ U2 g& I- g5 `
</div>
4 a9 l- l' {, y</body>
) v& p5 o. C |; |) U1 Y實例解析：+ D" s6 k9 f2 i4 Q1 C
) P% B- D: @6 }0 n data-role="page" 是在瀏覽器中顯示的頁面。: u6 u4 q# h" I
data-role="header" 是在頁面頂部建立的工具條 (通常用於標題或者搜尋按鈕)
7 K" T8 {5 V' f6 |6 Q* | data-role="main" 定義了頁面的內容，比如文字， 圖片，表單，按鈕等。
6 r8 z' P8 b H. E' u$ N7 d" Z6 M; H "ui-content" 類用於在頁面增加內邊距和外邊距。& M$ T8 J# F) e* C
data-role="footer" 用於建立頁面底部工具條。
3 L8 V6 k6 A( j 在這些容器中你可以增加任何 HTML 元素 - 段落, 圖片, 標題, 列表等。* M% i: C9 u& Q3 M/ V4 m$ H( O
4 |+ |9 x2 E! ~5 y- hlamp jQuery Mobile 依賴 HTML5 data-* 屬性來支援各種 UI 元素、過渡和頁面結構。不支援它們的瀏覽器將以靜默方式棄用它們。
5 G* {- {4 d( P2 n8 C; E- x% u* _( ?
在頁面中增加 jQuery Mobile/ v' s! d, G' s! A: z
* {7 I3 M, v" Y7 D
使用 jQuery Mobile, 你可以再單個 HTML 檔案中建立多個不同的頁面。6 [! o s1 [5 a( V1 b
; V4 S$ d3 T/ y4 D% m3 a* ^) H" [
你可以使用不同的href屬性來區分使用同一個唯一id的頁面：
3 H8 O/ S0 E- m' y. f1 R5 x實例
7 A% S/ m: ]5 r/ T, q<div data-role="page" id="pageone">
: U5 A& @& v% ]* @6 T <div data-role="main" class="ui-content">% l) O* O0 G3 s8 u5 R
<a href="#pagetwo">跳轉到第二個頁面</a>! `9 ]4 t3 M1 `9 P' X
</div>5 i2 C" a* o/ A! {
</div>8 {9 L2 D/ N3 k/ l- T
; H- j3 e0 V' m3 S2 f4 j0 A' D `<div data-role="page" id="pagetwo">9 U: i! A6 ]* s% p
<div data-role="main" class="ui-content">
7 i3 N" e$ { q) u6 ]8 y <a href="#pageone">跳轉到第一個頁面</a>3 E! Y$ {4 m) D! v9 j" y7 c9 _
</div>, z- I9 V+ w) H" H8 v
</div>4 f1 T' t7 L7 ]: j, D
注意： 當web應用有大量的內容（文字，圖片，腳本等）將會嚴重影響加載時間。如果你不想使用內頁連結可以使用外部檔案：/ p1 {0 z: i( G* V( Z
- d2 o* o2 H0 j9 J
<a href="externalfile.html">訪問外部檔案</a>
0 M+ }: y; H4 l, o g( b! O- j2 q% ~7 @: |4 v8 R
頁面作為對話框使用
2 Z/ ~) q9 r5 S% Z% @5 Q M$ x% q0 [
0 \1 ^/ d0 ^8 b/ v M對話框是用於顯示頁面內容顯示或者表單內容的輸入。
+ w0 u# @: X1 X9 I# \2 e
% f/ \4 @# v" |在連結中增加data-rel="dialog"讓會員點閱連結時彈出對話框:
, P2 A V7 X, _$ c; L, j9 t! O- Q7 O實例
- {: \* n, R2 \+ F! n; p<div data-role="page" id="pageone">6 E6 o8 a+ C6 P9 h
<div data-role="main" class="ui-content">, j- }+ P2 l7 A: y m- T
<a href="#pagetwo">跳轉到第二個頁面</a>6 [# g# J$ I6 B& P
</div>* l& d1 U. ?' R3 ^% S7 U
</div>, k6 f, s6 k$ J8 A8 A: F- g
( o6 _' p: ^( \3 s5 ~. c u3 \
<div data-role="page" data-dialog="true" id="pagetwo">
& a9 C3 D+ D+ }$ O <div data-role="main" class="ui-content">) n1 ?! `6 G2 f+ |$ D9 }$ t. W& `/ o
<a href="#pageone">跳轉到第一個頁面</a>
: y5 c+ o& i; f3 r2 h4 L2 I </div>
- m5 k9 u% ?8 [/ ]</div> |
|
|Archiver|手機版|禁閉室|MyXNova (原 myxnova.com)
聲望
現金
存款
瀏覽推廣
註冊推廣
金幣
遊戲幣
鑽石
IP卡
狗仔卡
[資訊未更新]
發表於 2016-6-25 16:22:43
提升卡
置頂卡
沉默卡
喧囂卡
變色卡
千斤頂
顯身卡