|
等級：25 - 爐火純青 經驗值：0 / 246 魔法值：14428 / 14428 生命值：6%
升級
   100%
TA的每日心情 | 奮斗
5 小時前 |
|---|
簽到天數: 5801 天 [LV.Master]伴壇終老
|
發表於 2016-6-25 16:22:43
|顯示全部樓層
馬上註冊，結交更多好友，享用更多功能，讓你輕鬆玩轉社群。
您需要 登入 才可以下載或檢視，沒有帳號？立即註冊
×
jQuery Mobile 是用於建立移動 Web 應用的前端開發框架。 # f0 b- {& d% a6 l
jQuery Mobile 可以應用於智能手機與平板電腦。 1 J+ e# R$ J1 \( ~6 I
jQuery Mobile 使用 HTML5 & CSS3 最小的腳本來佈局網頁。- a& I5 h1 q& j/ Q. G. P. q: i
# T. X6 A2 u& N o- E什麼是 jQuery Mobile? ! _( o1 y8 o- {; [
; }; x2 e; ~% D9 o5 B6 {: M5 `% v
jQuery Mobile 是針對觸屏智能手機與平板電腦的網頁開發框架。 " F: i' J, t# v: F+ W3 h5 Q( x; \
- H V; n1 c3 T0 a. ~; A' yjQuery Mobile 工作與所有主流的智能手機和平板電腦上： 9 a4 A P* i: K
0 j% U, V& w; ijQuery Mobile 構建於 jQuery 以及 jQuery UI類庫之上，如果您瞭解 jQuery，您可以很容易的學習 jQuery Mobile。
/ T6 j; E; [6 [jQuery Mobile 使用了極少的 HTML5、CSS3、JavaScript 和 AJAX 腳本代碼來完成頁面的佈局渲染。
( M- n( h' ?+ d4 T# i' Y' i2 K+ k8 Y c8 `
為什麼使用 jQuery Mobile?" H. j% P( a1 W9 Z _* P
% V- V( x* w$ B: k通過使用jQuery Mobile 可以 "寫更少的代碼，做更多的事情" : 它可以通過一個靈活及簡單的方式來佈局網頁，且兼容所有移動設備。
$ r+ a' U' R! v' Nlamp 不同設備使用了不同開發語言，jQuery Mobile可以很好的兼容不容的設備或操作系統：
9 L% O# ]$ k( b" G; K# u
, A4 @8 F* ?) I6 w3 I6 w0 T% ?1 T9 Y Android 和 Blackberry（黑莓） 使用JAVA語言。
d, x( H3 t$ u/ w3 Y iOS 使用 Objective C 語言
' X% U) x5 }) P/ D Windows Phone 使用 C# 和 .net, 等。* X; l- Y, O/ T
1 S. d! H8 j& @" F( X1 _ H
jQuery Mobile 解決了不同設備兼容的問題，因為它只使用HTML，CSS和 JavaScript，這是所有移動網絡瀏覽器的標準！ l1 J( W5 Z) J) R3 i. l0 Y3 _
5 d8 @8 n9 S6 L+ |! B
jQuery Mobile 安裝
+ ]0 M: v1 I, ?- b在你的網頁中增加 jQuery Mobile
j# y5 z3 B; b/ P. |0 r- x5 N
6 L, p% i5 t! {# p( R5 B+ r9 g你可以通過以下幾種方式將jQuery Mobile增加到你的網頁中：
6 \7 Z3 H6 ]2 Z' E1 K* o6 G% L$ I5 z6 |7 n; A" }- I, z. z4 m; F
從 CDN 中加載 jQuery Mobile (推薦)7 C" E5 ]9 D* d: f+ t! S% \
從jQuerymobile.com 下載 jQuery Mobile庫$ G8 V B0 a, e+ _' g$ l, W
# f' i5 I2 t3 w8 I* c, }& s7 W) P4 y8 R下載 jQuery Mobile
# Z! M; z% r; a! S4 X0 v7 L0 u8 `3 k4 u e2 r! k
如果你想將 jQuery Mobile 放於你的主機中,你可以從 jQuerymobile.com下載該檔案。' B0 p. I+ X* ]& g2 n. e- |8 I
) y7 ~! c9 ^+ C, m7 ^7 ^
<head>3 U: \( P7 p' ?% Q- x
<meta name="viewport" content="width=device-width, initial-scale=1">
2 q7 h7 {) s6 q0 X z3 C<link rel="stylesheet" href="jquery.mobile-1.4.5.css">
$ A) i+ `9 C! x6 `# \<script src="jquery.js"></script>
+ ?9 Q* ^+ w5 R<script src="jquery.mobile-1.4.5.js"></script>
2 E6 B5 ]3 A. g2 V$ B, I( \</head>2 H% m0 M0 ?# O/ f9 e* a, x7 G
* ^5 [4 T* z/ o+ p3 q* ^
提示： 將下載的檔案放置於與網頁同一目錄下。9 d c. [1 T0 l4 s0 `
lamp 你是否想知道為什麼在 <script> 標籤中 沒有插入 type="text/javascript" ?
" h9 {5 ^' g( L- L
4 h7 G8 D) j5 r S在 HTML5 已經不需要該屬性。 JavaScript 在所有現代瀏覽器中是 HTML5 的預設腳本語言！
7 g) i$ o* ]6 B- z7 A7 L8 \. m4 E. k6 A( b7 j3 F
jQuery Mobile 頁面
+ `! S( A3 e* Y6 o% q開始學習 jQuery Mobile
$ \8 J6 y( b# Z- z( S實例
. I: s7 _: [9 O+ O5 h2 {8 J<body>8 y$ @- A' F7 z$ L: J% |# n
<div data-role="page">, U t4 N$ n8 b: t- h8 x6 U# p3 V# `0 ]
8 f4 x2 L, j" P% Q7 {% [- Z
<div data-role="header">
1 d* E) z0 Y0 R) `% O6 S <h1>歡迎來到我的主頁</h1>" ]9 _9 S; s. ~& w6 [* n
</div>
- A& R+ m4 ?2 M; d) i
! O! N4 }+ y$ B <div data-role="main" class="ui-content">& {: X) {/ t. Z9 V% U
<p>我現在是一個移動端開發者!!</p>3 l* _3 K2 G" c$ L' O
</div>+ ~5 \- z' x4 t! M( Q/ `
: Q* y0 h. R8 H' U% J <div data-role="footer">
% r+ a1 B' ~# h5 A! { <h1>底部文字</h1>
3 y, A! p) b c+ f </div>6 ]$ t3 f6 Z- r( t! r
$ N* N" X4 n' L% [" G7 j6 m* f! Q) W
</div>: X0 Z! H" c6 q! Q9 C
</body> o/ g8 K- v7 P, G' J
實例解析：) _% \) t% k* P; Z4 E8 V
0 U6 f: K! X. g$ g9 b% i data-role="page" 是在瀏覽器中顯示的頁面。
9 c: ?4 } z) T+ d; ]. F! W# m data-role="header" 是在頁面頂部建立的工具條 (通常用於標題或者搜尋按鈕)
/ p# d8 _' N% i: t- d! Z6 v data-role="main" 定義了頁面的內容，比如文字， 圖片，表單，按鈕等。
% f, E0 K; b- a# [1 y/ E3 M8 Q+ V F "ui-content" 類用於在頁面增加內邊距和外邊距。
- \9 r; \1 O3 A$ q7 [0 V data-role="footer" 用於建立頁面底部工具條。
) V0 C, r. O/ R 在這些容器中你可以增加任何 HTML 元素 - 段落, 圖片, 標題, 列表等。0 `9 V. [; i7 L \( s) }
8 ]' ~( s) e |7 O+ S' m* [3 t7 W5 hlamp jQuery Mobile 依賴 HTML5 data-* 屬性來支援各種 UI 元素、過渡和頁面結構。不支援它們的瀏覽器將以靜默方式棄用它們。
- |" I) b6 ?3 v; }+ J* y% f" J; m* H, x, i* n+ M2 _4 n. P1 Q# H
在頁面中增加 jQuery Mobile
, o! w+ V. h G7 x$ o# c8 \) J
1 n" D+ R _9 P3 Z. U3 I使用 jQuery Mobile, 你可以再單個 HTML 檔案中建立多個不同的頁面。
7 B, [& U$ m5 |5 i0 M+ D" c3 y* j9 ]# i5 Z
你可以使用不同的href屬性來區分使用同一個唯一id的頁面：* U3 ?6 ?) R H0 J$ Z7 T0 G
實例. L+ w" b5 A* Q% S
<div data-role="page" id="pageone">
! s7 [1 \7 B @; R2 B <div data-role="main" class="ui-content">
1 @+ r4 @7 P, n3 T$ J7 v8 f1 m <a href="#pagetwo">跳轉到第二個頁面</a>
* g3 Y+ F9 ]+ Z0 z5 Y </div>
8 u0 C! M, m' v; n! @5 H6 o</div>
8 F: R, ]7 }/ t. \2 {4 p5 z' E* t& U! X. R$ k- l
<div data-role="page" id="pagetwo">
8 I: l+ v6 L t <div data-role="main" class="ui-content">
& u+ {) e% i1 h+ i0 d1 O# c; G <a href="#pageone">跳轉到第一個頁面</a>
1 v" w2 L0 N0 F1 ~ l+ g" P </div>
- b0 N) x0 ^7 U# @8 P' P- U0 w5 o5 F</div>
/ L; J1 Z/ n( G9 X, c注意： 當web應用有大量的內容（文字，圖片，腳本等）將會嚴重影響加載時間。如果你不想使用內頁連結可以使用外部檔案：
* R0 x8 V3 a4 s( {& H" b6 q: }4 i" X* Q
<a href="externalfile.html">訪問外部檔案</a>
( Y4 j) _* U+ K+ c e/ Z5 v9 N. g% F0 {/ G. n
頁面作為對話框使用
g& |/ J" x+ _0 @. e$ ~! n1 m/ ~; c2 i0 O$ r, I
對話框是用於顯示頁面內容顯示或者表單內容的輸入。6 `5 M& ` P Y. X- _
" d8 r4 f: L8 E* }在連結中增加data-rel="dialog"讓會員點閱連結時彈出對話框:
7 O1 {, l' a3 F- a% f實例
( m/ a. n, D) g& A c5 K<div data-role="page" id="pageone">0 r- v# Z* C$ b, l# m8 R! E0 M: L* G
<div data-role="main" class="ui-content">
0 q0 i( c( s6 W* H <a href="#pagetwo">跳轉到第二個頁面</a>
% l ?+ \ t3 Z4 L </div>: ^) q8 Q( U* I3 o# h; }8 S
</div>7 {' u7 u( [6 o! N9 K# h: G
& h6 a7 Z& N4 g7 F! O; d5 E1 T- S<div data-role="page" data-dialog="true" id="pagetwo">4 N7 _6 f) h) l4 V; L
<div data-role="main" class="ui-content">0 ?! L, M8 ]- p4 k
<a href="#pageone">跳轉到第一個頁面</a># ?; e: C# I5 b# M
</div>
, d' l! f# [0 [+ w</div> |
|
IP卡
狗仔卡
[資訊未更新]
提升卡
置頂卡
沉默卡
喧囂卡
變色卡
千斤頂
顯身卡