等級：25 - 爐火純青 經驗值：0 / 245 魔法值：13577 / 13577 生命值：5%
升級
   100%
TA的每日心情 | 衰
9 小時前 |
|---|
簽到天數: 5494 天 [LV.Master]伴壇終老
|
馬上註冊，結交更多好友，享用更多功能，讓你輕鬆玩轉社群。
您需要 登入 才可以下載或檢視，沒有帳號？立即註冊
×
jQuery Mobile 是用於建立移動 Web 應用的前端開發框架。
& r4 |" X t0 C' @) kjQuery Mobile 可以應用於智能手機與平板電腦。 - N% N( x/ \1 j' J0 u+ S# _" R
jQuery Mobile 使用 HTML5 & CSS3 最小的腳本來佈局網頁。
' |* _% X C# S6 o" E0 O$ d. M( q/ k
什麼是 jQuery Mobile?
+ d. \5 F6 w2 D3 T! W0 h4 H0 N% i/ q8 @
jQuery Mobile 是針對觸屏智能手機與平板電腦的網頁開發框架。 . z0 v2 R4 m' Q" h6 n1 j
: d. T, U0 k; i: \# j4 c! z2 c) h
jQuery Mobile 工作與所有主流的智能手機和平板電腦上： 5 h9 S3 z" Z" `1 ?9 [# k
1 ]& \$ D/ J# m0 ?
jQuery Mobile 構建於 jQuery 以及 jQuery UI類庫之上，如果您瞭解 jQuery，您可以很容易的學習 jQuery Mobile。
. H9 W& Y% n+ u2 djQuery Mobile 使用了極少的 HTML5、CSS3、JavaScript 和 AJAX 腳本代碼來完成頁面的佈局渲染。$ _( \+ i. y! Z" x0 M- H! Y# d
8 C! ^' ]7 ~- ?; `7 w7 z為什麼使用 jQuery Mobile?
8 o; F; p+ H5 Q" F
- J! F5 a6 k& V通過使用jQuery Mobile 可以 "寫更少的代碼，做更多的事情" : 它可以通過一個靈活及簡單的方式來佈局網頁，且兼容所有移動設備。; X0 z+ c' p1 S/ F
lamp 不同設備使用了不同開發語言，jQuery Mobile可以很好的兼容不容的設備或操作系統：
T: s2 `! b/ C- p, j% J2 [7 f5 G5 @& g3 a
Android 和 Blackberry（黑莓） 使用JAVA語言。; X4 C2 T1 O" e8 h1 I
iOS 使用 Objective C 語言
3 F; A, M9 P6 f) S% [9 x Windows Phone 使用 C# 和 .net, 等。
' F: Q# J* z5 N. I0 x4 A. p$ E- @+ Q# ^' D9 o
jQuery Mobile 解決了不同設備兼容的問題，因為它只使用HTML，CSS和 JavaScript，這是所有移動網絡瀏覽器的標準！! U" _+ C) o0 |1 i9 x$ C' T; U
% m: N$ a# o8 X/ W5 O
jQuery Mobile 安裝
8 ?2 w8 d$ l U1 c& [9 R/ f6 U在你的網頁中增加 jQuery Mobile" g$ D$ F; c; r9 Z$ F
1 B6 g' `6 f% X7 J% ?( Y2 o8 L7 X
你可以通過以下幾種方式將jQuery Mobile增加到你的網頁中：, x. v8 G3 D) W
) o! `; w7 A0 | 從 CDN 中加載 jQuery Mobile (推薦)
8 W2 G1 n% X Z1 w. J 從jQuerymobile.com 下載 jQuery Mobile庫. u' D4 ~6 H0 S0 K( y
; U% U+ n! o, @0 P4 c5 d; D% ?, w
下載 jQuery Mobile4 M* _6 x2 s k5 Y4 Q
8 M# ~. |* [( t0 a如果你想將 jQuery Mobile 放於你的主機中,你可以從 jQuerymobile.com下載該檔案。: K! ~4 p4 X3 Y: {) Y- C E
4 m4 C$ ]8 [+ Z- ^/ T L
<head>
! [/ M7 g5 s& ?1 t7 H<meta name="viewport" content="width=device-width, initial-scale=1">
. V+ O3 x% Q* n* U$ H [: x0 W9 L/ E<link rel="stylesheet" href="jquery.mobile-1.4.5.css"> s/ @9 U/ ~' w9 V
<script src="jquery.js"></script>
1 A7 ?1 J6 S- [- k<script src="jquery.mobile-1.4.5.js"></script>. ]9 [( F, D1 ?% K2 ?
</head>
5 `+ R; v/ `$ j' q6 v
$ o! g6 i$ ?7 l4 e( K/ \/ f提示： 將下載的檔案放置於與網頁同一目錄下。% [0 o, u6 u3 u( A4 }4 d1 J2 c
lamp 你是否想知道為什麼在 <script> 標籤中 沒有插入 type="text/javascript" ?
" _' ]: L+ Y, B) E6 R" }+ M ?
3 }. h/ f! X1 S7 J9 {在 HTML5 已經不需要該屬性。 JavaScript 在所有現代瀏覽器中是 HTML5 的預設腳本語言！8 \8 ?* s$ [. h5 u w
/ B2 @) ^" T& g) {$ O' x6 W) Y. ~jQuery Mobile 頁面7 C8 |3 C5 U4 F9 ?2 L, Y
開始學習 jQuery Mobile
; B7 k) X# l- Y9 R6 Z# ~實例
( K0 m/ K f& C, B. W<body>" G6 E. {* V, G, D. {1 t7 r
<div data-role="page">+ t, w# S3 b' c) e# h- y! F
* X8 T' X$ H& t0 P U
<div data-role="header">' a/ H: w! Z" U
<h1>歡迎來到我的主頁</h1>7 s. w5 W; }) q
</div>0 L$ H& j% g: y3 x- W
2 g& j8 {( m- U; H) ^
<div data-role="main" class="ui-content">* O. y+ U7 m$ A( I0 b
<p>我現在是一個移動端開發者!!</p>
& i0 H1 s) Q) t, |: }- ?$ w1 Q4 n </div>/ `! _, j: U: F
) I" a5 ]9 S; i& f
<div data-role="footer">/ L( G1 A1 }; d) r# O/ _9 W
<h1>底部文字</h1>/ s7 `& {1 }* J3 |4 R
</div>0 }8 B7 i, _- g" y/ z/ `3 ?
) Y3 M/ T/ R0 P
</div>
& X8 r1 w4 ?7 S* d- }9 Q</body>8 E% r% e6 U, |( D; i
實例解析：/ G& ?" P a1 Z9 k- W' x2 Y
! f4 k3 l3 j' {4 {* l, h6 A5 b
data-role="page" 是在瀏覽器中顯示的頁面。
9 [" f- N, P0 j5 ` [! E data-role="header" 是在頁面頂部建立的工具條 (通常用於標題或者搜尋按鈕)9 e9 s2 K! j; M% M2 H! t* ^
data-role="main" 定義了頁面的內容，比如文字， 圖片，表單，按鈕等。% \, L6 @7 y0 B2 S4 ` E+ z
"ui-content" 類用於在頁面增加內邊距和外邊距。& y: `- s. Z4 V' V& Y9 q+ o6 N
data-role="footer" 用於建立頁面底部工具條。
1 {' h0 c* h8 r% ] 在這些容器中你可以增加任何 HTML 元素 - 段落, 圖片, 標題, 列表等。
" w, u. B. w, F: v7 a" `8 a+ ?, g% d: d6 B4 ?" @3 j
lamp jQuery Mobile 依賴 HTML5 data-* 屬性來支援各種 UI 元素、過渡和頁面結構。不支援它們的瀏覽器將以靜默方式棄用它們。' {% b* \1 X/ q/ i7 o8 o5 N$ i8 F+ D) B
4 U& f; D6 v- [3 }在頁面中增加 jQuery Mobile
) S& x {3 A) M# D" k
9 M# x% g, V. H0 U& j; A使用 jQuery Mobile, 你可以再單個 HTML 檔案中建立多個不同的頁面。
# @ d# s% \; `- z! s9 P6 z c4 S5 c1 S, ]( q
你可以使用不同的href屬性來區分使用同一個唯一id的頁面：! _9 z) a4 g9 ^' Z; E
實例3 @8 Z+ w' T; x1 s& N
<div data-role="page" id="pageone">
& C, T- c; u' \! y <div data-role="main" class="ui-content">
6 U; ]1 W7 K; m <a href="#pagetwo">跳轉到第二個頁面</a>
2 m* r! c$ P9 o4 B" O9 R( Z1 C </div>
, c4 s) q( C5 Q</div>
4 ^7 r* h4 A& M) W# u
; Z! a3 ~* w% j9 G; r<div data-role="page" id="pagetwo">
& {, Q0 J3 z+ _; [* n+ N+ P4 c6 U <div data-role="main" class="ui-content">* C; R3 ?' p4 B7 l1 Z" x
<a href="#pageone">跳轉到第一個頁面</a>$ \. L9 Z6 Y4 _' n
</div>' c) T, L; w* i1 j0 k3 B6 F
</div>
; a( J; p* {) k6 T- N# f注意： 當web應用有大量的內容（文字，圖片，腳本等）將會嚴重影響加載時間。如果你不想使用內頁連結可以使用外部檔案：
% i9 E/ B: p4 [ i4 r" S; P+ Z; h3 x8 {7 g% B* c+ U, m+ }5 s" V
<a href="externalfile.html">訪問外部檔案</a>2 l# a7 w1 T9 Y5 h) g1 |" I
* S! s/ [+ Z' d) |- B8 t7 C頁面作為對話框使用) I3 q3 r* F6 Z* f3 m+ e7 x
2 z- w Z6 J& N" I* x對話框是用於顯示頁面內容顯示或者表單內容的輸入。
! x/ D% ]7 \7 Q4 V) |7 x2 J! e) O' e6 t/ k7 `0 y
在連結中增加data-rel="dialog"讓會員點閱連結時彈出對話框:' j9 S0 \: ?. [! A" b ]& L: q
實例
& P/ D& o4 T' Y, f: s+ e: \- I1 h<div data-role="page" id="pageone">8 q6 I/ |0 L( d4 ~. P
<div data-role="main" class="ui-content">4 _- y" B: e$ O3 r: [( y
<a href="#pagetwo">跳轉到第二個頁面</a>) y& i' w, B/ c$ b v7 E! z- V6 P
</div># i" d8 j/ e) Z4 h+ r
</div>0 Y5 i9 U0 Z( H7 n
$ x7 d4 w1 L6 I# Z3 Z# X<div data-role="page" data-dialog="true" id="pagetwo">
& F! B: N7 _, u, X8 ]$ M <div data-role="main" class="ui-content">' @. t |& J( {# n
<a href="#pageone">跳轉到第一個頁面</a>+ Y5 U' r3 K7 p9 w1 ?7 |/ O
</div>
. O% `& O2 y. w4 @: V</div> |
|
|Archiver|手機版|禁閉室|MyXNova (原 myxnova.com)
聲望
現金
存款
瀏覽推廣
註冊推廣
金幣
遊戲幣
鑽石
IP卡
狗仔卡
[資訊未更新]
發表於 2016-6-25 16:22:43
提升卡
置頂卡
沉默卡
喧囂卡
變色卡
千斤頂
顯身卡