等級：25 - 爐火純青 經驗值：0 / 245 魔法值：14320 / 14320 生命值：5%
升級
   100%
TA的每日心情 | 奮斗
昨天 00:52 |
|---|
簽到天數: 5761 天 [LV.Master]伴壇終老
|
馬上註冊，結交更多好友，享用更多功能，讓你輕鬆玩轉社群。
您需要 登入 才可以下載或檢視，沒有帳號？立即註冊
×
jQuery Mobile 是用於建立移動 Web 應用的前端開發框架。
! a2 q! T7 ~ q4 HjQuery Mobile 可以應用於智能手機與平板電腦。 1 [; w% P$ A9 G V1 _$ {" R& [
jQuery Mobile 使用 HTML5 & CSS3 最小的腳本來佈局網頁。
, W: ^8 n, ?1 @9 O# z
]/ f* f; D( P" J* ~( W Z什麼是 jQuery Mobile?
+ y3 h0 v" x$ _' h( d1 q
c: I6 ?6 s3 N0 [2 CjQuery Mobile 是針對觸屏智能手機與平板電腦的網頁開發框架。 7 Y ~6 F8 ?# S5 S
% ]' h# U- D; q) bjQuery Mobile 工作與所有主流的智能手機和平板電腦上：
2 C6 o. C% X7 s1 f
+ R1 P) a* `6 C1 ^$ [ YjQuery Mobile 構建於 jQuery 以及 jQuery UI類庫之上，如果您瞭解 jQuery，您可以很容易的學習 jQuery Mobile。
1 P. F/ I. x7 @' VjQuery Mobile 使用了極少的 HTML5、CSS3、JavaScript 和 AJAX 腳本代碼來完成頁面的佈局渲染。/ ~5 p* W4 N. X! B
2 k, U3 E1 N" X2 P: w為什麼使用 jQuery Mobile?
2 f( @0 }: \( {' d6 H1 Z& {. o$ |" k) l" ?0 q
通過使用jQuery Mobile 可以 "寫更少的代碼，做更多的事情" : 它可以通過一個靈活及簡單的方式來佈局網頁，且兼容所有移動設備。% R3 _! j3 I9 D& E; [1 C g
lamp 不同設備使用了不同開發語言，jQuery Mobile可以很好的兼容不容的設備或操作系統：
# @/ Q0 i3 N9 L, x7 R8 P/ k" a! i2 E% S! Q
Android 和 Blackberry（黑莓） 使用JAVA語言。
- [2 u1 o2 u5 w iOS 使用 Objective C 語言
* v: a" S# `% F/ U: r* o Windows Phone 使用 C# 和 .net, 等。
# @' A( d& [ d+ `4 E! ?7 t4 Z/ P2 \0 q
jQuery Mobile 解決了不同設備兼容的問題，因為它只使用HTML，CSS和 JavaScript，這是所有移動網絡瀏覽器的標準！1 f% b* |/ r# E7 R2 G
( A2 g2 {' q8 R* |, E3 rjQuery Mobile 安裝
) G% u d5 m7 w$ }4 V1 [ k在你的網頁中增加 jQuery Mobile
6 N9 M% x' {, Y$ H+ U9 s9 P! W" a- I5 w! U( S7 @ D
你可以通過以下幾種方式將jQuery Mobile增加到你的網頁中： E. W4 V8 @, {
1 I% }. E$ ]# U" p! K 從 CDN 中加載 jQuery Mobile (推薦)! P# u# X$ [% ^( ?6 h: y0 T
從jQuerymobile.com 下載 jQuery Mobile庫3 S0 K5 I" ~# [; U# j6 a6 x/ I' f" P
6 f' T0 |: u/ N8 \7 s5 B. q& J4 R" ^
下載 jQuery Mobile
" s# P) C) G' F. |/ V) o* ?% x( b
如果你想將 jQuery Mobile 放於你的主機中,你可以從 jQuerymobile.com下載該檔案。/ @( [8 }, b' \% V) e& I2 w4 l
V S Q- D4 Y- o5 a
<head> l+ I/ P# P9 k' C( G# C! u% e3 r
<meta name="viewport" content="width=device-width, initial-scale=1">
" v* P. k7 [8 D* B<link rel="stylesheet" href="jquery.mobile-1.4.5.css">
+ u. @- F7 Q+ y, ^/ N<script src="jquery.js"></script>7 M: X0 j$ Q7 r
<script src="jquery.mobile-1.4.5.js"></script>- q' ~/ V! J- I/ K3 x$ k' C8 x8 M, W
</head>- u4 @6 |0 z' d! I& t
. |( R* ]4 n+ v& j& }% n* r4 [. A" o提示： 將下載的檔案放置於與網頁同一目錄下。
4 Y* V8 |5 [$ Z5 R' Rlamp 你是否想知道為什麼在 <script> 標籤中 沒有插入 type="text/javascript" ?8 k; o5 T( d1 a3 P. k
4 c! \5 E% R: a, l
在 HTML5 已經不需要該屬性。 JavaScript 在所有現代瀏覽器中是 HTML5 的預設腳本語言！
# q4 Q( w9 H1 \9 R6 r, G( a; D) H3 V
jQuery Mobile 頁面" X$ P7 I" q [* ]/ |0 u
開始學習 jQuery Mobile) d- B" x" D( E% r& D
實例
9 X" h, @* b% Q9 u' `( Q<body>% u; }% Q3 f0 m! Z* b0 v t( Y
<div data-role="page">! @$ X! Z+ b! M3 k- Z# g+ Y5 E
! ^ e P4 Y1 q f
<div data-role="header">
9 O5 r& P4 \! Y' K2 u <h1>歡迎來到我的主頁</h1>
3 Y" W* a/ N0 i" x$ C, { </div>
/ b8 \1 b: l; C
- Y) ^& V" V& y6 ?/ J2 c <div data-role="main" class="ui-content">$ {* ^% P. F F: \3 U% I. o5 A# X
<p>我現在是一個移動端開發者!!</p>9 \9 }7 e2 o" m0 F5 U
</div>) ?; O }" U0 [0 r2 b2 _
# N* P# A: W+ V2 W+ x0 l5 }1 E" Y) _5 r <div data-role="footer">* q$ A$ N% E5 {4 ~$ G1 r2 @
<h1>底部文字</h1>
8 w5 n2 z. V1 s. R </div>
4 ]( c. n8 p$ C% A# V5 ]% E$ C
! L% k, m2 y* R- b- s</div>: z- A$ ?) P8 g# B
</body>
3 _. U( I. J6 T" M1 i9 z% {實例解析：
7 Y2 t- s7 `. {1 c+ y1 c; `
7 D1 ~! c' v3 _/ v! G data-role="page" 是在瀏覽器中顯示的頁面。1 R/ b2 M. n2 b8 v+ Y
data-role="header" 是在頁面頂部建立的工具條 (通常用於標題或者搜尋按鈕)% ` D- ]0 R9 P8 {
data-role="main" 定義了頁面的內容，比如文字， 圖片，表單，按鈕等。% g9 T# u. K$ ^3 Z3 h
"ui-content" 類用於在頁面增加內邊距和外邊距。& ?+ R$ C& V9 U9 K8 a- N, L" U0 L
data-role="footer" 用於建立頁面底部工具條。
* v& V: h8 \; w 在這些容器中你可以增加任何 HTML 元素 - 段落, 圖片, 標題, 列表等。" A- p3 w) a4 V) Q: k2 Z0 h
) D' F: N: z* p- ~
lamp jQuery Mobile 依賴 HTML5 data-* 屬性來支援各種 UI 元素、過渡和頁面結構。不支援它們的瀏覽器將以靜默方式棄用它們。
! B2 r: P) j( K0 ?% y
0 M8 {; k% X& b. W. f- m5 [在頁面中增加 jQuery Mobile, D3 a) i& v& {; q' b K* y# C
1 b, P( V' K4 _$ {- N
使用 jQuery Mobile, 你可以再單個 HTML 檔案中建立多個不同的頁面。' H5 b* w8 c0 Y1 y! O
! c0 i; \- k" v9 N* ?
你可以使用不同的href屬性來區分使用同一個唯一id的頁面：' m+ D, ]& s% E1 b
實例
' h/ I8 I1 ]8 _<div data-role="page" id="pageone">- \; T) e3 n u" {# @5 `3 F
<div data-role="main" class="ui-content">
7 W- M v5 k& {8 U <a href="#pagetwo">跳轉到第二個頁面</a>
4 B* p/ l" j* n+ M% A </div>
' ^& |4 }7 ^! d4 C( F/ B</div> r' B$ ~8 ?" r, B
6 D* J+ K; o7 l) e0 m6 [* d5 P5 f' _
<div data-role="page" id="pagetwo">8 y7 O6 |; H' M. b: E% }5 U; u' i) G
<div data-role="main" class="ui-content">
; w& u" k+ T' Q f0 f- A4 l$ Q* F <a href="#pageone">跳轉到第一個頁面</a>
3 F& z) l7 ?* \) \! F- F+ e </div>
1 S$ q' k( l! I5 Z' |9 z6 g& n</div>
% a7 M7 g, `# O: t: {注意： 當web應用有大量的內容（文字，圖片，腳本等）將會嚴重影響加載時間。如果你不想使用內頁連結可以使用外部檔案：
+ r0 R( c) @. M- b$ z2 ?; r* }) {$ w$ \& _, p
<a href="externalfile.html">訪問外部檔案</a>
# V5 R+ O n3 i- @. X
, I7 h( S6 [ ]% ?3 D) o( u頁面作為對話框使用
. X0 @( V N; j1 o4 A1 ?* V
- F+ `9 A; v8 }) C) h5 P* y對話框是用於顯示頁面內容顯示或者表單內容的輸入。; w+ @( ~8 M5 g" T: J( y, W
! Z6 _6 F0 }1 ]* s* \/ [
在連結中增加data-rel="dialog"讓會員點閱連結時彈出對話框:
$ t5 g: _! a# d+ Z0 Q9 q0 [4 e實例. U- p0 S4 |0 S9 z4 p
<div data-role="page" id="pageone">6 D9 G6 B" ^# k- U+ y2 K5 X
<div data-role="main" class="ui-content"># n, l8 u+ O# ~! i& B) I
<a href="#pagetwo">跳轉到第二個頁面</a>
4 w' ^. k- J1 r9 ~( E# ? </div>& H; Q* c6 j6 a
</div>
& i! I/ @# b& R
" N8 O! D: Q* T<div data-role="page" data-dialog="true" id="pagetwo">
. S' g$ R5 }) @+ P3 ?3 p% D% E& Q+ x <div data-role="main" class="ui-content">7 R" ]+ X0 K/ V( G) M$ N# d" x3 |
<a href="#pageone">跳轉到第一個頁面</a>
# o+ l9 Z- o# Z </div>
9 U% A3 q' h& r. j. ^. j( L6 _</div> |
|
|Archiver|手機版|禁閉室|MyXNova (原 myxnova.com)
聲望
現金
存款
瀏覽推廣
註冊推廣
金幣
遊戲幣
鑽石
IP卡
狗仔卡
[資訊未更新]
發表於 2016-6-25 16:22:43
提升卡
置頂卡
沉默卡
喧囂卡
變色卡
千斤頂
顯身卡