等級：25 - 爐火純青 經驗值：0 / 246 魔法值：15173 / 15173 生命值：6%
升級
   100%
TA的每日心情 | 奮斗
3 小時前 |
|---|
簽到天數: 6031 天 [LV.Master]伴壇終老
|
馬上註冊，結交更多好友，享用更多功能，讓你輕鬆玩轉社群。
您需要 登入 才可以下載或檢視，沒有帳號？立即註冊
×
jQuery Mobile 是用於建立移動 Web 應用的前端開發框架。 ! c8 ]8 ]6 Q" O/ h9 j# }" v( p
jQuery Mobile 可以應用於智能手機與平板電腦。
) N8 C" c& D) ~* L8 [jQuery Mobile 使用 HTML5 & CSS3 最小的腳本來佈局網頁。" A! O) l; ]' e6 {# ~; N
' F, w6 s* r- x什麼是 jQuery Mobile? ( @7 \* B! ~" }/ I1 ^, \
8 E2 G7 c5 X' [. E$ jjQuery Mobile 是針對觸屏智能手機與平板電腦的網頁開發框架。
' o0 n) S0 M; X: A5 h
" I. L" t2 B7 K1 C9 {# ]jQuery Mobile 工作與所有主流的智能手機和平板電腦上： / [+ X' R8 u+ p3 o* m: M" D8 ]& A( P) w
: g4 m/ ?* X% N2 E3 \+ i, a4 v
jQuery Mobile 構建於 jQuery 以及 jQuery UI類庫之上，如果您瞭解 jQuery，您可以很容易的學習 jQuery Mobile。 % ]# Z) H: G* L6 f8 t4 u
jQuery Mobile 使用了極少的 HTML5、CSS3、JavaScript 和 AJAX 腳本代碼來完成頁面的佈局渲染。0 ~# X& ?% U ]
8 L: V F: _4 v0 U$ ^8 J
為什麼使用 jQuery Mobile?
. X1 ?8 o% H4 R+ _8 V! R7 h! x( V+ C' S& N2 K/ t0 H" [) `
通過使用jQuery Mobile 可以 "寫更少的代碼，做更多的事情" : 它可以通過一個靈活及簡單的方式來佈局網頁，且兼容所有移動設備。; [0 s; m4 `' ?
lamp 不同設備使用了不同開發語言，jQuery Mobile可以很好的兼容不容的設備或操作系統：
1 L7 e$ f2 O% R& o- `: [& f U5 y. V3 @( `/ \+ h
Android 和 Blackberry（黑莓） 使用JAVA語言。
{4 c* |; p7 x" H9 Y iOS 使用 Objective C 語言
: R- y- G( |7 Y' \6 T Windows Phone 使用 C# 和 .net, 等。
( `% l7 E* H+ J7 H1 Z' X6 }9 `
# F1 e7 p% A" `5 g9 L& L' I/ NjQuery Mobile 解決了不同設備兼容的問題，因為它只使用HTML，CSS和 JavaScript，這是所有移動網絡瀏覽器的標準！4 V) ]' n3 G2 u6 \6 I8 F
3 n) ~7 u; m3 ?/ b- Y0 F+ z
jQuery Mobile 安裝( |4 V8 W q# j8 |
在你的網頁中增加 jQuery Mobile
% o7 H9 S6 W3 ]( M6 ]4 m2 i7 r1 l, S- c2 T6 G) T
你可以通過以下幾種方式將jQuery Mobile增加到你的網頁中：
. _( o2 `, x, ], V
- ~3 ~; a* v( X/ u7 q 從 CDN 中加載 jQuery Mobile (推薦)- e# |9 U. [! D7 \! K
從jQuerymobile.com 下載 jQuery Mobile庫
$ [ ^" { o7 I2 y3 J" R3 p/ W* T! I" ^ i# C" D
下載 jQuery Mobile
" x0 }4 |+ @# z3 d7 V& E& K' J" t, B) b0 `! q: i
如果你想將 jQuery Mobile 放於你的主機中,你可以從 jQuerymobile.com下載該檔案。
, ]; J' ^6 m+ }; s; a3 p/ _# a/ [6 g3 a
<head>
# r+ ^ O) u c) U0 Y% K, B5 }" N$ |<meta name="viewport" content="width=device-width, initial-scale=1">4 N0 T" ^# K0 e7 g9 r
<link rel="stylesheet" href="jquery.mobile-1.4.5.css">. p; K$ i. k( k$ c* U
<script src="jquery.js"></script>
4 y, k" F6 Y% |<script src="jquery.mobile-1.4.5.js"></script>
. ^! Q: d9 \! a: N; Y5 D</head>
7 I* X, r: E9 ^& r4 I) j+ M1 U; U6 h
提示： 將下載的檔案放置於與網頁同一目錄下。
k/ w. u e% T* b( M8 `lamp 你是否想知道為什麼在 <script> 標籤中 沒有插入 type="text/javascript" ?( q$ x4 x [* _1 L% R7 l) `- V
2 T% t& ?) R0 T, V% u. e7 ~5 g" ^
在 HTML5 已經不需要該屬性。 JavaScript 在所有現代瀏覽器中是 HTML5 的預設腳本語言！
1 H) { X1 y* v. j; Q1 \" Y, d1 F1 ]# l' @/ d
jQuery Mobile 頁面
4 V' i) |# i- Y5 X( Z開始學習 jQuery Mobile4 k* y6 H8 W% |5 W, Q
實例9 O' Z$ B( z/ {4 P* J1 p, C9 J% B
<body>4 j0 ^1 }; Q4 @6 E8 f2 Q
<div data-role="page">
* R9 E0 L" R2 R) ~3 [5 `7 ?/ y( D" J
<div data-role="header">
0 c8 A& Z- K6 I/ X# M6 W <h1>歡迎來到我的主頁</h1>) P6 ~; x2 ?, ?5 W/ i
</div>
6 v( x8 @7 E6 Y% U4 A3 y
1 U+ M! ?8 ]- p1 ]* c <div data-role="main" class="ui-content">
) M* A H2 g$ L2 } <p>我現在是一個移動端開發者!!</p>
* |% L" y q Z$ y </div>+ M- W- n: a9 Q2 L
/ H$ J" j% x* A q. e0 _; T) Z
<div data-role="footer">
# s. S) { p* w# O <h1>底部文字</h1>
0 U" ]0 a* K1 E </div>3 ?6 W8 E' Y' s$ M
0 e, X& r4 Q' {" J/ l3 y; b+ q
</div>% _9 E/ d! x1 Y, b: @
</body>2 ~2 S# P3 D o3 g
實例解析：
1 ] y0 u f/ W+ M3 P' P2 f
' W# m5 @# @9 f: g$ p/ X: Y data-role="page" 是在瀏覽器中顯示的頁面。0 r7 H w/ W) w: v$ X$ ~( s
data-role="header" 是在頁面頂部建立的工具條 (通常用於標題或者搜尋按鈕)4 B4 h6 p3 i' r5 M& G
data-role="main" 定義了頁面的內容，比如文字， 圖片，表單，按鈕等。) q* v9 `+ W! N" U( r
"ui-content" 類用於在頁面增加內邊距和外邊距。
0 g2 r+ }+ C, a/ _0 h data-role="footer" 用於建立頁面底部工具條。' d% S! k! y' P& K3 h3 @; Y
在這些容器中你可以增加任何 HTML 元素 - 段落, 圖片, 標題, 列表等。
9 M& {/ l- i( o* e
2 ~8 W8 U9 s6 ~# I" Tlamp jQuery Mobile 依賴 HTML5 data-* 屬性來支援各種 UI 元素、過渡和頁面結構。不支援它們的瀏覽器將以靜默方式棄用它們。
s, Q: R1 a# Z4 J1 P1 E6 U# I8 D* E# Y$ E" ^. l
在頁面中增加 jQuery Mobile. y8 \ ]: [; b5 E% x) `6 o
4 [+ U/ `9 C# @9 T
使用 jQuery Mobile, 你可以再單個 HTML 檔案中建立多個不同的頁面。
* B, y" o8 U: v' E, C# X; ?$ S, n2 q ?7 i8 I3 k# s
你可以使用不同的href屬性來區分使用同一個唯一id的頁面：
% H4 P* K: g# M7 A* O7 u1 N3 L, N" C實例
, `$ ~# s; |0 C+ J# S% d$ D6 f+ t<div data-role="page" id="pageone">3 ?9 x' k1 g' A& W% V- \* r
<div data-role="main" class="ui-content">7 ^3 \2 ~! A$ B: `/ S8 z
<a href="#pagetwo">跳轉到第二個頁面</a>
5 F4 B* t/ U E; L7 Y2 L' K </div>
- h( L3 ^/ @) F) ^0 w2 \</div>2 d" e: N: I* N
. A- ?" R5 n& n8 g* x<div data-role="page" id="pagetwo">
. Z9 H" A! w3 z. m9 X$ K <div data-role="main" class="ui-content"> x1 l. b- w! p- |
<a href="#pageone">跳轉到第一個頁面</a>9 X5 L- S7 V5 N4 J
</div># ^8 t; `! h7 e! |" \3 M6 |5 h. B3 {
</div>
$ E1 ]0 q! [) }注意： 當web應用有大量的內容（文字，圖片，腳本等）將會嚴重影響加載時間。如果你不想使用內頁連結可以使用外部檔案：
; ]: ^# G6 Q8 ? G/ \
; o5 M8 ^9 \/ s$ ~( o1 |5 d<a href="externalfile.html">訪問外部檔案</a>) [5 V: ]( {& o$ s9 l9 Q" _3 C
. X$ A, N0 y$ ?頁面作為對話框使用
; k' u7 d- D4 D! ?0 F1 [7 \+ u! r
$ v2 u" n. z* S# o$ I5 i對話框是用於顯示頁面內容顯示或者表單內容的輸入。
' x) I% ~- h( ~8 Y U% m* I$ I% _( q" U! x: c$ j9 h" b0 q$ n. ?
在連結中增加data-rel="dialog"讓會員點閱連結時彈出對話框:" w- Q# O4 A+ |" n3 u* p
實例
% Z! G; N. k4 w* W<div data-role="page" id="pageone">
3 d3 ^1 d# C& s7 ?, j$ b <div data-role="main" class="ui-content">
: [$ i! A0 J6 g) Z6 s <a href="#pagetwo">跳轉到第二個頁面</a>7 V C/ o3 h8 _- y- Y0 h) P9 N
</div>
7 S. n' `# p) m H/ O2 Z& C</div>
0 ^2 G0 |$ x6 ^
6 F1 f9 Q( S* e<div data-role="page" data-dialog="true" id="pagetwo">/ I m& C; Z. E+ d
<div data-role="main" class="ui-content">
7 I0 H% s( J( w* e; c. T+ N' b <a href="#pageone">跳轉到第一個頁面</a>
+ s/ `0 E5 b0 i9 v: w3 Y3 S% j </div>
' k9 X3 K5 W+ C5 m% g- T# b% _* N</div> |
|
|Archiver|手機版|禁閉室|MyXNova (原 myxnova.com)
聲望
現金
存款
瀏覽推廣
註冊推廣
金幣
遊戲幣
鑽石
IP卡
狗仔卡
[資訊未更新]
發表於 2016-6-25 16:22:43
提升卡
置頂卡
沉默卡
喧囂卡
變色卡
千斤頂
顯身卡