等級：25 - 爐火純青 經驗值：0 / 244 魔法值：13307 / 13307 生命值：4%
升級
   100%
TA的每日心情 | 慵懶
14 小時前 |
|---|
簽到天數: 5392 天 [LV.Master]伴壇終老
|
馬上註冊，結交更多好友，享用更多功能，讓你輕鬆玩轉社群。
您需要 登入 才可以下載或檢視，沒有帳號？立即註冊
×
jQuery Mobile 是用於建立移動 Web 應用的前端開發框架。
) K: ?6 E* I! `% F4 Y" N$ YjQuery Mobile 可以應用於智能手機與平板電腦。 , O4 ?4 ~1 {+ M: U- R$ m; u1 D$ W
jQuery Mobile 使用 HTML5 & CSS3 最小的腳本來佈局網頁。- {+ {$ c. Z2 p6 I1 U" B5 J( p* n
9 [ F6 G8 b9 y9 p* H什麼是 jQuery Mobile? $ O4 E0 l4 |( r- D& n- R; ^, j3 e/ E9 L
. A- Q: j) r+ ]0 u2 d/ H
jQuery Mobile 是針對觸屏智能手機與平板電腦的網頁開發框架。 & R, q5 ?5 J3 ?
7 d& d( }* o& P" D4 @, c6 A' XjQuery Mobile 工作與所有主流的智能手機和平板電腦上： " M5 ~: j# d' t( e( M" x
& {; Z2 J7 H; S. ^, R0 djQuery Mobile 構建於 jQuery 以及 jQuery UI類庫之上，如果您瞭解 jQuery，您可以很容易的學習 jQuery Mobile。 - Y4 `2 d1 v$ f" M* I
jQuery Mobile 使用了極少的 HTML5、CSS3、JavaScript 和 AJAX 腳本代碼來完成頁面的佈局渲染。
# o' K4 r/ E# F! m0 f, d4 D0 n! ?/ b8 ? g8 D. E2 U! a) y% s$ m& G
為什麼使用 jQuery Mobile?0 l" H3 i* k! @- ?
, q" ^9 ? e8 U9 o8 m
通過使用jQuery Mobile 可以 "寫更少的代碼，做更多的事情" : 它可以通過一個靈活及簡單的方式來佈局網頁，且兼容所有移動設備。
$ ~9 C. P- ]; y- V" o5 Z" ~lamp 不同設備使用了不同開發語言，jQuery Mobile可以很好的兼容不容的設備或操作系統：$ c9 f: V/ u; A k
0 \/ a) I/ Z* d* ~1 m) \- N
Android 和 Blackberry（黑莓） 使用JAVA語言。$ Q+ E T, d5 Y6 N# p- Z5 o" A
iOS 使用 Objective C 語言! k. c, }/ u& Q2 R
Windows Phone 使用 C# 和 .net, 等。
4 X! ~% }8 K* G
; ^3 B* ^8 o9 Y8 O% ?4 o* Z' VjQuery Mobile 解決了不同設備兼容的問題，因為它只使用HTML，CSS和 JavaScript，這是所有移動網絡瀏覽器的標準！7 J9 Z, t. @3 R Q2 X
) X& D$ N' z; ?# UjQuery Mobile 安裝! e9 _7 y5 x* _
在你的網頁中增加 jQuery Mobile
+ ]( ] C; j2 J5 N- c0 x) I: ^4 R8 D: i5 D3 J' s& t$ r2 w
你可以通過以下幾種方式將jQuery Mobile增加到你的網頁中：
9 [1 t0 |9 W6 _) {' \5 s7 C) y4 l5 h: _' L8 J
從 CDN 中加載 jQuery Mobile (推薦)$ x! t, ]' ]# i. F
從jQuerymobile.com 下載 jQuery Mobile庫
) c2 j6 r6 Z* y' |2 |0 t P3 U# { Q% d6 y& v/ `9 K% C4 B' ^
下載 jQuery Mobile7 v; `0 c1 A2 [1 A4 Z% Z
( h! R2 {; b" o; T, l9 F/ i
如果你想將 jQuery Mobile 放於你的主機中,你可以從 jQuerymobile.com下載該檔案。! W& K) \+ N4 |/ B2 t
% e* R. d9 {! l9 @' G
<head>0 E! ~; S+ |8 J
<meta name="viewport" content="width=device-width, initial-scale=1">. n5 f1 a4 v# ~% K( |* L1 A
<link rel="stylesheet" href="jquery.mobile-1.4.5.css">0 x$ A: H1 @) H3 T5 k% Z
<script src="jquery.js"></script>9 D+ z- R$ Q: s; q) r* x
<script src="jquery.mobile-1.4.5.js"></script>. S. O% Z' @) r
</head>8 ?8 O# J* A9 Q4 u: |8 y, x" d9 N
4 n) H. o: i, K提示： 將下載的檔案放置於與網頁同一目錄下。
/ `4 c. W- j. ~( G: O4 ?lamp 你是否想知道為什麼在 <script> 標籤中 沒有插入 type="text/javascript" ?' J/ X# I$ G$ m/ T& Z8 a
G: j% C1 U! h, Z! b在 HTML5 已經不需要該屬性。 JavaScript 在所有現代瀏覽器中是 HTML5 的預設腳本語言！
+ [/ Q* G5 z/ U8 F3 y- t
3 t5 i- O1 P: A) }# TjQuery Mobile 頁面
6 g4 s# G" R0 S# y# h開始學習 jQuery Mobile
! {' B' y1 t$ R p6 b1 Z- b' m實例4 C/ O4 U9 v8 U' L6 b' Q8 P- R# c
<body>
9 Z: w$ T8 |( u% P* {<div data-role="page">/ P9 T0 R$ j3 _7 q. N
6 X( O9 O7 {% H
<div data-role="header">
1 B1 G; h( r' q <h1>歡迎來到我的主頁</h1>
7 u% P& g: u- p </div>
: B& ~* {3 J- C: Y( y. ?
. w/ r& R: o3 z1 V3 [3 Q0 W0 ] <div data-role="main" class="ui-content">8 ^+ L1 x# G5 ^1 T5 Q
<p>我現在是一個移動端開發者!!</p>
- j! b# B4 D3 j$ [/ v! R# p D </div>8 k$ B7 \" Z# G, S. W1 h/ g
% g/ U, r; B/ ^6 o: K6 B3 _9 o <div data-role="footer">
6 T; Q, T& O9 i. @ <h1>底部文字</h1># I2 A+ C h! S" }; u/ z# X5 o
</div>: R9 M7 E: P* M; I; v4 a* l
" ^% T9 n# p0 @- t# E& L8 r b) X3 [
</div>
2 a! p) X( D1 I# d7 Z</body>
! r t8 y: L- ]4 q4 H8 R實例解析：
g+ E# x. M% k3 @
" W u% |9 Z( x8 _3 J7 f data-role="page" 是在瀏覽器中顯示的頁面。
4 s: x f4 s1 m9 K8 S! V data-role="header" 是在頁面頂部建立的工具條 (通常用於標題或者搜尋按鈕)
7 y. W) a) N6 c* D! C0 R data-role="main" 定義了頁面的內容，比如文字， 圖片，表單，按鈕等。6 ^' I, F# ~" e% ~' N, S, ]( i
"ui-content" 類用於在頁面增加內邊距和外邊距。6 c# O4 u% x, T [8 f! ]
data-role="footer" 用於建立頁面底部工具條。
- Q0 m& v( ]% F/ p 在這些容器中你可以增加任何 HTML 元素 - 段落, 圖片, 標題, 列表等。& D% S$ j0 D4 h# p5 C' P' `
' o9 Y9 D) }5 ]5 s' V( T
lamp jQuery Mobile 依賴 HTML5 data-* 屬性來支援各種 UI 元素、過渡和頁面結構。不支援它們的瀏覽器將以靜默方式棄用它們。
1 k) h6 W/ H3 q, y6 ?" g. n
C! n9 B" S$ b# z5 j3 n, ~5 P' H在頁面中增加 jQuery Mobile9 e9 E3 S/ H. z5 A- f! ^% s
. h/ T8 ^# P \% S, X- C; u# f
使用 jQuery Mobile, 你可以再單個 HTML 檔案中建立多個不同的頁面。( V. l6 ?4 v& A
2 W; u! ?# H* T( o" I. I# K你可以使用不同的href屬性來區分使用同一個唯一id的頁面：: z* Q- g( i! e! }
實例
8 C( ?( }6 T: e( ^ w4 C T<div data-role="page" id="pageone">8 P6 ^7 `: p7 Q% p% L& m$ k
<div data-role="main" class="ui-content">
4 K6 G4 u4 C: j <a href="#pagetwo">跳轉到第二個頁面</a>. a. k. `2 f9 b8 C% F1 Y' _% S% G
</div>. g1 b$ ]/ A; p- b
</div>
0 }* O- t" }# K! z: R8 l2 Q- r t, c! v) k7 \9 ^6 Z
<div data-role="page" id="pagetwo">
3 b3 L* x+ N) j <div data-role="main" class="ui-content">) r' J2 Z' S2 T# U" k* h
<a href="#pageone">跳轉到第一個頁面</a>+ `3 E2 c6 y9 R# Y4 f
</div> z/ z: [2 c) F: V4 G
</div>
: L$ p9 `5 x$ t) K注意： 當web應用有大量的內容（文字，圖片，腳本等）將會嚴重影響加載時間。如果你不想使用內頁連結可以使用外部檔案：' W5 X3 q, q2 f \5 m$ U1 }* a
, |; V }/ p0 l7 T& i* J9 t
<a href="externalfile.html">訪問外部檔案</a>$ R& J# I8 Z$ ^. x1 o. t% y9 R
8 @2 t+ y6 l0 C0 ]; t
頁面作為對話框使用
! @! Z3 i+ ~# ?: `7 ~
" `0 h+ n& B: Y$ Z對話框是用於顯示頁面內容顯示或者表單內容的輸入。- v- a+ z# r0 G' ~0 g
2 ~- R, m1 j) d$ l在連結中增加data-rel="dialog"讓會員點閱連結時彈出對話框:
6 ~4 y: E! s- e0 ?5 ]! k實例
, m% _! }9 D, W1 S2 R<div data-role="page" id="pageone">
& [+ z% w5 [3 U' g/ W/ X3 { <div data-role="main" class="ui-content">
; D/ `9 L* S8 u6 W& \ <a href="#pagetwo">跳轉到第二個頁面</a>5 w% y) s; ]# J( q
</div>
& H" m G$ I7 h1 J& T" J</div>( n3 K; ]# t! @2 ]- y. J5 k+ I
j8 {7 P1 m0 V1 T8 A, P
<div data-role="page" data-dialog="true" id="pagetwo">
* c! m: O$ i4 A' t <div data-role="main" class="ui-content">3 s" p6 [% B5 k# E! \5 @
<a href="#pageone">跳轉到第一個頁面</a>
) \$ W$ |3 Y7 h0 t0 y* C </div>: s* Y% A3 y9 L# l; u
</div> |
|
|Archiver|手機版|禁閉室|MyXNova (原 myxnova.com)
聲望
現金
存款
瀏覽推廣
註冊推廣
金幣
遊戲幣
鑽石
IP卡
狗仔卡
[資訊未更新]
發表於 2016-6-25 16:22:43
提升卡
置頂卡
沉默卡
喧囂卡
變色卡
千斤頂
顯身卡