等級：25 - 爐火純青 經驗值：0 / 245 魔法值：14341 / 14341 生命值：5%
升級
   100%
TA的每日心情 | 奮斗
12 小時前 |
|---|
簽到天數: 5769 天 [LV.Master]伴壇終老
|
馬上註冊，結交更多好友，享用更多功能，讓你輕鬆玩轉社群。
您需要 登入 才可以下載或檢視，沒有帳號？立即註冊
×
jQuery Mobile 是用於建立移動 Web 應用的前端開發框架。
& V( z2 F( [, c ?" ^jQuery Mobile 可以應用於智能手機與平板電腦。
* A: B+ T8 K1 k( @jQuery Mobile 使用 HTML5 & CSS3 最小的腳本來佈局網頁。/ B% [" j' H* i! w4 H2 t
. |7 V% p3 }$ B! p- p+ J' Z
什麼是 jQuery Mobile? , I9 X$ {! ~. ~/ e7 l- l
0 @8 r5 d+ @! ?jQuery Mobile 是針對觸屏智能手機與平板電腦的網頁開發框架。 6 v2 u6 b% K; N8 p+ t! p
; ^/ `3 n) M9 \5 p4 J
jQuery Mobile 工作與所有主流的智能手機和平板電腦上：
' \3 Q! \; u2 Y6 @+ A' G" q
5 q1 g3 n( x; | u0 l3 ljQuery Mobile 構建於 jQuery 以及 jQuery UI類庫之上，如果您瞭解 jQuery，您可以很容易的學習 jQuery Mobile。
' Q0 g. c* D" x8 }jQuery Mobile 使用了極少的 HTML5、CSS3、JavaScript 和 AJAX 腳本代碼來完成頁面的佈局渲染。
5 b# m9 t, }" v% m2 O/ O6 j; S7 X8 l- p1 p/ {# |
為什麼使用 jQuery Mobile?
, d; ?. |# A$ g9 K
: _. G- m$ c( g通過使用jQuery Mobile 可以 "寫更少的代碼，做更多的事情" : 它可以通過一個靈活及簡單的方式來佈局網頁，且兼容所有移動設備。+ N) x. }2 ]" `7 `3 A; | c) u
lamp 不同設備使用了不同開發語言，jQuery Mobile可以很好的兼容不容的設備或操作系統：
' I6 a1 `! F* m) ]$ m0 ?/ ~4 `% h: i* p: [* V
Android 和 Blackberry（黑莓） 使用JAVA語言。
2 x* H, s7 @3 N iOS 使用 Objective C 語言( M, n9 t) N0 w6 \' S, d3 `! q" ]
Windows Phone 使用 C# 和 .net, 等。+ b, X2 c8 D! O. L1 N P
, S) B7 M4 X. J H4 m; f8 |
jQuery Mobile 解決了不同設備兼容的問題，因為它只使用HTML，CSS和 JavaScript，這是所有移動網絡瀏覽器的標準！
0 C+ H& _8 M& V3 t
& {9 j3 |2 z- d. l& x" SjQuery Mobile 安裝
* D! @9 e! O9 N6 b; `在你的網頁中增加 jQuery Mobile; j0 `3 p6 u Z2 _; z
( D% W6 `+ D2 S& ^- a2 _- | f# E
你可以通過以下幾種方式將jQuery Mobile增加到你的網頁中：
$ b2 O0 [5 v, E% g7 Y( j' n
, }. ]* c9 f [/ u5 `& f5 j 從 CDN 中加載 jQuery Mobile (推薦)
% x2 b5 C a+ N. e 從jQuerymobile.com 下載 jQuery Mobile庫2 I) U. Q0 O3 j( z5 E
0 r) j3 ~5 T0 r1 }: [3 b4 a
下載 jQuery Mobile
4 [$ I, |0 I% H5 Z6 R7 S' f; c* v- u, l* X& _+ g s% n
如果你想將 jQuery Mobile 放於你的主機中,你可以從 jQuerymobile.com下載該檔案。- _% r% H' `& z) P
5 G, |; G' D- U* @1 e4 p' M8 \& P
<head>
6 V2 n9 e2 c$ G$ M! [9 ^<meta name="viewport" content="width=device-width, initial-scale=1"> J3 b: L$ c6 t2 D, r4 ~/ b1 j( w& y
<link rel="stylesheet" href="jquery.mobile-1.4.5.css">
1 c- h* {8 s u2 p8 m+ {, U<script src="jquery.js"></script>
# r5 D( y1 t- z( @& C2 S: `<script src="jquery.mobile-1.4.5.js"></script>6 p) }/ w. H- u, b
</head>
1 P) b9 k6 b* T# x2 F2 h1 S8 W' ~7 B0 _6 {4 j% a5 {9 P3 ^
提示： 將下載的檔案放置於與網頁同一目錄下。
6 x) a1 ?' H; e; s2 e1 V clamp 你是否想知道為什麼在 <script> 標籤中 沒有插入 type="text/javascript" ?
" k; X+ O/ z/ W6 A" k n; \
1 |3 q. b& F4 D6 O$ x- I; E在 HTML5 已經不需要該屬性。 JavaScript 在所有現代瀏覽器中是 HTML5 的預設腳本語言！
/ a- Z7 p: z* a3 M/ C
7 `$ c9 G7 v2 F9 m$ I3 \2 M- jjQuery Mobile 頁面% o. Z7 [% S( t6 J8 L2 Q
開始學習 jQuery Mobile& j c( \7 B9 l4 b
實例 m9 O# Z0 B% Q2 i
<body>% W8 u# b; Q1 o9 t n
<div data-role="page">
$ N/ l9 }, J, G) Y7 }0 q6 Q! G
. _5 r: J9 l; }) t ~/ Q: o <div data-role="header">; x5 L! ^, x8 j ^: s3 D% W
<h1>歡迎來到我的主頁</h1>
' p, z7 ^$ P- I7 [ </div>! F* ~, a' n, T3 X
2 g, ?/ L! u* c, y <div data-role="main" class="ui-content">
. C: r% z& G+ ~1 L+ k& e <p>我現在是一個移動端開發者!!</p>
% q& L- F9 N. x0 [5 m" M( }4 |- s0 k7 @ </div>! z( V5 i$ @; R7 p! m! c/ z& C* @. h
' r4 D. Y0 ]: Z) S* L$ h <div data-role="footer">
6 M$ P/ r7 n" c1 i! z; O <h1>底部文字</h1>$ A4 P1 M6 q7 m5 R' r
</div>
8 x$ s: O% H% e" t2 e( ]3 k/ \# X* n
</div>
. h" o$ X* q. F& u& U$ M( N7 G- u</body>
5 V: x. A' |8 y" ]+ o P. M W實例解析：/ [: U- ~/ b4 z. z+ i( S& o
7 I; ^4 g7 o5 M% B9 a/ h; N
data-role="page" 是在瀏覽器中顯示的頁面。, K& B7 A8 |$ V$ R" ]& D0 C: c
data-role="header" 是在頁面頂部建立的工具條 (通常用於標題或者搜尋按鈕)9 P, z$ K) g* w) z& h* q6 w
data-role="main" 定義了頁面的內容，比如文字， 圖片，表單，按鈕等。1 M7 n C% N- w! R2 Z9 w
"ui-content" 類用於在頁面增加內邊距和外邊距。$ X. M* y7 j2 ~8 e" x% Y9 M3 {8 S
data-role="footer" 用於建立頁面底部工具條。: d% T& F) I& v E
在這些容器中你可以增加任何 HTML 元素 - 段落, 圖片, 標題, 列表等。
" |0 R* U' O q( N+ E6 [% m; f. W9 b& H4 [# }
lamp jQuery Mobile 依賴 HTML5 data-* 屬性來支援各種 UI 元素、過渡和頁面結構。不支援它們的瀏覽器將以靜默方式棄用它們。
* m/ Y; n& t: V1 i' \" d/ g: |! ^
在頁面中增加 jQuery Mobile" j- P; F8 p" e8 e, K+ W
$ ?: r) Q1 l& _9 U9 u
使用 jQuery Mobile, 你可以再單個 HTML 檔案中建立多個不同的頁面。
) ]5 L" h% s* u9 k+ S0 U& d; O2 [' w1 l
你可以使用不同的href屬性來區分使用同一個唯一id的頁面：$ H7 t8 Q/ p8 f" Y. b; S P
實例) N: W3 s) D: B3 d
<div data-role="page" id="pageone">
9 E) r3 M, I) ~1 m1 H' ~ <div data-role="main" class="ui-content">5 M( @- [. U1 s k! n: `2 a' Y
<a href="#pagetwo">跳轉到第二個頁面</a>
+ ^* J& j6 H2 T. V& H </div>( I/ X- g% b9 T
</div>
$ k0 j, @9 q8 L l0 ?) K
' {+ r# F8 n% A' U<div data-role="page" id="pagetwo">
# V* W7 t2 ~9 n* q+ f' E0 C1 [ <div data-role="main" class="ui-content">
; n0 a9 c+ j, }" L <a href="#pageone">跳轉到第一個頁面</a>* O2 ~# [8 \8 I# Y, r1 n& }) u
</div>
& W P2 _! K+ T/ o</div>
3 L7 E! J" w) e注意： 當web應用有大量的內容（文字，圖片，腳本等）將會嚴重影響加載時間。如果你不想使用內頁連結可以使用外部檔案：
& x4 i) }3 d7 F7 ~1 b) o* l
7 O8 X# I, R6 H8 O$ r. I' d<a href="externalfile.html">訪問外部檔案</a>3 K" ?, S9 a+ z
/ C3 v: j6 y( f- B
頁面作為對話框使用3 c( x- {- r3 C" D7 Y
$ v- ]% Z. g! |# N: M- B0 Q對話框是用於顯示頁面內容顯示或者表單內容的輸入。; O0 K( E! F7 N6 ?' |5 y; _: u
- l; Y2 X e# N4 ^" P在連結中增加data-rel="dialog"讓會員點閱連結時彈出對話框:' ?3 r/ p6 g2 X7 i0 {, R" p
實例
+ V k8 }, ?2 ]; ]) N$ K% N<div data-role="page" id="pageone">/ x/ U; H- q" x! A4 f) F+ [
<div data-role="main" class="ui-content"> X7 o& ^4 i5 k. j" m f
<a href="#pagetwo">跳轉到第二個頁面</a>) { i; p* H+ }$ \. A4 F. W
</div>1 K3 t5 E2 o, @( ]# _
</div>7 g# B' G4 M @/ X9 l5 d6 g0 Y
1 b$ q- P# T( ^<div data-role="page" data-dialog="true" id="pagetwo">* B/ X2 P7 b$ k2 B8 V0 H
<div data-role="main" class="ui-content">- u3 R/ B4 o% [9 Y6 \1 ?8 Y, Y
<a href="#pageone">跳轉到第一個頁面</a>
4 x6 A: K. S M+ l </div>+ q0 H+ b1 S* p2 Z6 ^
</div> |
|
|Archiver|手機版|禁閉室|MyXNova (原 myxnova.com)
聲望
現金
存款
瀏覽推廣
註冊推廣
金幣
遊戲幣
鑽石
IP卡
狗仔卡
[資訊未更新]
發表於 2016-6-25 16:22:43
提升卡
置頂卡
沉默卡
喧囂卡
變色卡
千斤頂
顯身卡