等級：25 - 爐火純青 經驗值：0 / 246 魔法值：14663 / 14663 生命值：6%
升級
   100%
TA的每日心情 | 擦汗
6 天前 |
|---|
簽到天數: 5854 天 [LV.Master]伴壇終老
|
馬上註冊，結交更多好友，享用更多功能，讓你輕鬆玩轉社群。
您需要 登入 才可以下載或檢視，沒有帳號？立即註冊
×
jQuery Mobile 是用於建立移動 Web 應用的前端開發框架。 5 M# a. F0 `3 i# H6 b- Q$ I/ \
jQuery Mobile 可以應用於智能手機與平板電腦。 ! E& F3 d" Z$ u# h
jQuery Mobile 使用 HTML5 & CSS3 最小的腳本來佈局網頁。
8 W, l0 f: f: P9 W7 i% z; e5 k$ O! i; X3 M- w
什麼是 jQuery Mobile?
4 ]# Q5 I r8 n' ~/ K. l" o3 c! D7 p7 v8 ~7 t
jQuery Mobile 是針對觸屏智能手機與平板電腦的網頁開發框架。
' M2 p* V& Z$ D) A8 s; S9 E
7 F! C6 l5 P/ P. djQuery Mobile 工作與所有主流的智能手機和平板電腦上： & A3 s" W9 S1 p, }* m9 |& A7 G4 F
2 k5 l" Z8 {$ K% w2 JjQuery Mobile 構建於 jQuery 以及 jQuery UI類庫之上，如果您瞭解 jQuery，您可以很容易的學習 jQuery Mobile。
$ a& M& d# @: X" F, n# _jQuery Mobile 使用了極少的 HTML5、CSS3、JavaScript 和 AJAX 腳本代碼來完成頁面的佈局渲染。! B: [; e& V2 t5 U& \+ V) L8 @
- a7 |. f/ ?& u7 a8 `3 C
為什麼使用 jQuery Mobile?
9 M) }/ v: k' R1 t. n2 D
8 V, w Y- r" T; i4 f通過使用jQuery Mobile 可以 "寫更少的代碼，做更多的事情" : 它可以通過一個靈活及簡單的方式來佈局網頁，且兼容所有移動設備。
, m6 f8 A9 k9 |4 m+ llamp 不同設備使用了不同開發語言，jQuery Mobile可以很好的兼容不容的設備或操作系統：7 C5 z; m5 Z/ ?, C9 X2 h
/ A/ [* o: ~" Q( r! H Android 和 Blackberry（黑莓） 使用JAVA語言。
2 j4 u- B/ N9 M4 `1 X: S iOS 使用 Objective C 語言
. [7 _8 i/ [# P1 \$ I( a, \ Windows Phone 使用 C# 和 .net, 等。! n; ~% a5 [; e8 f2 ?# d
- t* `# z0 P3 m/ C2 _# y0 pjQuery Mobile 解決了不同設備兼容的問題，因為它只使用HTML，CSS和 JavaScript，這是所有移動網絡瀏覽器的標準！' T5 g/ q# m# K0 }' \- q; e
1 I) [: Z3 ]% ~* _0 XjQuery Mobile 安裝
& Y8 ~' Y/ Y9 k$ @在你的網頁中增加 jQuery Mobile$ `- U; ~/ i& L0 g! k
9 J# A+ ? R. [8 Z你可以通過以下幾種方式將jQuery Mobile增加到你的網頁中：1 k3 h% P3 C( R- ~* r7 Q) |
# r6 \0 L" O, f/ l: }
從 CDN 中加載 jQuery Mobile (推薦)8 F. Y3 g7 G5 x, T4 S3 E
從jQuerymobile.com 下載 jQuery Mobile庫
4 T; |% q( Y- P9 b G% V5 F
( V! _7 H |. j8 D: u; h8 `% n: r下載 jQuery Mobile
) i) V; G) |& f' u$ i2 L
( C6 E& s* C: c! v* {如果你想將 jQuery Mobile 放於你的主機中,你可以從 jQuerymobile.com下載該檔案。
9 Z4 I* I0 r8 p( {0 f, }' b* Q
" V! p: |9 V9 d( {9 Q<head>0 P |" v+ w* Y% ~0 K6 D" j" i
<meta name="viewport" content="width=device-width, initial-scale=1">' x$ d" ]9 {4 @- X5 T4 D* I3 }3 d% @
<link rel="stylesheet" href="jquery.mobile-1.4.5.css">
3 D9 {( c) r1 Q. V<script src="jquery.js"></script>$ t' x7 f0 `' P4 S# a+ ^# T5 N: O& C
<script src="jquery.mobile-1.4.5.js"></script>
9 v) S$ ]" j( l</head>, j! |+ r. }1 q& c+ A" A
4 D1 a: H6 J" l0 @/ e+ d- _# Y提示： 將下載的檔案放置於與網頁同一目錄下。9 x, k7 M1 N) u3 l+ L/ I' y9 T" i
lamp 你是否想知道為什麼在 <script> 標籤中 沒有插入 type="text/javascript" ?, @2 A W, l8 D, q, @
9 M) K0 u5 y% U1 H: t
在 HTML5 已經不需要該屬性。 JavaScript 在所有現代瀏覽器中是 HTML5 的預設腳本語言！
- p+ q {( E) H
* T& E" @8 ?8 l) _8 u$ E, |jQuery Mobile 頁面
) I* I: c. { u" x1 V A! ]1 w開始學習 jQuery Mobile
) i! l4 D2 l4 w& }+ H# N實例
5 q# I. U! M2 r7 `/ g<body>, x; |: @' U j; c4 k8 ?
<div data-role="page">
, a; b% Y, X4 e2 r" I/ ~* f2 J* X( s, J8 W9 i! `1 E: |0 T
<div data-role="header">
# X$ K9 e5 C6 @- ]5 v V+ F <h1>歡迎來到我的主頁</h1>
! w% t6 l* Y/ ^1 R k1 { </div>4 C" ~1 P! J# y
: k9 L" i0 R* W( e: G0 \
<div data-role="main" class="ui-content">
8 X& {2 ^6 U0 A <p>我現在是一個移動端開發者!!</p>8 ]1 `) V p- `* V" O, W- w ]
</div>
( E- M2 x* V1 p, O1 u, N
: p5 O C7 I0 A* r) o% i1 z <div data-role="footer">( G" W( S9 T' {) N- i
<h1>底部文字</h1>/ X4 c( G7 m7 M* w8 f6 v
</div>0 P8 D' ~* j; `( c0 z8 h
+ ?( M7 }6 U$ }& P( F
</div>" e: a' K7 t. I- \6 Z
</body>' F* o- ?, M" k/ I2 c5 i5 K k* K
實例解析：. ?( g/ F, i0 ?1 U% P; ?
, @" V9 y) y6 I: L$ O0 t
data-role="page" 是在瀏覽器中顯示的頁面。5 {1 i/ W( @6 {8 f* Z" x' A
data-role="header" 是在頁面頂部建立的工具條 (通常用於標題或者搜尋按鈕)
: a' z$ q$ L0 X: C data-role="main" 定義了頁面的內容，比如文字， 圖片，表單，按鈕等。
) W6 X7 J# c/ f7 a9 r; q$ [% V9 ^ "ui-content" 類用於在頁面增加內邊距和外邊距。
9 y" `0 R1 l: Q$ P6 D) T data-role="footer" 用於建立頁面底部工具條。; G7 z/ L- K( F/ [* M
在這些容器中你可以增加任何 HTML 元素 - 段落, 圖片, 標題, 列表等。% a; o) W1 F# p% g" {. n2 p
& n, I6 T7 V2 L; d F5 S3 T7 R* f- h
lamp jQuery Mobile 依賴 HTML5 data-* 屬性來支援各種 UI 元素、過渡和頁面結構。不支援它們的瀏覽器將以靜默方式棄用它們。
% u% B' ]. B+ t m
4 b4 r% Q) K# d在頁面中增加 jQuery Mobile0 u r L5 N, K# O1 b
" i) f! S `: V使用 jQuery Mobile, 你可以再單個 HTML 檔案中建立多個不同的頁面。/ l: i# |& V- Z8 u
; W ]5 @0 h. e你可以使用不同的href屬性來區分使用同一個唯一id的頁面：: f8 E$ f! E! Q
實例+ Z; E( }$ R- P' B6 F0 z P4 `% v
<div data-role="page" id="pageone">" f# J* F7 s/ X9 x
<div data-role="main" class="ui-content">8 f$ ^; B, I2 _; i; O( ~
<a href="#pagetwo">跳轉到第二個頁面</a>
* K$ Y0 J6 z# t8 [2 F U# ` </div>! c' ?. x* @3 C ?( i8 Q8 G% `
</div>
I9 x; a: s8 B7 V1 E& G* d
. b- ]* T$ d- j' ]! F<div data-role="page" id="pagetwo">
k6 t- y" P2 ?6 n* W2 e3 W( F! B3 j$ e <div data-role="main" class="ui-content">3 W( O# w: A6 {! X v& L
<a href="#pageone">跳轉到第一個頁面</a>
}: F2 o/ [8 J* i7 G' H, Z$ g' | </div>
6 `5 o8 M2 J# F# z</div>
. ? f" v; k3 A* N* E注意： 當web應用有大量的內容（文字，圖片，腳本等）將會嚴重影響加載時間。如果你不想使用內頁連結可以使用外部檔案：
2 }" k" [7 @6 Z6 T, z, D6 M; E4 `0 e3 Q0 Q8 j
<a href="externalfile.html">訪問外部檔案</a>: R3 F! X3 q2 \# i! c" K- t) s
|, f# e+ P# O0 z# `; K" }" v
頁面作為對話框使用
# g* U0 H) e8 W W. w8 z2 z4 V L: y7 U& H( F! m6 M2 [$ E
對話框是用於顯示頁面內容顯示或者表單內容的輸入。
7 a5 o/ d) m6 ~7 G4 h& w0 H$ F
2 k- Q+ k U+ B |在連結中增加data-rel="dialog"讓會員點閱連結時彈出對話框:0 Y# o7 S5 s; ]0 h6 _
實例) ]: |' f l2 [! N
<div data-role="page" id="pageone">
* z7 _: i8 A- b4 b; x <div data-role="main" class="ui-content">
6 _- Q- j5 T; u: N) F <a href="#pagetwo">跳轉到第二個頁面</a>( r3 v7 f; z1 w+ @$ J5 {: W: ~
</div>) k8 s& S |) D
</div>
1 V) [5 u( ~9 f: `) p
* ?8 V7 [3 Z- u( t<div data-role="page" data-dialog="true" id="pagetwo">% {& Z, {7 q% g ^
<div data-role="main" class="ui-content">
* ]8 O; C0 c6 O1 R' |0 X* ~ <a href="#pageone">跳轉到第一個頁面</a>
) o: R/ j3 I8 H; |# h o# f9 t7 [ </div>
% r$ C; Y" f D" S/ N0 E6 R</div> |
|
|Archiver|手機版|禁閉室|MyXNova (原 myxnova.com)
聲望
現金
存款
瀏覽推廣
註冊推廣
金幣
遊戲幣
鑽石
IP卡
狗仔卡
[資訊未更新]
發表於 2016-6-25 16:22:43
提升卡
置頂卡
沉默卡
喧囂卡
變色卡
千斤頂
顯身卡