|
等級：25 - 爐火純青 經驗值：0 / 244 魔法值：13486 / 13486 生命值：4%
升級
   100%
TA的每日心情 | 開心
15 小時前 |
|---|
簽到天數: 5460 天 [LV.Master]伴壇終老
|
發表於 2016-6-25 16:22:43
|顯示全部樓層
馬上註冊，結交更多好友，享用更多功能，讓你輕鬆玩轉社群。
您需要 登入 才可以下載或檢視，沒有帳號？立即註冊
×
jQuery Mobile 是用於建立移動 Web 應用的前端開發框架。 ! ]# g9 u; X% P# w5 H
jQuery Mobile 可以應用於智能手機與平板電腦。 & ^& E. b8 z6 }2 x8 S7 K4 w3 Q) a
jQuery Mobile 使用 HTML5 & CSS3 最小的腳本來佈局網頁。
5 J5 c' k7 f7 a, z. J7 P
$ A1 |: k; q7 `" y# G) A9 |什麼是 jQuery Mobile? # ^6 l* ^! b1 N" E( i N
2 j1 K3 O( W( n: u, `
jQuery Mobile 是針對觸屏智能手機與平板電腦的網頁開發框架。 ' p+ D- K. x# A3 O
R# L/ K+ G2 w3 i
jQuery Mobile 工作與所有主流的智能手機和平板電腦上：
`9 L" x9 m- c5 T o" P9 v% d4 D9 |: {/ R; d0 ` C
jQuery Mobile 構建於 jQuery 以及 jQuery UI類庫之上，如果您瞭解 jQuery，您可以很容易的學習 jQuery Mobile。
. f% Q( \+ |. g3 V0 F I# NjQuery Mobile 使用了極少的 HTML5、CSS3、JavaScript 和 AJAX 腳本代碼來完成頁面的佈局渲染。
3 m. @/ Z K4 ` F6 e& b6 ]; ^0 B/ i; |6 k
為什麼使用 jQuery Mobile?
# L$ E1 b! c; A4 y. k& y- E1 i! q- e
通過使用jQuery Mobile 可以 "寫更少的代碼，做更多的事情" : 它可以通過一個靈活及簡單的方式來佈局網頁，且兼容所有移動設備。3 w5 W! ?% ?/ g) V/ ^# I- }
lamp 不同設備使用了不同開發語言，jQuery Mobile可以很好的兼容不容的設備或操作系統：
o1 p9 N* [. |& X6 j* `' A1 C; p$ D
Android 和 Blackberry（黑莓） 使用JAVA語言。4 |$ m" b' M/ p" q% y
iOS 使用 Objective C 語言5 y( o" l( v2 a& W/ P
Windows Phone 使用 C# 和 .net, 等。
2 l$ ] S9 q- ]# ^! L9 Z
" n+ t+ ^% Q& q' S6 m9 ?jQuery Mobile 解決了不同設備兼容的問題，因為它只使用HTML，CSS和 JavaScript，這是所有移動網絡瀏覽器的標準！
( Q9 `" U9 @+ I2 t3 R0 K% I) {$ R/ h) ]
jQuery Mobile 安裝
" j2 c' [: ?: K) N+ Y在你的網頁中增加 jQuery Mobile
% ~/ f8 ?% S- V8 h( u0 ?/ [0 t7 \! K+ I& X, o0 G
你可以通過以下幾種方式將jQuery Mobile增加到你的網頁中：
3 U$ a& a2 U; @& e& j( c, G8 [7 y5 T/ D# |7 ^. }$ R, o
從 CDN 中加載 jQuery Mobile (推薦); E1 }* z8 d B% R+ F. o' k0 c4 C
從jQuerymobile.com 下載 jQuery Mobile庫
3 ~: ?6 y% L8 B
9 H# Q7 B1 F' i, Z% P下載 jQuery Mobile
$ @# D* S) Q# h9 c; S3 d9 a5 U% X' y' z8 y, y9 Y) Y
如果你想將 jQuery Mobile 放於你的主機中,你可以從 jQuerymobile.com下載該檔案。& q, Q# I' Q; V% S8 o4 H
/ v0 [+ t, h8 f5 t* U6 z; V
<head>
+ P; A9 }# n! B9 j! r0 X7 N; F5 s<meta name="viewport" content="width=device-width, initial-scale=1">5 }7 B7 L, z/ E2 n- [" k0 `
<link rel="stylesheet" href="jquery.mobile-1.4.5.css">
+ S2 Z+ |, Q+ p/ L<script src="jquery.js"></script>
/ g2 D( Y. z) ?: n9 @<script src="jquery.mobile-1.4.5.js"></script>
8 j' I5 [) @ A( Y; w</head>8 d5 E( D+ `8 V7 S1 h! `& o
8 Y A! B4 V9 b" t/ ?8 r提示： 將下載的檔案放置於與網頁同一目錄下。
$ t8 t) E: S& G9 blamp 你是否想知道為什麼在 <script> 標籤中 沒有插入 type="text/javascript" ?+ |, s& a. x6 X0 N7 D
( c& A6 ~) H0 O) X+ [
在 HTML5 已經不需要該屬性。 JavaScript 在所有現代瀏覽器中是 HTML5 的預設腳本語言！, k$ |5 g9 w4 k. S! [: x1 v+ c8 C
7 I) ?* \: t8 g# WjQuery Mobile 頁面
0 L% ^5 V% H) [開始學習 jQuery Mobile8 a: R2 j! C! S
實例
! X7 |0 d, s @. V4 w. W' b<body>( r% w: _. w9 \& {& D; J8 |
<div data-role="page">
! ^2 ^, S' I# H5 ?/ G6 V: ~3 G+ I1 @
<div data-role="header">9 [; Y4 H8 P) O% ]
<h1>歡迎來到我的主頁</h1>! A( h+ |0 j: t9 Z- q
</div>) F3 ^4 w* n3 q! a( m" ~* F
" @/ U# R* T; {+ P <div data-role="main" class="ui-content">' N* V: K% ]9 w
<p>我現在是一個移動端開發者!!</p>& p# @- L" N5 c; Z4 |0 s
</div>5 `5 t O. ~! ~0 w4 I9 B
7 v9 ~: I2 u) v( s# e, ^4 C' h
<div data-role="footer">
' b( l1 B; P* G: ^+ d <h1>底部文字</h1>
5 t1 i' C- U2 o. A7 J </div>+ ^- B! @' ]3 G9 R# }+ t( @, M: |5 u
% E; L) g3 @2 P' B& ]& ?4 G" }
</div>. S& @, f% k- Q( A% z7 ^7 E
</body>3 P% P0 |' Y# Q7 |* J
實例解析： @- M$ N8 Y, x' K
8 [, G: B n C
data-role="page" 是在瀏覽器中顯示的頁面。
" h. a* [3 X5 o- ] k) X+ ^- | data-role="header" 是在頁面頂部建立的工具條 (通常用於標題或者搜尋按鈕)
/ j9 L% L5 W `3 I data-role="main" 定義了頁面的內容，比如文字， 圖片，表單，按鈕等。6 O4 h6 f3 u% b. q) T
"ui-content" 類用於在頁面增加內邊距和外邊距。
4 d P8 X7 f$ G data-role="footer" 用於建立頁面底部工具條。/ D8 j0 b& |* R t( @; e; j) Y. Q
在這些容器中你可以增加任何 HTML 元素 - 段落, 圖片, 標題, 列表等。9 i: D" n' C! C: |2 ?$ k
. w0 t Y* h$ E: H9 L) L
lamp jQuery Mobile 依賴 HTML5 data-* 屬性來支援各種 UI 元素、過渡和頁面結構。不支援它們的瀏覽器將以靜默方式棄用它們。
4 r6 o6 J k8 `. v, i' N; @9 J
1 i | D0 L; j, u. T. s+ }在頁面中增加 jQuery Mobile
o% x7 E: ]7 y& e& Q6 v; p1 ?) ] d2 `6 f! ~
使用 jQuery Mobile, 你可以再單個 HTML 檔案中建立多個不同的頁面。
2 w. n# D O D! J5 Q. J2 p" y- l8 q2 n m3 _8 K+ ~9 a* R5 D" }
你可以使用不同的href屬性來區分使用同一個唯一id的頁面：5 {! U3 D3 M- o5 [5 V
實例
9 w8 t7 W* w- a U/ m. y8 N9 m) z<div data-role="page" id="pageone">
. V% w" ~ W2 ?- Q' w( x2 F <div data-role="main" class="ui-content">, O) s% f5 I( u! l
<a href="#pagetwo">跳轉到第二個頁面</a>" u3 N: h" I; S5 l) z. I
</div>
|* P4 ~; q' F0 v2 z7 T</div>
* c- c& W6 Z& Z3 t; ^. Z8 i# g" K/ R# N R5 y: y2 q4 T* S& X/ }
<div data-role="page" id="pagetwo">9 d e- }3 b* a: x, b
<div data-role="main" class="ui-content">
3 o0 Q1 ]$ L$ b7 h# S$ i <a href="#pageone">跳轉到第一個頁面</a>0 J! z' n* {6 O% R
</div>
2 s/ F) I5 K a; `2 O" K</div>
5 i1 I2 m# _" ~2 O4 [注意： 當web應用有大量的內容（文字，圖片，腳本等）將會嚴重影響加載時間。如果你不想使用內頁連結可以使用外部檔案：
" N* z2 @) x5 Z C% L
/ v. Q1 Y1 b/ w' t) F4 y, c<a href="externalfile.html">訪問外部檔案</a>
4 V, A4 X- ?! S+ U/ t# w5 X
/ o1 k# {0 y; v8 s7 K+ }) `/ F頁面作為對話框使用
* y1 R! e6 x; a f8 p6 {
- w5 o' w* H8 ^1 F$ ` G對話框是用於顯示頁面內容顯示或者表單內容的輸入。
1 d. z2 _1 M& g4 o6 ^/ ^* L g4 ~% u8 C4 [1 u2 `' ]; r
在連結中增加data-rel="dialog"讓會員點閱連結時彈出對話框:
! L0 b3 Q, U0 P實例
. x; j9 k4 ^4 l8 A2 K( Z<div data-role="page" id="pageone">' V2 T/ z w* m# o+ e: @
<div data-role="main" class="ui-content">) A1 C! A4 c- Y0 U+ ^
<a href="#pagetwo">跳轉到第二個頁面</a>6 Y4 s* }4 R8 A7 \' \! Y0 t$ r
</div>$ u8 I6 X5 u5 y0 J5 v+ ~
</div>" y# R" G* K! x/ E1 w! L
|) ~& W, x) Z7 q, \) m5 J<div data-role="page" data-dialog="true" id="pagetwo">$ m# r) M1 |& {: u4 B
<div data-role="main" class="ui-content">9 ?% q9 S; G% l5 _& V5 J0 b
<a href="#pageone">跳轉到第一個頁面</a>
S0 r% E7 q- ]$ l" u0 I </div>
, \7 c; Y" I( B7 }3 B4 {3 H</div> |
|
IP卡
狗仔卡
[資訊未更新]
提升卡
置頂卡
沉默卡
喧囂卡
變色卡
千斤頂
顯身卡