等級：25 - 爐火純青 經驗值：0 / 246 魔法值：14822 / 14822 生命值：6%
升級
   100%
TA的每日心情 | 慵懶
昨天 00:56 |
|---|
簽到天數: 5903 天 [LV.Master]伴壇終老
|
馬上註冊，結交更多好友，享用更多功能，讓你輕鬆玩轉社群。
您需要 登入 才可以下載或檢視，沒有帳號？立即註冊
×
jQuery Mobile 是用於建立移動 Web 應用的前端開發框架。
: R; C: T3 {& K H. ?jQuery Mobile 可以應用於智能手機與平板電腦。
4 O a/ y1 a5 X6 OjQuery Mobile 使用 HTML5 & CSS3 最小的腳本來佈局網頁。/ H* v( M# O+ X* l( w+ f
2 U- Z5 a- N- W* X5 x. Z3 u4 @& Z什麼是 jQuery Mobile? 1 x$ v7 a. B+ f ^
& a) G- b& f x6 V
jQuery Mobile 是針對觸屏智能手機與平板電腦的網頁開發框架。
: c/ f3 f. s- x1 S( y, Q" h; t- y7 T: u) Q& G. t8 _
jQuery Mobile 工作與所有主流的智能手機和平板電腦上：
1 z+ {. y3 Q. P4 u
8 `; `( k5 e* j: ljQuery Mobile 構建於 jQuery 以及 jQuery UI類庫之上，如果您瞭解 jQuery，您可以很容易的學習 jQuery Mobile。
. h5 x) K- S' S; i. _jQuery Mobile 使用了極少的 HTML5、CSS3、JavaScript 和 AJAX 腳本代碼來完成頁面的佈局渲染。. D7 |0 h2 U. o) G
) L9 F" M) @$ y$ H, c, j) y5 K3 y* _
為什麼使用 jQuery Mobile?
9 i% I% n& C8 w% v
# |6 M7 r9 w; ~& W& O通過使用jQuery Mobile 可以 "寫更少的代碼，做更多的事情" : 它可以通過一個靈活及簡單的方式來佈局網頁，且兼容所有移動設備。( b" l7 K; \ t( n3 V$ }- f
lamp 不同設備使用了不同開發語言，jQuery Mobile可以很好的兼容不容的設備或操作系統：
9 ~: y( d s1 n- Q, c5 h! W; I9 `5 o: y9 r0 @. D& I
Android 和 Blackberry（黑莓） 使用JAVA語言。 l% y# x/ p- N U
iOS 使用 Objective C 語言
- J& l' Z3 G4 L4 y8 I" S Windows Phone 使用 C# 和 .net, 等。. t5 ]8 o! |8 x2 ^$ h$ d- L2 i" W
1 P2 v r+ Y9 p- I# J
jQuery Mobile 解決了不同設備兼容的問題，因為它只使用HTML，CSS和 JavaScript，這是所有移動網絡瀏覽器的標準！/ C! j+ w* k0 F3 w! y) B; g" K
$ Y3 d1 p0 f# BjQuery Mobile 安裝
, \; P- T3 e/ O. P7 {9 q在你的網頁中增加 jQuery Mobile
8 s3 S+ ^" C' f. s# w$ U$ ?# l) I! H5 m/ P! A
你可以通過以下幾種方式將jQuery Mobile增加到你的網頁中：
# m# \! N% X7 S8 N4 r
8 a, ^2 m- H0 R0 X: ~; U* ` 從 CDN 中加載 jQuery Mobile (推薦)" ~9 e" w! h% O0 Q& w
從jQuerymobile.com 下載 jQuery Mobile庫
& C% T0 Y7 q% G8 M0 n% t J5 N3 b6 j% I& e% ^$ e! A S& j# Z$ Z+ m
下載 jQuery Mobile
: \ b; i2 h, B$ T& K. W/ H9 Y% e/ E; g7 _- U, J" p
如果你想將 jQuery Mobile 放於你的主機中,你可以從 jQuerymobile.com下載該檔案。
( Z( J9 t J& i" D9 l, u" [( h3 j: h4 U
<head>
/ d% N' j8 K1 h @<meta name="viewport" content="width=device-width, initial-scale=1">
) J6 V+ |) J8 O7 s3 G<link rel="stylesheet" href="jquery.mobile-1.4.5.css">
: [; V4 Y, h/ G3 O' Y# |3 W) Z<script src="jquery.js"></script>
+ x! L( U0 \% }" B5 B<script src="jquery.mobile-1.4.5.js"></script>6 S/ b7 l6 C% `" t! U# B3 r
</head>
: C/ D! [8 A4 j5 J+ @
$ ` r" H' s% q5 E提示： 將下載的檔案放置於與網頁同一目錄下。
% c' y" L" ]' t4 l. R4 X1 Xlamp 你是否想知道為什麼在 <script> 標籤中 沒有插入 type="text/javascript" ?8 N J: C5 a, \. y; \6 ~
; E; s8 |0 H" J$ B3 k5 O, q+ {
在 HTML5 已經不需要該屬性。 JavaScript 在所有現代瀏覽器中是 HTML5 的預設腳本語言！8 F& k) o1 {4 o4 Y- c% E2 c
q ^) a# @* H. \
jQuery Mobile 頁面. [9 T* u( I9 i [' k
開始學習 jQuery Mobile
7 ^2 S3 w& w1 d6 w& o7 y+ h2 c實例
5 T5 z" N8 \" U6 ], o& r3 ]: T5 L<body>
1 D5 Z0 O3 r7 o<div data-role="page">
6 _ h3 Z; h& `* A! |- z; j+ d- r* B) }0 l; C& p! e
<div data-role="header">; [' }' o4 x( e* z
<h1>歡迎來到我的主頁</h1>
; ^6 d, ?! Q2 ~' v </div>
4 S. T0 C h6 Q& D1 i! R% v! a5 `5 Z5 |2 D, [
<div data-role="main" class="ui-content">
7 I6 b: y+ \- t6 G; N- b <p>我現在是一個移動端開發者!!</p>& p& [3 j6 X5 z: G+ W$ h
</div>7 e; f. J6 I1 s( K
" r- Y9 a4 r3 S. w
<div data-role="footer">
/ Y. ^0 W/ f9 C <h1>底部文字</h1>
) x0 ^3 D9 l b9 i" u& e; @! U/ f; O </div>" i' _" C0 u/ L
7 C5 B3 v- j2 r</div>
& u8 p5 g9 o2 F# O h. C</body>
8 u5 w! O4 t9 F& T' g8 P實例解析：1 l; H `/ L6 S- T* i6 G* q
4 \( e- \' d! k2 X! b0 f data-role="page" 是在瀏覽器中顯示的頁面。
& ^8 z3 ^4 C8 ^/ g8 d& h) \ data-role="header" 是在頁面頂部建立的工具條 (通常用於標題或者搜尋按鈕)
- \1 s5 X9 I; [6 g0 \* u data-role="main" 定義了頁面的內容，比如文字， 圖片，表單，按鈕等。
4 M ~. p3 r& k2 F+ ?* n8 M "ui-content" 類用於在頁面增加內邊距和外邊距。
: A( ]8 }4 t: Z% G+ _ data-role="footer" 用於建立頁面底部工具條。+ Z; u2 ]6 _, S) ?- K, A* b
在這些容器中你可以增加任何 HTML 元素 - 段落, 圖片, 標題, 列表等。
/ J8 L" A4 J: n* h9 D# }8 m
' z: B% B+ e6 L% l" a7 H# t4 Xlamp jQuery Mobile 依賴 HTML5 data-* 屬性來支援各種 UI 元素、過渡和頁面結構。不支援它們的瀏覽器將以靜默方式棄用它們。! S3 E2 x8 K& ?$ S4 F$ o S! W' t+ ~
R y0 `8 e3 f$ ?
在頁面中增加 jQuery Mobile
6 G# ]& K q/ ~" D
# t7 g% e- e7 t使用 jQuery Mobile, 你可以再單個 HTML 檔案中建立多個不同的頁面。
1 R# R, y' M' {: w! N, g* d, U, {4 j
你可以使用不同的href屬性來區分使用同一個唯一id的頁面：
- k: r; s/ T/ ?實例
. b2 h' U3 [" O1 F; n, l& k5 m<div data-role="page" id="pageone">
% F H( d( ]$ T4 N6 m <div data-role="main" class="ui-content">4 a& E/ ^% t$ o8 G: S
<a href="#pagetwo">跳轉到第二個頁面</a>
a! e% U, k+ p6 @- [ </div>+ t# X+ q$ M1 i4 m/ k
</div>
2 F/ C9 ^7 ^- V. ]: n0 f/ u8 d4 K4 W- H+ B0 [6 K
<div data-role="page" id="pagetwo">( B2 C L) g/ _, y2 b
<div data-role="main" class="ui-content">
4 F0 p; ^; L7 d' g" D! t <a href="#pageone">跳轉到第一個頁面</a>3 ?+ e% ~+ D4 G* i
</div>- x4 j6 O7 E' r. C. o
</div># A9 V) [% S0 R" r) _
注意： 當web應用有大量的內容（文字，圖片，腳本等）將會嚴重影響加載時間。如果你不想使用內頁連結可以使用外部檔案：- B! j' \" V$ @2 Q) d2 _( t# ~. C5 R3 I
3 P2 x( P, l9 M; `9 N6 R! ^
<a href="externalfile.html">訪問外部檔案</a>
V# m, P+ B; @; B
6 p1 w% d/ K6 [ p頁面作為對話框使用6 c, Y6 O4 R- S5 P+ s
3 @3 _5 `& g& I. ?3 @7 L3 w6 G對話框是用於顯示頁面內容顯示或者表單內容的輸入。
4 O" c2 b) C( a% P) ]+ v2 U5 x9 F6 H( d% W5 t
在連結中增加data-rel="dialog"讓會員點閱連結時彈出對話框:, {' s& ]7 P# k1 ^ P
實例- n' I; \- b) c5 z$ _7 ]
<div data-role="page" id="pageone"> v) n! O) \( k# w
<div data-role="main" class="ui-content">3 t( c2 N% u8 D/ c- z
<a href="#pagetwo">跳轉到第二個頁面</a>
5 C) |# w. a! {! S* z2 r$ Y </div>
7 t8 N5 _% E" L6 v# \ h5 ]</div>. w" } |6 O: Z9 p) t
. h# @. t7 W- I7 |) A, Z: r0 r! m
<div data-role="page" data-dialog="true" id="pagetwo">
m, V; F) s" X( g. O* M9 T <div data-role="main" class="ui-content">4 g) T( Z2 L8 A8 I
<a href="#pageone">跳轉到第一個頁面</a>) `, x6 S" [) n( X2 d
</div>
. P7 P( u+ g# \5 z8 s</div> |
|
|Archiver|手機版|禁閉室|MyXNova (原 myxnova.com)
聲望
現金
存款
瀏覽推廣
註冊推廣
金幣
遊戲幣
鑽石
IP卡
狗仔卡
[資訊未更新]
發表於 2016-6-25 16:22:43
提升卡
置頂卡
沉默卡
喧囂卡
變色卡
千斤頂
顯身卡