等級：25 - 爐火純青 經驗值：0 / 246 魔法值：14842 / 14842 生命值：6%
升級
   100%
TA的每日心情 | 奮斗
10 小時前 |
|---|
簽到天數: 5910 天 [LV.Master]伴壇終老
|
馬上註冊，結交更多好友，享用更多功能，讓你輕鬆玩轉社群。
您需要 登入 才可以下載或檢視，沒有帳號？立即註冊
×
jQuery Mobile 是用於建立移動 Web 應用的前端開發框架。 ( Z$ f; s9 y, ?+ i; p ?! B' a
jQuery Mobile 可以應用於智能手機與平板電腦。
' m" r5 \. d6 E* W! ]" FjQuery Mobile 使用 HTML5 & CSS3 最小的腳本來佈局網頁。
+ P+ `# Y) c7 t. q" l& |7 z7 c
什麼是 jQuery Mobile? % p4 r, g$ D# a `( u
4 |) h, o0 ^7 d5 h, _! PjQuery Mobile 是針對觸屏智能手機與平板電腦的網頁開發框架。 / I, A8 P# u9 w. z
: d7 c' G- \0 @5 l$ h+ AjQuery Mobile 工作與所有主流的智能手機和平板電腦上： ) H1 t3 H1 R# o
6 l8 \* I6 E5 u+ T
jQuery Mobile 構建於 jQuery 以及 jQuery UI類庫之上，如果您瞭解 jQuery，您可以很容易的學習 jQuery Mobile。 - P: i% A. Y# u; f. A. R
jQuery Mobile 使用了極少的 HTML5、CSS3、JavaScript 和 AJAX 腳本代碼來完成頁面的佈局渲染。* e& g+ L/ s! A0 E6 [+ B/ @ T
- `6 F& }$ l$ k) [為什麼使用 jQuery Mobile?
6 C. [9 Q( W2 d" B! g- v! x* T ^" m( }8 T' w9 x8 q% {. M
通過使用jQuery Mobile 可以 "寫更少的代碼，做更多的事情" : 它可以通過一個靈活及簡單的方式來佈局網頁，且兼容所有移動設備。. d: g1 l( K @3 D6 Y
lamp 不同設備使用了不同開發語言，jQuery Mobile可以很好的兼容不容的設備或操作系統：
* T5 u6 S; ~* r% o; [) w# N7 S4 ^/ ]! v$ \: z
Android 和 Blackberry（黑莓） 使用JAVA語言。
% \0 p$ K: I' m- t/ z6 t) f( S3 b iOS 使用 Objective C 語言. Q4 e" x% H6 R; p0 Y; s% E {- x
Windows Phone 使用 C# 和 .net, 等。
0 g) I5 f4 ]- m. E. u* p
' s0 K. ~0 s% c0 W, `jQuery Mobile 解決了不同設備兼容的問題，因為它只使用HTML，CSS和 JavaScript，這是所有移動網絡瀏覽器的標準！ B6 w: x& P2 o7 Z( a* m. z
5 w# ~5 d. t+ UjQuery Mobile 安裝
/ [, s8 e$ H# U2 x/ a在你的網頁中增加 jQuery Mobile
8 D, T4 l# l: M# z0 c$ l5 y0 [ C* x8 G
你可以通過以下幾種方式將jQuery Mobile增加到你的網頁中：
! N7 \! O7 ~: ]( q X" i0 u8 @& u0 x/ m7 |/ G2 T
從 CDN 中加載 jQuery Mobile (推薦)
% n# {' T0 q1 C6 t 從jQuerymobile.com 下載 jQuery Mobile庫2 x: x* F* J! F8 E5 z0 {
5 d; G- C- }" s; a6 K* A2 Z
下載 jQuery Mobile) c5 J+ Y# q, Z( A: O1 Q
& ]& i; Z! K! p# P* _) r
如果你想將 jQuery Mobile 放於你的主機中,你可以從 jQuerymobile.com下載該檔案。
" s' z/ L* e/ ]8 A0 q
. b/ D, p Z: { n$ _3 Z4 @1 F4 B<head>
; N! i. J# c# } B, d<meta name="viewport" content="width=device-width, initial-scale=1">& ~7 w0 K* R8 e0 n& Y
<link rel="stylesheet" href="jquery.mobile-1.4.5.css">8 n |0 t' f- g" g V, d0 h
<script src="jquery.js"></script>7 F7 o0 Q+ {5 f5 @- X ^
<script src="jquery.mobile-1.4.5.js"></script>% S. V* E4 u& ?+ R G+ \& @
</head>0 |% b: Z! W6 B6 ~2 Q/ i
1 L5 ^* z" Z, i$ K: @2 }' i提示： 將下載的檔案放置於與網頁同一目錄下。
% Z d% i- ^, F5 B" V( h% M( mlamp 你是否想知道為什麼在 <script> 標籤中 沒有插入 type="text/javascript" ?( f) r# @# {" R. z0 U8 ?
: v4 H% R' e/ Q
在 HTML5 已經不需要該屬性。 JavaScript 在所有現代瀏覽器中是 HTML5 的預設腳本語言！3 `# C: T' N: j2 M* Z$ f
9 R# G9 }5 {- ^+ R5 x1 }- T
jQuery Mobile 頁面
3 G# L- i" A: l( p6 f) z開始學習 jQuery Mobile! l9 Q! J7 s7 u' S6 P
實例" w9 f- T b. L# g( c0 e5 f. t
<body>: J1 l9 N8 _" _! b& W9 a
<div data-role="page">
- h- A6 N+ P, M
" k$ C9 V8 |* @8 Q. i <div data-role="header">0 J# ?* V2 u' t
<h1>歡迎來到我的主頁</h1>
; \8 C! R6 B( } </div>2 ]3 R/ e) U* x% f
, \0 z- O- u8 I8 Z/ g <div data-role="main" class="ui-content">3 I) A: t' Y' x. |3 e
<p>我現在是一個移動端開發者!!</p>) I* V% d6 A* m" I3 K( b; B
</div>, s& k5 N5 F8 b Z; _) E( o$ `
+ E' s% ]5 g# ]' Q# D; ^1 _
<div data-role="footer">) g* ?9 e8 M" e! H" {+ w$ C
<h1>底部文字</h1>2 J+ @; ~) T3 D% x
</div>
0 H6 b: d7 \/ |$ D8 X5 X3 P& F
( }* g% ]6 _0 L( Q9 o) {+ J</div>
$ i) T5 o; I6 t</body>
0 C M+ R( }1 f: s0 e! ]實例解析：
6 k0 {" Z3 y* e7 Z. ?+ U4 e5 d7 A4 ^8 v, L5 [. ~0 E7 H
data-role="page" 是在瀏覽器中顯示的頁面。2 Y. C& L: V+ p4 D, n9 U0 U
data-role="header" 是在頁面頂部建立的工具條 (通常用於標題或者搜尋按鈕)
! ] b5 j, }9 t+ X" m0 r data-role="main" 定義了頁面的內容，比如文字， 圖片，表單，按鈕等。8 G" y {! s9 V5 W
"ui-content" 類用於在頁面增加內邊距和外邊距。/ v# y# U. X' B8 q9 `* ~
data-role="footer" 用於建立頁面底部工具條。
' r; N6 ]3 B* Y0 O 在這些容器中你可以增加任何 HTML 元素 - 段落, 圖片, 標題, 列表等。
' o0 k% \) B+ J2 W* J8 _$ j' M2 `( N" P7 h: }0 O
lamp jQuery Mobile 依賴 HTML5 data-* 屬性來支援各種 UI 元素、過渡和頁面結構。不支援它們的瀏覽器將以靜默方式棄用它們。
- a3 @' l( G, Q* U
) F+ w. `# C4 `6 h& i# u# t在頁面中增加 jQuery Mobile6 ^4 C7 h; N, ?# m
9 s' h( X- b. x4 c' w
使用 jQuery Mobile, 你可以再單個 HTML 檔案中建立多個不同的頁面。
) |) ^; W% ~5 i' h) c- i* V& A j+ i, b i$ n4 L% k
你可以使用不同的href屬性來區分使用同一個唯一id的頁面：
" J& u# C1 F% R8 ?2 t實例
, s) R% |6 C- f% ^! q2 Z% m<div data-role="page" id="pageone">
, N0 p9 i5 g8 ~0 n5 ^7 u* Q" j <div data-role="main" class="ui-content">& K% W$ N2 ~( S5 l) v
<a href="#pagetwo">跳轉到第二個頁面</a>
$ {5 e* m7 W4 R4 s3 Y! F! N </div>9 l) t, @1 _' m+ {2 p
</div>
* L+ Z- E# m- e Y4 g i1 e- k
<div data-role="page" id="pagetwo">% u3 K; w* S! P$ y' C" g
<div data-role="main" class="ui-content">
8 k% r: m+ U x0 ]2 [ <a href="#pageone">跳轉到第一個頁面</a>4 ?7 q4 ?0 w: H6 a
</div>2 A% a) N1 F5 Z8 e
</div>
) ?. ^8 r! Z. K0 C* Q注意： 當web應用有大量的內容（文字，圖片，腳本等）將會嚴重影響加載時間。如果你不想使用內頁連結可以使用外部檔案：+ z! o) e* J$ ]% ? _
& D c% H+ u4 \5 H. Z
<a href="externalfile.html">訪問外部檔案</a>
" V; a+ }, F, y" J1 a; g; i+ @+ e% I7 d" Y2 s" k' `8 D" w
頁面作為對話框使用
, y( e7 s/ X- ?: C- }" |" f/ M6 M/ m1 H/ }$ `% O8 y8 B
對話框是用於顯示頁面內容顯示或者表單內容的輸入。4 E, P) ` ^' x- _+ b% o- r: {
6 B$ W& S+ t" H5 U9 }6 G" o+ f4 P在連結中增加data-rel="dialog"讓會員點閱連結時彈出對話框:
0 t e1 w$ X# F4 b' ~8 K5 N實例
; z) f( ]2 f6 |* s1 v B2 S, v/ u<div data-role="page" id="pageone">
* j5 a. e; @/ a0 _* u | <div data-role="main" class="ui-content">
% Z& C; l8 K+ x" G. x7 } <a href="#pagetwo">跳轉到第二個頁面</a>+ t3 z0 |+ g2 q) e* a
</div>
1 e$ U( r9 }! |: F$ K3 J" U</div>
- w' J1 i2 w0 @6 S! X
" I3 k: Y7 L1 K! {. S& _<div data-role="page" data-dialog="true" id="pagetwo">
7 b% ]- x1 n* |% Z/ B3 N: D <div data-role="main" class="ui-content">; j+ a! D' c/ G- ?& z7 h
<a href="#pageone">跳轉到第一個頁面</a>. {% ]' _* e$ F8 Y4 a. O1 K$ R% R
</div>& n: H% L* i: V
</div> |
|
|Archiver|手機版|禁閉室|MyXNova (原 myxnova.com)
聲望
現金
存款
瀏覽推廣
註冊推廣
金幣
遊戲幣
鑽石
IP卡
狗仔卡
[資訊未更新]
發表於 2016-6-25 16:22:43
提升卡
置頂卡
沉默卡
喧囂卡
變色卡
千斤頂
顯身卡