|
等級：25 - 爐火純青 經驗值：0 / 245 魔法值：14415 / 14415 生命值：5%
升級
   100%
TA的每日心情 | 擦汗
12 小時前 |
|---|
簽到天數: 5796 天 [LV.Master]伴壇終老
|
發表於 2016-6-25 16:22:43
|顯示全部樓層
馬上註冊，結交更多好友，享用更多功能，讓你輕鬆玩轉社群。
您需要 登入 才可以下載或檢視，沒有帳號？立即註冊
×
jQuery Mobile 是用於建立移動 Web 應用的前端開發框架。 5 y0 ?6 A2 l& ?1 w; ]% D
jQuery Mobile 可以應用於智能手機與平板電腦。
! B* C0 Q* \" o$ A# DjQuery Mobile 使用 HTML5 & CSS3 最小的腳本來佈局網頁。! h/ F) X% K" C, S6 R
& M6 \! C" C5 u" h n" `; P
什麼是 jQuery Mobile?
! `1 d9 r1 f' h
6 m7 Z/ s) y0 m+ N' s! djQuery Mobile 是針對觸屏智能手機與平板電腦的網頁開發框架。 * g. ~- O. ?* s! y2 Z
3 e0 G# f K- z/ m2 w3 P
jQuery Mobile 工作與所有主流的智能手機和平板電腦上：
9 U$ B# c2 n0 V9 K( J4 x2 U
$ T0 P, x2 y$ u/ w8 b4 RjQuery Mobile 構建於 jQuery 以及 jQuery UI類庫之上，如果您瞭解 jQuery，您可以很容易的學習 jQuery Mobile。
) c: Q1 C% [/ f% _: }2 K: ^, QjQuery Mobile 使用了極少的 HTML5、CSS3、JavaScript 和 AJAX 腳本代碼來完成頁面的佈局渲染。% g' u* g% I% i6 N! Y6 r
; {0 O7 q+ ]0 q& j# t. u為什麼使用 jQuery Mobile?
5 T& ?; v' {8 r; a' h) V5 L- b6 X8 y* ]- P& [ q6 ~! _
通過使用jQuery Mobile 可以 "寫更少的代碼，做更多的事情" : 它可以通過一個靈活及簡單的方式來佈局網頁，且兼容所有移動設備。
7 F1 L) r6 l4 Q {lamp 不同設備使用了不同開發語言，jQuery Mobile可以很好的兼容不容的設備或操作系統：
0 A; Y* }* k1 K g) A% T6 m( n) i$ ^0 m, h f! M
Android 和 Blackberry（黑莓） 使用JAVA語言。+ v6 |/ `# f( E, u5 g2 I7 u
iOS 使用 Objective C 語言
8 W4 y9 `! q p+ | Windows Phone 使用 C# 和 .net, 等。
# J! ^5 L7 v% e3 w4 b! |
% G7 f- ?- P6 } KjQuery Mobile 解決了不同設備兼容的問題，因為它只使用HTML，CSS和 JavaScript，這是所有移動網絡瀏覽器的標準！( @5 ^+ |% m/ l, n% t M0 r& j3 q( A
4 F% H' J8 @9 TjQuery Mobile 安裝3 L. L8 y( K8 W; O" G# |
在你的網頁中增加 jQuery Mobile
3 l$ U4 D8 y9 r# G- E% A! T8 a, y- i a
你可以通過以下幾種方式將jQuery Mobile增加到你的網頁中：
) j5 x. s0 J0 `9 [& E) ~0 z9 Z1 D/ O5 c$ x' R$ e- Z2 k& I
從 CDN 中加載 jQuery Mobile (推薦)
* {7 Q4 L( L1 S 從jQuerymobile.com 下載 jQuery Mobile庫* B. u! K, ^# k; `, Q$ W
1 ^7 B7 A4 U* a C! s8 y# L
下載 jQuery Mobile
! ?. O; D, P% h; }" b9 r( o2 {( L- U2 F2 U! D4 a
如果你想將 jQuery Mobile 放於你的主機中,你可以從 jQuerymobile.com下載該檔案。/ E5 y4 y, S; W6 k& b
6 e/ |/ ]7 z4 O$ g( E<head>. C$ v8 I' U0 k [4 X7 X
<meta name="viewport" content="width=device-width, initial-scale=1">
1 \8 i9 k2 _, v( w8 L<link rel="stylesheet" href="jquery.mobile-1.4.5.css">
2 b2 Q/ O1 W) O7 X<script src="jquery.js"></script>1 c6 X, f& b7 m, ^. U; t7 K3 T' e
<script src="jquery.mobile-1.4.5.js"></script>' q7 j* @0 m5 `
</head>
, ^; L0 s: F) { w1 S4 U+ x" v4 ]" x+ p. E8 G
提示： 將下載的檔案放置於與網頁同一目錄下。# A6 U/ p8 U- U8 ~) p: K
lamp 你是否想知道為什麼在 <script> 標籤中 沒有插入 type="text/javascript" ?
3 c2 g6 h( H; W! `+ e6 f
4 I2 c1 a3 C2 C8 Y& ~# K在 HTML5 已經不需要該屬性。 JavaScript 在所有現代瀏覽器中是 HTML5 的預設腳本語言！" N" L/ T6 B: i8 ~) D- @, h
/ |. M# g' y: k/ o$ B. J3 s4 r* N( G
jQuery Mobile 頁面
/ v3 ?. p; t$ a6 I開始學習 jQuery Mobile
; L: ~4 H0 A- G' Q+ Q實例
% r( X5 q1 ~ t- p<body>) |, T% u) {" @& v: S r$ ^
<div data-role="page">6 Q3 R* x3 J3 L: u. A P1 P6 M
% q9 z4 M) g5 L5 F. @ <div data-role="header">
8 o8 _0 J, b6 ~& I: v I" ^ <h1>歡迎來到我的主頁</h1>
4 j8 t+ Z( c( S b. O. _ </div>
! g m: Z3 E+ }0 K5 ?& R% X$ y4 R" v' u) N& V
<div data-role="main" class="ui-content">
7 ]! q+ E1 z# T$ L# f- X% W# _ <p>我現在是一個移動端開發者!!</p>
& R' s w2 |* O* y </div>
( g- M4 c! E9 `% a" F
% u3 f h$ o8 _ <div data-role="footer">6 W/ Y Q/ W# Y* e& f. M
<h1>底部文字</h1>. W( R+ M4 s) O" a1 U
</div>
" V5 B7 [* A$ E( Q/ _1 q
: u. u B: ~0 g, x% l/ c</div>1 O2 N( n4 Y& Y4 i' _
</body>
9 a* G _# V. F% b! X! G0 m6 n# T6 q實例解析：
( e7 K1 v/ s/ Z' G$ L$ H% H1 t3 i; ]/ @% C
data-role="page" 是在瀏覽器中顯示的頁面。) n& W0 H7 e; o2 V" U# u. j! Z
data-role="header" 是在頁面頂部建立的工具條 (通常用於標題或者搜尋按鈕)
* Y' k$ s: o* X/ U" w data-role="main" 定義了頁面的內容，比如文字， 圖片，表單，按鈕等。
6 r( I) C" r+ Q: w "ui-content" 類用於在頁面增加內邊距和外邊距。
; o f5 G0 I9 v# k! t data-role="footer" 用於建立頁面底部工具條。- k4 I3 o$ c; a( M; A+ `
在這些容器中你可以增加任何 HTML 元素 - 段落, 圖片, 標題, 列表等。
/ [; A2 D+ @" A+ z y) T" r- O" V: \' P6 n6 b1 M9 j' X
lamp jQuery Mobile 依賴 HTML5 data-* 屬性來支援各種 UI 元素、過渡和頁面結構。不支援它們的瀏覽器將以靜默方式棄用它們。3 p( I1 u" D& z8 Q+ \: n" Z
4 [& s2 }0 O) ^) {, r+ I3 H在頁面中增加 jQuery Mobile+ R8 h- X/ b" _; K
9 e0 _# I P. N( O
使用 jQuery Mobile, 你可以再單個 HTML 檔案中建立多個不同的頁面。) C: p% Q1 C* k1 ?
3 `: x; L) m+ e2 j& q/ n3 b你可以使用不同的href屬性來區分使用同一個唯一id的頁面：
" l7 l: e* s. x/ d. X* N7 A實例
+ y" I% Q/ A% s& X; ~$ S* Z<div data-role="page" id="pageone">$ H. `! R1 d" e6 S8 l* I
<div data-role="main" class="ui-content">
; y- |9 s& r9 f2 n5 U! j% K& D: { <a href="#pagetwo">跳轉到第二個頁面</a>. `, \) @7 R$ s
</div>( i( ~$ P8 |) x; \( A, Y
</div>) C$ q; a4 C: y M" d# M5 i5 I' a
# r# Q8 y* {- A8 k( y' @* \
<div data-role="page" id="pagetwo">" \. s! T2 y" L0 Q
<div data-role="main" class="ui-content">
) G2 I6 j+ C% M2 O3 h' C <a href="#pageone">跳轉到第一個頁面</a>
, ?# ~. i6 o; r! n% a5 X7 ~" w </div>! w+ W) k7 Y6 G1 f
</div>
. @0 S. h( c7 M, S8 v: ~- C8 {6 C, W注意： 當web應用有大量的內容（文字，圖片，腳本等）將會嚴重影響加載時間。如果你不想使用內頁連結可以使用外部檔案：$ q: N$ x K' V% u1 V
& {9 V+ k Y( n ~' f
<a href="externalfile.html">訪問外部檔案</a>
& D7 A. W& I" K* @ k: @" j
/ G: p) ^3 S, ^( u頁面作為對話框使用
- d6 v6 }' M1 {' N7 x+ P4 F) u. Q4 f) c) i; ?
對話框是用於顯示頁面內容顯示或者表單內容的輸入。
# }# w! g" O' E( J. I2 ?
L: `+ P3 T6 l1 N x在連結中增加data-rel="dialog"讓會員點閱連結時彈出對話框:
. I* x* y) v( o9 a2 r- |實例( I/ c6 |' O$ ]4 V; k7 q
<div data-role="page" id="pageone">( |0 M. O2 H+ l, O5 {- x9 |2 N
<div data-role="main" class="ui-content">0 R) `& w! I( r; A2 p" ?4 b
<a href="#pagetwo">跳轉到第二個頁面</a>* U" I/ T, K8 K8 a
</div>
$ X- w/ }5 r P* G# W" M* U</div>
6 E: Y, \5 U1 H
* w& G, }, G) A% F; d- \<div data-role="page" data-dialog="true" id="pagetwo"> V1 c+ T+ Q+ j- @. B% ]
<div data-role="main" class="ui-content">5 }3 g+ h4 y. K- m/ t
<a href="#pageone">跳轉到第一個頁面</a>/ P% N' ^, t( `1 k% R& A& {
</div>
" y& w( k8 {, c' x' K6 M I) @. C( ~</div> |
|
IP卡
狗仔卡
[資訊未更新]
提升卡
置頂卡
沉默卡
喧囂卡
變色卡
千斤頂
顯身卡