等級：25 - 爐火純青 經驗值：0 / 245 魔法值：13668 / 13668 生命值：5%
升級
   100%
TA的每日心情 | 奮斗
5 小時前 |
|---|
簽到天數: 5528 天 [LV.Master]伴壇終老
|
馬上註冊，結交更多好友，享用更多功能，讓你輕鬆玩轉社群。
您需要 登入 才可以下載或檢視，沒有帳號？立即註冊
×
jQuery Mobile 是用於建立移動 Web 應用的前端開發框架。 # F1 o' v' ~" K3 H5 b5 \
jQuery Mobile 可以應用於智能手機與平板電腦。
6 E' S' R9 e2 TjQuery Mobile 使用 HTML5 & CSS3 最小的腳本來佈局網頁。! q* D+ D( ]+ X
' N1 O7 F; p* r
什麼是 jQuery Mobile? $ u! [; M6 R/ b' c" z" g `
% P$ p! z, v) z8 F/ T% S* cjQuery Mobile 是針對觸屏智能手機與平板電腦的網頁開發框架。
3 J# }. P, }# E) ~! r8 y0 p8 v
/ |. a" s( T; EjQuery Mobile 工作與所有主流的智能手機和平板電腦上： ) m8 \- D* ]! n& O9 d5 x6 ~" V& w
# k% n( e, U m5 h: a
jQuery Mobile 構建於 jQuery 以及 jQuery UI類庫之上，如果您瞭解 jQuery，您可以很容易的學習 jQuery Mobile。 # v6 Y$ z: [8 U
jQuery Mobile 使用了極少的 HTML5、CSS3、JavaScript 和 AJAX 腳本代碼來完成頁面的佈局渲染。- D, U+ { P' l. |9 ~
. X1 L8 E, a5 U X* y+ p& j; K4 c為什麼使用 jQuery Mobile?7 v2 l+ x: A/ y
1 `+ [. |' B# k3 k通過使用jQuery Mobile 可以 "寫更少的代碼，做更多的事情" : 它可以通過一個靈活及簡單的方式來佈局網頁，且兼容所有移動設備。! \7 M' Q( Y' u& i; \5 f% k
lamp 不同設備使用了不同開發語言，jQuery Mobile可以很好的兼容不容的設備或操作系統：
. D& B: ?, w; e; R0 J+ A1 d W& }6 C! Z3 I/ d( b
Android 和 Blackberry（黑莓） 使用JAVA語言。) O6 V+ Z8 q3 \9 q! E8 F; l
iOS 使用 Objective C 語言
( m$ j+ N' Q8 ]6 B Windows Phone 使用 C# 和 .net, 等。
- }& F8 V. e. \+ W# U' j1 ?9 t
8 L `) W& j& U l5 d( c1 i. w8 rjQuery Mobile 解決了不同設備兼容的問題，因為它只使用HTML，CSS和 JavaScript，這是所有移動網絡瀏覽器的標準！1 e% C. n* @$ _9 Q- Q5 f8 a
' M) g! a/ x x' w1 r5 W' V! G
jQuery Mobile 安裝 N: N0 K( B4 m/ i* y
在你的網頁中增加 jQuery Mobile
8 ?. Q% c/ n& U: d. z' D0 f: U6 Z/ ]$ H( t4 @5 U' f. n- @+ q% M- ^
你可以通過以下幾種方式將jQuery Mobile增加到你的網頁中：/ l) k3 m" ]* N; Z
+ v6 d, W7 H. t0 Y6 w 從 CDN 中加載 jQuery Mobile (推薦)
4 I% \) r5 L) a4 A& @ 從jQuerymobile.com 下載 jQuery Mobile庫4 e2 W' H( i% s0 {' J) {9 Q
8 y9 K9 |- i$ B( P3 B1 @4 c W下載 jQuery Mobile- m0 h8 c- L$ G# j% }0 L% E
! a! e) b* x$ _( P) `如果你想將 jQuery Mobile 放於你的主機中,你可以從 jQuerymobile.com下載該檔案。& j, u$ o S9 b8 l4 O7 J
& s" I( s# \# o! H<head>5 X2 W7 Z# u) l- ^/ U
<meta name="viewport" content="width=device-width, initial-scale=1">: |; ~6 Y! t* `: A7 h/ Y
<link rel="stylesheet" href="jquery.mobile-1.4.5.css">7 f& h" d+ v6 w6 ^4 }
<script src="jquery.js"></script>8 R* t! j5 A0 F; c
<script src="jquery.mobile-1.4.5.js"></script>6 g3 [5 S |4 S; z7 r
</head>) {% E. d+ c" E6 K8 |5 n+ N
( X+ m1 R/ O, u( p
提示： 將下載的檔案放置於與網頁同一目錄下。! Z# Q; q+ c: M5 n/ C! T1 y- y
lamp 你是否想知道為什麼在 <script> 標籤中 沒有插入 type="text/javascript" ?
8 A5 O& s6 {4 |6 W/ } `' _6 |) ]8 Y2 o5 L- k2 ^
在 HTML5 已經不需要該屬性。 JavaScript 在所有現代瀏覽器中是 HTML5 的預設腳本語言！+ e& J. a. s" i% w1 |: s" y. t
& d4 \1 ^! l# {3 }1 c6 ]" Y! |8 fjQuery Mobile 頁面5 x: S }( `9 N+ E6 v
開始學習 jQuery Mobile. U( L; }, y/ {
實例
2 ]" L% m% F- _& n5 _<body>% V7 D/ M! d; U
<div data-role="page">! K. h) r3 L- }( k: S
3 J( n- }6 z% K! p* W- i+ N <div data-role="header">
4 x1 Q' h! L* N <h1>歡迎來到我的主頁</h1>- T1 ]( h1 N' E N, \8 k
</div>
( B# J; {3 t( u
6 M2 Z2 H# S1 |8 }8 D <div data-role="main" class="ui-content">
% D9 L3 @6 O0 e' g2 B$ N2 W( M) U <p>我現在是一個移動端開發者!!</p>
! v5 T# u z% m' y% B) y5 { </div>
5 n5 [9 p" s+ m/ Y7 d& I3 O2 k' d5 h) j# I
<div data-role="footer">
' [5 T2 C# S4 {: x <h1>底部文字</h1>. ?& N* e; n2 [- X$ `% ]0 o
</div> r' N5 J! c% S# M1 A/ K) S/ @
7 P& ^7 s( I: [
</div>0 W6 |" f2 ^7 w8 r ?; L: S
</body>
0 t9 X0 _, v+ N" \5 D) A實例解析：
; h3 e" ^% }$ k. B! Y" V9 d
6 X, F/ b) n$ U data-role="page" 是在瀏覽器中顯示的頁面。
0 c# t# m- r- T8 E) J data-role="header" 是在頁面頂部建立的工具條 (通常用於標題或者搜尋按鈕)
, X' E* `. D& M) m, ` data-role="main" 定義了頁面的內容，比如文字， 圖片，表單，按鈕等。
- M% B, I: u: p: k/ w# O "ui-content" 類用於在頁面增加內邊距和外邊距。
/ D- z( K1 M2 |7 q data-role="footer" 用於建立頁面底部工具條。
4 U/ C' R( I! U, l) j 在這些容器中你可以增加任何 HTML 元素 - 段落, 圖片, 標題, 列表等。
# E0 s4 ~! D9 E; u6 ]
4 V6 o _0 f# s* jlamp jQuery Mobile 依賴 HTML5 data-* 屬性來支援各種 UI 元素、過渡和頁面結構。不支援它們的瀏覽器將以靜默方式棄用它們。! q- a" d0 \& m( x m+ d" ]
# i% {: A ]8 j, X9 q在頁面中增加 jQuery Mobile7 R# k3 I/ @) B5 `0 v& X+ o* E$ x% g
3 y% ^- h' ^4 q! [1 k+ _; _
使用 jQuery Mobile, 你可以再單個 HTML 檔案中建立多個不同的頁面。
f0 {! F' x& X8 H" d$ W2 J5 O, _3 g6 h: a5 |! n
你可以使用不同的href屬性來區分使用同一個唯一id的頁面：
# y) a5 Z& t8 W' B7 x- \實例
3 s- d) C( Z+ I7 ?6 C<div data-role="page" id="pageone">
' `! c2 Q5 v! K& l, E( Y( z3 \ <div data-role="main" class="ui-content">+ @$ H: U" [/ y3 E* [$ y
<a href="#pagetwo">跳轉到第二個頁面</a>
9 Z9 O+ Y7 X0 ^7 @3 L+ O; n6 L, G </div>+ {. _( w5 B, n6 [
</div>
7 G1 E- i& r1 k# q0 A3 z4 i
/ @4 y" p" v3 D# k7 e( H<div data-role="page" id="pagetwo">; N# p' K3 V% n7 |# N5 v+ i8 n
<div data-role="main" class="ui-content">. u5 Z* {0 U! @3 B% l1 U0 t( E. \
<a href="#pageone">跳轉到第一個頁面</a>& Z3 Z7 W/ {7 F/ g: Y6 n1 G9 t
</div>+ p4 F1 p6 c& j7 P- C
</div>: C: C# l3 |( Q* p( g
注意： 當web應用有大量的內容（文字，圖片，腳本等）將會嚴重影響加載時間。如果你不想使用內頁連結可以使用外部檔案：3 M$ m& s4 P0 _: d; U1 ^% D6 H
: j! e* ^1 e; B+ j<a href="externalfile.html">訪問外部檔案</a>
6 e- X4 i5 a8 e& @( `
3 s r; \9 t/ x. g頁面作為對話框使用
4 I* H* C; R. E/ l% p1 s) ^9 k6 i5 A8 u
對話框是用於顯示頁面內容顯示或者表單內容的輸入。+ p1 A+ u& {$ V. g/ _1 k. N1 Y( E
* a: x: K' S/ C3 z" V; d* A1 y在連結中增加data-rel="dialog"讓會員點閱連結時彈出對話框:
! A' Q+ F1 w( H# f/ {0 o6 B實例
, y+ }+ N' q$ N3 W1 W/ D9 ^& R<div data-role="page" id="pageone">7 _3 |5 ~$ q5 O+ L% l' c
<div data-role="main" class="ui-content">. ~' G9 Y" {8 d# r Q
<a href="#pagetwo">跳轉到第二個頁面</a>, a1 K4 c7 Z' E3 b7 ?
</div>
2 y: q" E, P9 Q</div>9 i3 ]2 }% n- i( @3 ~
0 |' G ~" R8 m) ]( T
<div data-role="page" data-dialog="true" id="pagetwo">8 y. a6 D8 j5 U4 M; m
<div data-role="main" class="ui-content">) E4 }( g! X7 l" |5 T* ?5 F5 X
<a href="#pageone">跳轉到第一個頁面</a>; a+ b- P: P* w; x
</div>2 I% b' `, a* y
</div> |
|
|Archiver|手機版|禁閉室|MyXNova (原 myxnova.com)
聲望
現金
存款
瀏覽推廣
註冊推廣
金幣
遊戲幣
鑽石
IP卡
狗仔卡
[資訊未更新]
發表於 2016-6-25 16:22:43
提升卡
置頂卡
沉默卡
喧囂卡
變色卡
千斤頂
顯身卡