等級：25 - 爐火純青 經驗值：0 / 246 魔法值：15062 / 15062 生命值：6%
升級
   100%
TA的每日心情 | 奮斗
19 小時前 |
|---|
簽到天數: 5989 天 [LV.Master]伴壇終老
|
馬上註冊，結交更多好友，享用更多功能，讓你輕鬆玩轉社群。
您需要 登入 才可以下載或檢視，沒有帳號？立即註冊
×
jQuery Mobile 是用於建立移動 Web 應用的前端開發框架。
! }- Q, P" N% w& ]3 yjQuery Mobile 可以應用於智能手機與平板電腦。 5 n s0 I) o# a$ _' |) A5 v
jQuery Mobile 使用 HTML5 & CSS3 最小的腳本來佈局網頁。
* b% Y. E# \% P7 P7 F$ X$ A! o) V" @3 D
什麼是 jQuery Mobile?
$ u, ?& T- u0 x/ X
2 P6 y* F6 r( u% B) n$ g/ j2 RjQuery Mobile 是針對觸屏智能手機與平板電腦的網頁開發框架。
\# S2 N1 |2 W" W v: O. ]. G# k4 c1 H
jQuery Mobile 工作與所有主流的智能手機和平板電腦上： : t% h$ Y$ z9 z/ e! a- l3 {
+ ]( `/ L8 s5 R _
jQuery Mobile 構建於 jQuery 以及 jQuery UI類庫之上，如果您瞭解 jQuery，您可以很容易的學習 jQuery Mobile。 ' b5 \# Y* b. \: l8 ~
jQuery Mobile 使用了極少的 HTML5、CSS3、JavaScript 和 AJAX 腳本代碼來完成頁面的佈局渲染。
9 [2 f1 K! l2 [1 f6 a1 H D7 g* w, d& T+ X+ Q
為什麼使用 jQuery Mobile?
5 u& ~0 f R0 }+ @# N- ` b; U4 t0 @! L2 q1 `! B4 r' ?
通過使用jQuery Mobile 可以 "寫更少的代碼，做更多的事情" : 它可以通過一個靈活及簡單的方式來佈局網頁，且兼容所有移動設備。
& x- X" \- H% t/ ~lamp 不同設備使用了不同開發語言，jQuery Mobile可以很好的兼容不容的設備或操作系統：, O @8 r, R* o \
( W/ ~0 o2 h/ i9 q
Android 和 Blackberry（黑莓） 使用JAVA語言。
* C5 q2 |) Y O* _& z iOS 使用 Objective C 語言
) \2 w0 F8 A& \& v" g Windows Phone 使用 C# 和 .net, 等。
0 S7 S2 @1 y! K3 V5 i
% ^+ D: ~3 ]& w$ e7 O z1 ~7 T7 AjQuery Mobile 解決了不同設備兼容的問題，因為它只使用HTML，CSS和 JavaScript，這是所有移動網絡瀏覽器的標準！! O. ~; G0 u' P- ]
. t# v# p8 w3 N$ f% N
jQuery Mobile 安裝8 j9 ~/ ^/ R/ n/ s# v
在你的網頁中增加 jQuery Mobile
: ]* ^- O# [. {1 \( J+ z% X; E6 Y9 W( e$ c- O+ ^
你可以通過以下幾種方式將jQuery Mobile增加到你的網頁中：
+ H) J( u" g! n3 }0 n5 A
: V% \* Y; t* M0 e 從 CDN 中加載 jQuery Mobile (推薦): A2 H/ Z9 I, s; v4 h) x' B
從jQuerymobile.com 下載 jQuery Mobile庫
5 y- M: q7 @4 u& Y% a1 c
. l' z. H2 l0 r- |6 V1 g- R下載 jQuery Mobile
) I# }% F g3 d; C( q; u5 J. R6 T( y9 p# N$ f9 [( u! G
如果你想將 jQuery Mobile 放於你的主機中,你可以從 jQuerymobile.com下載該檔案。: b1 u8 c0 X: h$ @
6 W% x8 ?7 V1 L% B, v* Z
<head>. K, O+ Z0 ~% M' J
<meta name="viewport" content="width=device-width, initial-scale=1">
8 m( e' x5 M& w* v8 m/ h<link rel="stylesheet" href="jquery.mobile-1.4.5.css">
9 Z3 u8 A* G4 l8 u- o2 z; T$ A8 k<script src="jquery.js"></script>9 J& A* P1 P! @: x% f
<script src="jquery.mobile-1.4.5.js"></script>6 q8 ?) i4 n/ p( u" s! x
</head>
$ ?+ _7 a( R+ S* V5 N1 {1 T( ?9 s4 i u
提示： 將下載的檔案放置於與網頁同一目錄下。0 D' i! Q+ A3 _& [. P: U* P
lamp 你是否想知道為什麼在 <script> 標籤中 沒有插入 type="text/javascript" ?- X/ I5 l( n5 N$ K4 X$ J
9 p, x+ q2 [3 B3 X
在 HTML5 已經不需要該屬性。 JavaScript 在所有現代瀏覽器中是 HTML5 的預設腳本語言！
& L) x& W9 m2 J9 r0 \
0 l, a' Z9 g P9 r+ SjQuery Mobile 頁面
( @5 N3 j& w& d$ T1 B9 P! u開始學習 jQuery Mobile
+ U. d' v% H) F實例. c& W' Z7 e# D2 l" E0 t& Q
<body>' @+ I, ]& b/ |6 R& Y% z
<div data-role="page">+ F9 b+ B7 Q1 A
! J9 X7 e0 u3 v! f
<div data-role="header">: P7 Y3 o! L; {% d1 G) U1 J5 F% c
<h1>歡迎來到我的主頁</h1>5 H# N9 K( m" o& A
</div>6 `4 U. M- `' a! f* o7 B
/ s i/ M" }, n# j% @ <div data-role="main" class="ui-content">, X4 C5 ~2 a1 D6 x8 h
<p>我現在是一個移動端開發者!!</p>7 C1 `1 a% g0 c) H
</div>$ n6 x6 U! R: p- v! ~( M0 N
- L" H% p% I. @: h# E <div data-role="footer">( |6 n3 m3 Z2 {1 o) P+ }; v
<h1>底部文字</h1>6 o( T; L4 M9 e+ |8 _& F0 R6 a
</div>
2 \' C8 m3 T& W7 {3 [( T u! G( Z8 A T# h) }
</div>0 B* u* D* V8 V/ c- N: G
</body>
; Z6 e: i0 r0 k2 r9 N. D實例解析：
. E' R5 ~" R8 I2 m( J
I6 }! A, n" m5 F! e- ] data-role="page" 是在瀏覽器中顯示的頁面。, r# I3 ?. f% V% K! `7 j
data-role="header" 是在頁面頂部建立的工具條 (通常用於標題或者搜尋按鈕)4 w* J0 |& I5 o7 C& R/ a, L/ M
data-role="main" 定義了頁面的內容，比如文字， 圖片，表單，按鈕等。2 x7 `: K) H* \* V" J5 b4 x% {, r
"ui-content" 類用於在頁面增加內邊距和外邊距。( g! U5 e( r) X4 D
data-role="footer" 用於建立頁面底部工具條。" A9 V4 T5 K/ b, M, Z! a
在這些容器中你可以增加任何 HTML 元素 - 段落, 圖片, 標題, 列表等。
- m0 c; N& Y/ _2 r
6 w3 u |4 i; D4 a% X! dlamp jQuery Mobile 依賴 HTML5 data-* 屬性來支援各種 UI 元素、過渡和頁面結構。不支援它們的瀏覽器將以靜默方式棄用它們。
2 H7 ^8 {+ N- O. t" B/ m. F5 D4 n5 J7 W- b; ^
在頁面中增加 jQuery Mobile
0 d; j! E3 q1 `/ J) e5 x$ B- z V- @/ G1 Q" E( {' h0 t
使用 jQuery Mobile, 你可以再單個 HTML 檔案中建立多個不同的頁面。
$ Z) w& H2 r1 M2 I8 B) k, i4 F: r6 c6 Q p4 x
你可以使用不同的href屬性來區分使用同一個唯一id的頁面：
# K& g w# Q7 L9 b實例4 ?- i2 `8 f) G4 a4 C9 r% i
<div data-role="page" id="pageone">
) c. t3 b& R6 r8 d( z' ^$ { <div data-role="main" class="ui-content">
9 \+ E1 k( H6 n9 ~ <a href="#pagetwo">跳轉到第二個頁面</a>
, Q' q4 Y, s. J( I! Y0 Z* | </div>! a1 f) z. d6 D2 @4 n
</div>
# \) T8 {0 z' @' n$ ?# [: m
4 J$ S' D- d) ^- J! K6 ~<div data-role="page" id="pagetwo">( `1 N! U% P8 w( L) I/ L3 N7 `/ o
<div data-role="main" class="ui-content">0 F# L; v" `4 M1 _
<a href="#pageone">跳轉到第一個頁面</a>* P! H- Z/ s+ a. v" `2 l
</div>; A9 x0 z( W, a) s: p- C
</div> ]) b& \ d/ k; m/ d3 c3 B
注意： 當web應用有大量的內容（文字，圖片，腳本等）將會嚴重影響加載時間。如果你不想使用內頁連結可以使用外部檔案：
& g, H/ g! t2 \7 v, S
( f# k, R; x, E2 K+ w; B<a href="externalfile.html">訪問外部檔案</a>
7 E& X, Y# H. Z# } d" ~; ]% b. a7 Z8 T
頁面作為對話框使用7 i- J* f# s7 h6 n- K
$ g6 L7 `0 k/ Q) ?# }
對話框是用於顯示頁面內容顯示或者表單內容的輸入。3 H, d# T4 c# I. W$ F
3 S6 t: }5 E* O+ b3 I在連結中增加data-rel="dialog"讓會員點閱連結時彈出對話框:* d! c) M7 @1 ?% k
實例
" R% ]$ c& X, Q9 U& U8 _+ n+ X<div data-role="page" id="pageone">, ~, `6 B/ C" _$ Q2 x+ z8 \
<div data-role="main" class="ui-content">
6 Q) |7 M, j5 Y# z$ d <a href="#pagetwo">跳轉到第二個頁面</a>
( ]: w2 h0 D2 Z </div>" Q/ x$ C( ?0 r
</div>
& {6 y* {5 R' F, c9 n8 H Z
" {) O! r3 L! k. x6 W<div data-role="page" data-dialog="true" id="pagetwo">
, m) F, W6 J; a/ n f <div data-role="main" class="ui-content">
% k4 V! a6 `1 [* W2 P1 \ t5 ~. { <a href="#pageone">跳轉到第一個頁面</a>6 k4 l* r6 n. f) P# Y3 Q6 t
</div>' C/ t) {* M7 f7 h6 {$ d1 o0 H
</div> |
|
|Archiver|手機版|禁閉室|MyXNova (原 myxnova.com)
聲望
現金
存款
瀏覽推廣
註冊推廣
金幣
遊戲幣
鑽石
IP卡
狗仔卡
[資訊未更新]
發表於 2016-6-25 16:22:43
提升卡
置頂卡
沉默卡
喧囂卡
變色卡
千斤頂
顯身卡