等級：25 - 爐火純青 經驗值：0 / 246 魔法值：15040 / 15040 生命值：6%
升級
   100%
TA的每日心情 | 奮斗
14 小時前 |
|---|
簽到天數: 5981 天 [LV.Master]伴壇終老
|
馬上註冊，結交更多好友，享用更多功能，讓你輕鬆玩轉社群。
您需要 登入 才可以下載或檢視，沒有帳號？立即註冊
×
jQuery Mobile 是用於建立移動 Web 應用的前端開發框架。
$ `# F1 ^. o6 V& C6 SjQuery Mobile 可以應用於智能手機與平板電腦。
! J; w( K7 `% G4 D$ z: ljQuery Mobile 使用 HTML5 & CSS3 最小的腳本來佈局網頁。
, R1 D7 y B' n6 Y+ z/ {+ i8 x; w f6 o: ~( l
什麼是 jQuery Mobile? - ~. j) c) f9 P& A
: G) S% K( b. T+ }; @jQuery Mobile 是針對觸屏智能手機與平板電腦的網頁開發框架。 ' ` \3 p, V, i. [1 W' x
2 M( R8 s/ C1 P# GjQuery Mobile 工作與所有主流的智能手機和平板電腦上：
' D5 w- P' x5 V$ h, M w+ e& k4 @+ t9 s* I; p9 A0 Q2 `
jQuery Mobile 構建於 jQuery 以及 jQuery UI類庫之上，如果您瞭解 jQuery，您可以很容易的學習 jQuery Mobile。 # g2 f9 I) r& m. h+ X
jQuery Mobile 使用了極少的 HTML5、CSS3、JavaScript 和 AJAX 腳本代碼來完成頁面的佈局渲染。6 f4 }% g$ i/ U7 M" }) H+ ?
' i2 @( A0 x" w3 ~. ]' c- E為什麼使用 jQuery Mobile?7 F+ y* W% C2 M$ d9 V' J* f) x
; @+ Y7 @& q! o6 @. D) \% J
通過使用jQuery Mobile 可以 "寫更少的代碼，做更多的事情" : 它可以通過一個靈活及簡單的方式來佈局網頁，且兼容所有移動設備。' a0 H/ R2 ]* Y& |" `& ~9 i7 f
lamp 不同設備使用了不同開發語言，jQuery Mobile可以很好的兼容不容的設備或操作系統：+ \: E2 o6 l" i: [. ^% }* D
3 \. z% U! |2 A# [" l. }5 {
Android 和 Blackberry（黑莓） 使用JAVA語言。% Q0 W2 K. G! g5 E2 i" U; i8 U
iOS 使用 Objective C 語言
& J4 N7 V' U3 S# U6 R; O Windows Phone 使用 C# 和 .net, 等。
3 j, h# N! C0 S- d: W+ n5 b5 A# m* o4 {, I
jQuery Mobile 解決了不同設備兼容的問題，因為它只使用HTML，CSS和 JavaScript，這是所有移動網絡瀏覽器的標準！! p# W A; l' \4 \. n2 y
: ]3 f1 X0 ~( O- r4 O, {
jQuery Mobile 安裝
4 R. K, q: a4 g0 `( \在你的網頁中增加 jQuery Mobile4 t, Q0 q, O5 _
" B& B" H. X% {& Z6 q
你可以通過以下幾種方式將jQuery Mobile增加到你的網頁中：
' [4 O: r2 A+ }; R, n0 G/ K; y# @2 }/ B
從 CDN 中加載 jQuery Mobile (推薦)
- L& J' v1 v. u 從jQuerymobile.com 下載 jQuery Mobile庫0 {# M" d, J' N2 V& H
$ {. i% C% ]) O" A+ ^0 U2 b下載 jQuery Mobile
" J, f4 s2 O" J- J+ A6 ?6 o- g, v# j S( t
如果你想將 jQuery Mobile 放於你的主機中,你可以從 jQuerymobile.com下載該檔案。, i5 }4 T- A7 J5 N; Y0 i
/ ?+ d- n' x2 O; |7 f8 y
<head>' x' B4 g; y1 |& t
<meta name="viewport" content="width=device-width, initial-scale=1">5 s8 S& s8 G5 |0 i9 G
<link rel="stylesheet" href="jquery.mobile-1.4.5.css">
* Z5 q8 i, S. V<script src="jquery.js"></script>" ^. I$ R- G! [( z) y- i) O
<script src="jquery.mobile-1.4.5.js"></script>7 P8 t( s; Q) L. R% Z4 X
</head>
6 p, o r B0 c0 ]6 D- Q# G
3 Z# h2 q* {% \, v3 `' _2 E# x5 F, D2 O提示： 將下載的檔案放置於與網頁同一目錄下。2 q* Q6 R7 l/ P. `, l0 z/ _8 E, Y
lamp 你是否想知道為什麼在 <script> 標籤中 沒有插入 type="text/javascript" ?' e d" M! ~4 [' J
% h' |9 Q1 M! ~5 u) A7 `( g
在 HTML5 已經不需要該屬性。 JavaScript 在所有現代瀏覽器中是 HTML5 的預設腳本語言！' { U; \* X6 ?3 Z# P& a3 h
. p- p+ D& \2 x4 w; `7 M: fjQuery Mobile 頁面3 `$ {- P5 ^7 `' {) p+ n8 s# d
開始學習 jQuery Mobile p: t2 e$ n) r4 o* j
實例
# l* b% B6 N0 m; h% {<body>
4 H2 u3 k$ H) i L& w' ?0 I& r<div data-role="page">
5 _! N/ W" _0 L$ N, T; n. i/ n2 k
/ [) m v% q( m" E$ Y: Y! q <div data-role="header">, ?$ u, k+ p. b3 F* Q. }
<h1>歡迎來到我的主頁</h1>
! @! P) g7 v5 m8 ~( ^ </div>
4 \- ?0 h% l5 A7 _) Z1 ]! r+ f2 i9 ?
<div data-role="main" class="ui-content">4 I9 W2 r$ J1 D. U: Z
<p>我現在是一個移動端開發者!!</p>
% A+ g6 a* Y0 s, W- y* d, t </div>
) X4 d+ ?4 z/ J7 L. q L! ?) e, m( C; u
<div data-role="footer">
) K- j1 O% J# e9 ]' o" v9 ~ <h1>底部文字</h1>
( S6 g5 ]0 y! u( Z! A5 x </div>
4 C$ b9 b& S; v! s& z' S( k
# H5 I; x0 ^' C</div>
) i& F/ h% s1 ]</body>
% e/ O" V, ^/ T實例解析：
& f! f8 k8 l& B+ A3 D5 @. M/ W9 n/ y5 h& p2 d" ]& [5 ?
data-role="page" 是在瀏覽器中顯示的頁面。
1 k" v$ S1 P( m3 |: i3 K( F" |0 o% l data-role="header" 是在頁面頂部建立的工具條 (通常用於標題或者搜尋按鈕)
; j6 K$ n& a# E data-role="main" 定義了頁面的內容，比如文字， 圖片，表單，按鈕等。1 N& E) Q7 \: V* x Z) B
"ui-content" 類用於在頁面增加內邊距和外邊距。$ r1 q. j( F) i
data-role="footer" 用於建立頁面底部工具條。+ m1 C* H# [$ y" L" T* G
在這些容器中你可以增加任何 HTML 元素 - 段落, 圖片, 標題, 列表等。- ?' C! a: D' F$ k- d# s
1 d, i" y( S x5 k" Elamp jQuery Mobile 依賴 HTML5 data-* 屬性來支援各種 UI 元素、過渡和頁面結構。不支援它們的瀏覽器將以靜默方式棄用它們。
' d! N4 I- I' B, H* K: \ t% B) S+ K. ]. r6 y m0 q+ X
在頁面中增加 jQuery Mobile
, e# Y9 D8 ^) W% a f8 u8 `& |
: d2 W- O, u( Z4 N5 k使用 jQuery Mobile, 你可以再單個 HTML 檔案中建立多個不同的頁面。* y" E* z) U& }/ j) G
+ W% ^, V4 m# L/ N% k; J你可以使用不同的href屬性來區分使用同一個唯一id的頁面：
7 i" Q$ E8 ~9 f/ i+ K) r" \) F實例
# @/ D* ^8 D% h ]3 b) d# j<div data-role="page" id="pageone">4 W5 @ u$ O4 W4 n: j6 I3 h
<div data-role="main" class="ui-content">
4 D8 `/ t1 g0 i <a href="#pagetwo">跳轉到第二個頁面</a>
( }! j; R, C2 E6 e; J) c </div>3 E, z9 ~4 o0 D6 W3 g7 X0 z
</div>
3 J/ G, }5 q6 O3 w0 ]2 D& J+ `2 U$ p6 [! M7 W
<div data-role="page" id="pagetwo">% Y: `; H( D7 q/ G$ |9 }
<div data-role="main" class="ui-content">2 O: W; K. e7 r0 z* Q8 w e8 m8 a
<a href="#pageone">跳轉到第一個頁面</a>/ q+ e. V$ k. N' ^! S, L) {
</div>
% r! i8 A4 h3 a- f7 _3 D</div>, j, m) t6 ]2 B( [# R, \
注意： 當web應用有大量的內容（文字，圖片，腳本等）將會嚴重影響加載時間。如果你不想使用內頁連結可以使用外部檔案：
, q5 E0 \$ N1 ]! W( i
9 v0 w, v& ]" ~<a href="externalfile.html">訪問外部檔案</a>' L2 `' g% O/ Q2 z% s
5 N8 |9 G5 I4 x- Y& S
頁面作為對話框使用
# d! s+ F- v2 S1 l1 q
/ f) X3 W$ I' m3 A9 j# P對話框是用於顯示頁面內容顯示或者表單內容的輸入。
( ^# P) V( `3 F/ E) s0 @
" K, i/ m- k8 b# U. I$ O {2 p在連結中增加data-rel="dialog"讓會員點閱連結時彈出對話框:
7 u" N6 e7 \, P2 f實例
~7 A8 y7 Q2 z2 v, B; e3 z<div data-role="page" id="pageone">: z* o1 `) j/ V' h2 `# J- f9 y5 D
<div data-role="main" class="ui-content">! A" ]( b0 C+ ^) x" i5 k
<a href="#pagetwo">跳轉到第二個頁面</a>' }1 l: B% J2 v) v- @5 ~
</div>; d/ {; l! c8 ^
</div>
% ]' B4 p- b( U% D* K# N+ y3 g: A3 Z- c' F3 q; `3 G" E
<div data-role="page" data-dialog="true" id="pagetwo">& }1 ^( R7 t0 s0 o! K
<div data-role="main" class="ui-content">7 p8 O3 Y1 O$ K" p2 R" b
<a href="#pageone">跳轉到第一個頁面</a>
. A) X( R9 v1 y# h </div>
3 F l; Y& c8 |7 T( g v u! T</div> |
|
|Archiver|手機版|禁閉室|MyXNova (原 myxnova.com)
聲望
現金
存款
瀏覽推廣
註冊推廣
金幣
遊戲幣
鑽石
IP卡
狗仔卡
[資訊未更新]
發表於 2016-6-25 16:22:43
提升卡
置頂卡
沉默卡
喧囂卡
變色卡
千斤頂
顯身卡