等級：25 - 爐火純青 經驗值：0 / 244 魔法值：13402 / 13402 生命值：4%
升級
   100%
TA的每日心情 | 奮斗
9 小時前 |
|---|
簽到天數: 5428 天 [LV.Master]伴壇終老
|
馬上註冊，結交更多好友，享用更多功能，讓你輕鬆玩轉社群。
您需要 登入 才可以下載或檢視，沒有帳號？立即註冊
×
jQuery Mobile 是用於建立移動 Web 應用的前端開發框架。
% P8 o9 O/ _6 w9 J" FjQuery Mobile 可以應用於智能手機與平板電腦。
! V5 J1 y T' XjQuery Mobile 使用 HTML5 & CSS3 最小的腳本來佈局網頁。( F. m: l L+ _; E( A6 `; V
) E6 ?) D+ }4 y1 N, s什麼是 jQuery Mobile?
$ X; Q) g/ d2 D4 \! D
- M, p" f! }/ \6 R3 {, FjQuery Mobile 是針對觸屏智能手機與平板電腦的網頁開發框架。 ! v+ r" o8 y2 A
7 W' B" X5 _# v6 z M+ m) QjQuery Mobile 工作與所有主流的智能手機和平板電腦上： 4 Z t7 v4 ?, N: W% c/ \" e% u+ E
+ A4 a; D4 n5 J. i- x4 @
jQuery Mobile 構建於 jQuery 以及 jQuery UI類庫之上，如果您瞭解 jQuery，您可以很容易的學習 jQuery Mobile。 + j( r/ ]$ w" K; @0 c7 g3 Q+ T
jQuery Mobile 使用了極少的 HTML5、CSS3、JavaScript 和 AJAX 腳本代碼來完成頁面的佈局渲染。
, t, D2 R5 W: i* ~6 {) d; j
/ F; a0 J6 t- w5 j k1 x為什麼使用 jQuery Mobile?9 ?& H* |. W9 J
# S! d) m3 |: ~& n
通過使用jQuery Mobile 可以 "寫更少的代碼，做更多的事情" : 它可以通過一個靈活及簡單的方式來佈局網頁，且兼容所有移動設備。& j% |( _/ s! F# S0 r
lamp 不同設備使用了不同開發語言，jQuery Mobile可以很好的兼容不容的設備或操作系統：
: S1 q0 k" m+ V s
! [9 E" d7 x9 [8 {1 u3 v Android 和 Blackberry（黑莓） 使用JAVA語言。$ Q1 r9 K2 O$ b5 M
iOS 使用 Objective C 語言" F7 S! R/ C- Q1 V6 K/ P
Windows Phone 使用 C# 和 .net, 等。( N e: Y, T" k! O# q
$ v* D' s" i7 L4 F* G7 [
jQuery Mobile 解決了不同設備兼容的問題，因為它只使用HTML，CSS和 JavaScript，這是所有移動網絡瀏覽器的標準！
. ~" v1 _- F. }6 t! N& x4 z1 D! ~ Y
jQuery Mobile 安裝( N4 U! y: {. x
在你的網頁中增加 jQuery Mobile
8 X& z% W1 x$ b6 o2 Z. o+ B9 f
, K, t" b4 C l# B3 X$ i你可以通過以下幾種方式將jQuery Mobile增加到你的網頁中：
8 B, |2 }& t, c( m j! K1 f; j: M, d. H2 w6 H4 W. h
從 CDN 中加載 jQuery Mobile (推薦)
- T- U7 K0 @, x- M% G1 w 從jQuerymobile.com 下載 jQuery Mobile庫9 x }* Z. A& k& ] e- u
6 o4 J, k F3 ]& r2 T下載 jQuery Mobile
. `) e2 E! ]! k! d# g. F. v
0 F _# i8 @% ~( ]如果你想將 jQuery Mobile 放於你的主機中,你可以從 jQuerymobile.com下載該檔案。
* x4 @* E" u+ `9 E$ r( ]
, T% V8 K/ b' K/ A% I! Y* u- Z# z1 E<head>1 U1 W7 o* | y( F8 L; ^
<meta name="viewport" content="width=device-width, initial-scale=1">
1 j- b& m- b% G2 b+ `<link rel="stylesheet" href="jquery.mobile-1.4.5.css">( h7 v/ H# O+ _+ x& X5 R2 B3 Q- N# u
<script src="jquery.js"></script>
; H* _! P* \& u7 u+ ]/ d<script src="jquery.mobile-1.4.5.js"></script>
5 I/ i" K$ h# j& W</head>& J! }2 {* c( _4 R& q) `5 _
2 W5 e1 }' t2 P' T/ U+ ~) q0 A提示： 將下載的檔案放置於與網頁同一目錄下。
4 z2 k* F* t t1 j- `) Ylamp 你是否想知道為什麼在 <script> 標籤中 沒有插入 type="text/javascript" ? u7 q; u1 p5 i+ o# f
. M( v0 o, D: d8 v G3 z在 HTML5 已經不需要該屬性。 JavaScript 在所有現代瀏覽器中是 HTML5 的預設腳本語言！
. o+ e# J/ r+ h
: p/ ]% Y$ T8 D W6 n; pjQuery Mobile 頁面, {" e1 ]6 f" {( `* ^# R! Y" g$ p
開始學習 jQuery Mobile; X& S; |, s* Z/ V2 k* _
實例
9 ]. D3 J( ~9 p+ n# }7 P<body>& i/ g* H' K: k% j% y
<div data-role="page">
' [: ]# o! s# T7 B
8 r0 t( q# L" S- P6 |8 y <div data-role="header">" l* d5 F5 M8 |6 I
<h1>歡迎來到我的主頁</h1>" A9 J: s& t$ M7 P; j( U
</div>) n% y: e$ l S p5 e
[0 M2 |6 u& r: [* h
<div data-role="main" class="ui-content">* v# a7 g7 k# C
<p>我現在是一個移動端開發者!!</p>8 b! N" P8 m9 F
</div>. n1 x6 V V" T. ^; V0 e( W
, V" I! y% @% z9 I2 n. R, J9 u <div data-role="footer">
4 `& I$ p# _& a3 y# N <h1>底部文字</h1>
0 N7 i( C- P# p- K5 W$ Q) i) k6 y6 _7 P </div>
1 b* J. X" w7 S! N
: `! l2 c/ p5 M</div>/ M$ ^3 n/ z& P. Y0 D! f/ `. u
</body>8 y4 M' x: _, C3 n- V
實例解析：. C6 x9 L+ [' Y. C) Y2 ]
$ G' p1 B' |& ]) B: Y8 y
data-role="page" 是在瀏覽器中顯示的頁面。/ B/ l5 o+ g4 I' }/ K* e8 W4 F( I
data-role="header" 是在頁面頂部建立的工具條 (通常用於標題或者搜尋按鈕)
# B; @" U% _+ U* K; Q+ \2 U data-role="main" 定義了頁面的內容，比如文字， 圖片，表單，按鈕等。
, F4 L7 }0 r& P3 q% U; e4 B1 k/ q "ui-content" 類用於在頁面增加內邊距和外邊距。, o I, ?& {. k t
data-role="footer" 用於建立頁面底部工具條。: D% h4 e/ ~! J: `
在這些容器中你可以增加任何 HTML 元素 - 段落, 圖片, 標題, 列表等。6 h- N( z# T" x- j d9 m
\5 }. N$ G2 O0 C/ q+ y: H
lamp jQuery Mobile 依賴 HTML5 data-* 屬性來支援各種 UI 元素、過渡和頁面結構。不支援它們的瀏覽器將以靜默方式棄用它們。5 v- a L2 C5 e( S! N0 W$ |
8 ?; P4 r F) l& @) _1 \
在頁面中增加 jQuery Mobile
% k' w* f' C) y- ~ h6 Q4 a2 W2 e6 [7 q: ^& K2 Z' O3 B. [; G
使用 jQuery Mobile, 你可以再單個 HTML 檔案中建立多個不同的頁面。
+ K* T& \% Y8 n4 z& D2 A
2 w2 H+ m3 J) h9 t, q+ G! B9 j你可以使用不同的href屬性來區分使用同一個唯一id的頁面：7 ^! z" Q# t1 V. n" P# t
實例
. f2 h( M! S6 ` a, K" L1 u<div data-role="page" id="pageone">
! T* }/ ]5 ?% t* c <div data-role="main" class="ui-content">% r- Y& ]4 C* K; p% Q
<a href="#pagetwo">跳轉到第二個頁面</a>
: r( i* P, a" N1 ]4 d1 T </div>
0 E8 M! @& O! j</div>5 m+ `+ R8 |& i0 \& v5 F
1 X6 R3 ^& A0 |! n; M5 ^! X( S<div data-role="page" id="pagetwo">
0 I1 G3 [: E0 N& D9 V9 W/ y <div data-role="main" class="ui-content">8 a$ ^ f5 Z+ l3 v) B4 r; C
<a href="#pageone">跳轉到第一個頁面</a>
! }1 j/ R3 }/ Z% R </div>/ W$ p, e2 K% A9 x
</div>
( J" e, E m$ `; {5 y注意： 當web應用有大量的內容（文字，圖片，腳本等）將會嚴重影響加載時間。如果你不想使用內頁連結可以使用外部檔案：
2 q6 `2 N$ w- A% M. I: B1 m1 F' z. G/ @5 V E
<a href="externalfile.html">訪問外部檔案</a>
# J2 J* G" \/ l+ Z: r
- ^1 F# K0 v* R2 }頁面作為對話框使用
" a+ W( j, h0 U* ~2 p
_9 K, [% z/ G: J對話框是用於顯示頁面內容顯示或者表單內容的輸入。
6 `' D+ u, J* s8 a/ f% g; b; Y' J, e6 Y5 ^
在連結中增加data-rel="dialog"讓會員點閱連結時彈出對話框:3 o: D2 q) }9 n# @( R9 Y
實例; s! B4 v. u" @- @
<div data-role="page" id="pageone">
# | D; l: P$ A- C, `8 `8 B# l( I <div data-role="main" class="ui-content">9 ]: S! E# P4 I; ]9 Z* |
<a href="#pagetwo">跳轉到第二個頁面</a>2 r8 o" D, a _& j2 }- Q# D
</div>' E& Q: v: U1 s7 x: A
</div>
& S1 D8 h9 q4 T \; D
* {5 Z& G7 C Z+ ^<div data-role="page" data-dialog="true" id="pagetwo">
( e; L! d1 R/ ` <div data-role="main" class="ui-content">/ f q9 v2 e$ J
<a href="#pageone">跳轉到第一個頁面</a>$ K6 ^1 \% z5 F
</div>! S5 D1 D8 s7 I- j0 x
</div> |
|
|Archiver|手機版|禁閉室|MyXNova (原 myxnova.com)
聲望
現金
存款
瀏覽推廣
註冊推廣
金幣
遊戲幣
鑽石
IP卡
狗仔卡
[資訊未更新]
發表於 2016-6-25 16:22:43
提升卡
置頂卡
沉默卡
喧囂卡
變色卡
千斤頂
顯身卡