等級：25 - 爐火純青 經驗值：0 / 244 魔法值：13401 / 13401 生命值：4%
升級
   100%
TA的每日心情 | 奮斗
1 小時前 |
|---|
簽到天數: 5428 天 [LV.Master]伴壇終老
|
馬上註冊，結交更多好友，享用更多功能，讓你輕鬆玩轉社群。
您需要 登入 才可以下載或檢視，沒有帳號？立即註冊
×
jQuery Mobile 是用於建立移動 Web 應用的前端開發框架。 6 C% o" J4 i1 M# m; X
jQuery Mobile 可以應用於智能手機與平板電腦。 ; I# A. p/ r# B8 J
jQuery Mobile 使用 HTML5 & CSS3 最小的腳本來佈局網頁。0 t, @) g- e2 f5 A9 u
* O2 ?2 G n |" F+ A$ w6 `$ U- H什麼是 jQuery Mobile? : x% K8 B: i! ~( o" S
) U3 R! ?3 Z* P
jQuery Mobile 是針對觸屏智能手機與平板電腦的網頁開發框架。
# [' ~( U+ |0 U2 C7 T9 @, N/ v$ f) S7 o
jQuery Mobile 工作與所有主流的智能手機和平板電腦上： & S f I1 z; y3 U& Y' q$ _, Y; M
, R* B# A8 P8 ?: Q0 a& ljQuery Mobile 構建於 jQuery 以及 jQuery UI類庫之上，如果您瞭解 jQuery，您可以很容易的學習 jQuery Mobile。
- x6 t& Q. `) y. c; c8 TjQuery Mobile 使用了極少的 HTML5、CSS3、JavaScript 和 AJAX 腳本代碼來完成頁面的佈局渲染。
5 @, F" C9 X x5 J2 N6 `- j
1 c5 I x0 p+ C% k" E( O: i為什麼使用 jQuery Mobile?6 g8 N" {# _; l' V ]" p
/ b0 M4 k, W% f' E, J f; E7 Y2 G通過使用jQuery Mobile 可以 "寫更少的代碼，做更多的事情" : 它可以通過一個靈活及簡單的方式來佈局網頁，且兼容所有移動設備。: e) M# }7 j7 q/ L% a/ z2 Z% l& |
lamp 不同設備使用了不同開發語言，jQuery Mobile可以很好的兼容不容的設備或操作系統：' P8 i) E7 F8 |8 D4 Q, N/ n& S
8 d. d9 T5 S% V+ C8 V8 W" z- c( [
Android 和 Blackberry（黑莓） 使用JAVA語言。
. x) z P6 S; N iOS 使用 Objective C 語言
9 q2 Z9 ?1 c3 g9 @+ w- L3 [, F Windows Phone 使用 C# 和 .net, 等。) k% v# J3 Y! h1 l. _$ M
; t8 p& ]) t7 _- CjQuery Mobile 解決了不同設備兼容的問題，因為它只使用HTML，CSS和 JavaScript，這是所有移動網絡瀏覽器的標準！
% b$ Z0 M3 Y! e) J! R9 D8 [* L$ _2 E5 v) E# v. ^
jQuery Mobile 安裝
! Q2 `5 o [2 c* e在你的網頁中增加 jQuery Mobile2 o) j/ c T! I# |2 a
+ ]! `+ ? k3 ~3 ?. j E你可以通過以下幾種方式將jQuery Mobile增加到你的網頁中：
- h3 D. K5 k/ L: s
3 }9 I; Y4 B c, w8 E" _ 從 CDN 中加載 jQuery Mobile (推薦), t. V/ u) o- d. ]
從jQuerymobile.com 下載 jQuery Mobile庫' x: T+ ?' z: P7 U
; A: |8 h2 g6 W下載 jQuery Mobile
" H5 O0 X5 b! }3 S$ ]
6 G4 N- ]2 }, F9 a% ^如果你想將 jQuery Mobile 放於你的主機中,你可以從 jQuerymobile.com下載該檔案。) L5 [0 Z' U! Z% h2 m0 n
3 Y) G% T' k; e& Y+ M
<head>8 y5 U8 j+ }+ O
<meta name="viewport" content="width=device-width, initial-scale=1">
# m# W- T* D2 \<link rel="stylesheet" href="jquery.mobile-1.4.5.css">6 `' v6 ]& G4 H$ }
<script src="jquery.js"></script>; V2 n s3 d) n: y6 F, ~, P3 ^
<script src="jquery.mobile-1.4.5.js"></script>. _' {2 ` i0 M; T( t: {
</head>& b) k, c) L$ Y0 Z9 x# A1 i
~+ V( i0 I# }$ O
提示： 將下載的檔案放置於與網頁同一目錄下。' f4 E3 K D5 D3 r, r3 r2 u$ e
lamp 你是否想知道為什麼在 <script> 標籤中 沒有插入 type="text/javascript" ?
7 I. n9 ]' {4 g( s& } b
3 |- r3 f1 x6 r1 W5 ]6 H在 HTML5 已經不需要該屬性。 JavaScript 在所有現代瀏覽器中是 HTML5 的預設腳本語言！1 ~" z3 R: |& c( A
+ d4 v4 T) ^2 i+ @jQuery Mobile 頁面: o5 e2 h M; N8 U1 ~
開始學習 jQuery Mobile- A: @7 e4 e+ ^
實例& q) g' H" K6 d1 X
<body>
% m* `7 l( y3 ^( {+ K- f3 j6 k1 W7 z<div data-role="page"> |( ^$ b8 x( Q9 {& E& I
, b1 \! P1 j; F1 o9 W6 K; ?
<div data-role="header">( B6 D9 m0 Z! ~% r: m8 L
<h1>歡迎來到我的主頁</h1>
$ P) O O3 k& U7 i+ p5 X+ r! P </div>; M5 y& M" L; a( I5 T; {& s2 w& k
1 ` l1 K" W9 W# V' Q3 O+ \
<div data-role="main" class="ui-content">8 Z) V. Q8 L& E
<p>我現在是一個移動端開發者!!</p>
2 k1 |5 G1 W5 ~, j7 s$ r/ ~ l1 D </div>
" s( A7 D7 f8 Z0 W- Y1 J& ^2 y# z r" ~
<div data-role="footer">8 ^$ w1 s+ |" L7 ~+ }" c) S+ Z3 S
<h1>底部文字</h1>$ \' O7 Y% |$ Q' o3 Z% W; G
</div>
8 I$ r6 ~4 A# F4 ]7 Y7 y
2 F& W$ z* i5 J T( l6 z, ~8 \</div>
H, U" U1 e# o+ a6 p</body>; W9 H% `* G$ W4 ]+ J! J! @
實例解析：
8 L; X4 I1 p; P4 t2 ` b( s1 @& {$ M* t( | \. o& Y
data-role="page" 是在瀏覽器中顯示的頁面。7 \/ g* v, I5 n* m" J% ?
data-role="header" 是在頁面頂部建立的工具條 (通常用於標題或者搜尋按鈕)1 ]- g+ m# {- T2 |1 U& n% O3 B
data-role="main" 定義了頁面的內容，比如文字， 圖片，表單，按鈕等。8 f# w/ U& h- e- r
"ui-content" 類用於在頁面增加內邊距和外邊距。
+ A o4 `- Z; N- \) Q- P; W8 @ data-role="footer" 用於建立頁面底部工具條。, P& j3 ]: R8 F# l0 u
在這些容器中你可以增加任何 HTML 元素 - 段落, 圖片, 標題, 列表等。
/ p# I, L6 ^) ?/ P. j$ p% i1 O! C, C% m# Z
lamp jQuery Mobile 依賴 HTML5 data-* 屬性來支援各種 UI 元素、過渡和頁面結構。不支援它們的瀏覽器將以靜默方式棄用它們。9 U4 B7 @6 N7 ^% e- Z2 w7 E$ ^) t
( H+ }) G' L( Z( m/ b. ]5 J# b0 F# l. o* r
在頁面中增加 jQuery Mobile
4 `7 C9 ~5 `+ Y$ O5 _6 ]
0 O! i; y+ B; |$ ~8 [2 ]使用 jQuery Mobile, 你可以再單個 HTML 檔案中建立多個不同的頁面。6 i. M. G v: T, Z0 r
* x6 {# c' m9 P L1 q你可以使用不同的href屬性來區分使用同一個唯一id的頁面：9 y# {! {- x2 a
實例
9 s9 W. C0 k4 p& K& u1 w<div data-role="page" id="pageone">( M, r) V2 j O9 I/ {
<div data-role="main" class="ui-content">
/ o! m# ~) g3 `: c: A <a href="#pagetwo">跳轉到第二個頁面</a>" @/ n& S2 y# l
</div>- p4 c2 e! g4 F
</div>' c7 @' B) m( [" M
7 C6 U$ ]9 _% o/ e/ T( U& c<div data-role="page" id="pagetwo">4 f: K6 n& r# f- C; o
<div data-role="main" class="ui-content">5 u) @4 [- r4 X- Z' |
<a href="#pageone">跳轉到第一個頁面</a>
0 {$ c5 r0 H" o1 d </div>
( W! e1 z5 y! L3 B S9 ~8 L</div>" q; {) _ \4 z9 ? f5 n
注意： 當web應用有大量的內容（文字，圖片，腳本等）將會嚴重影響加載時間。如果你不想使用內頁連結可以使用外部檔案：5 A4 w2 l8 k* D4 X. G. a
7 O! {* Y7 p5 }3 E& B
<a href="externalfile.html">訪問外部檔案</a>
- Q) X! B9 @3 ~/ C+ _) b+ S* N3 q0 P* g' i% ~9 A
頁面作為對話框使用/ J5 K. X" P1 r9 v: Y
! U- L& z: ?2 u6 f# B4 }
對話框是用於顯示頁面內容顯示或者表單內容的輸入。
) j: H7 R$ e( f! l }3 B
; j5 d' Y3 |$ c- s/ I在連結中增加data-rel="dialog"讓會員點閱連結時彈出對話框:( r, |1 c* G) j' L0 G
實例+ }4 j+ o& D$ Q$ h) ?% x
<div data-role="page" id="pageone"># N3 C$ t$ ?5 F: \# l
<div data-role="main" class="ui-content">
- V. `4 a; S4 a7 C0 h" H <a href="#pagetwo">跳轉到第二個頁面</a>
5 w. ? F/ r5 p </div>
6 I, f9 U* m; b! T. H2 v</div>6 y- G9 n' e9 l h$ m
6 p; {* o1 F8 N P* i( t<div data-role="page" data-dialog="true" id="pagetwo">( O, ]( D( u M! O4 J1 T
<div data-role="main" class="ui-content"> V! p; W$ B% x7 {+ Y) p6 D
<a href="#pageone">跳轉到第一個頁面</a>
+ K8 C5 e% T9 g$ m+ ?. e0 H </div>5 k$ O8 r {& k }
</div> |
|
|Archiver|手機版|禁閉室|MyXNova (原 myxnova.com)
聲望
現金
存款
瀏覽推廣
註冊推廣
金幣
遊戲幣
鑽石
IP卡
狗仔卡
[資訊未更新]
發表於 2016-6-25 16:22:43
提升卡
置頂卡
沉默卡
喧囂卡
變色卡
千斤頂
顯身卡