等級：25 - 爐火純青 經驗值：0 / 246 魔法值：15115 / 15115 生命值：6%
升級
   100%
TA的每日心情 | 奮斗
16 小時前 |
|---|
簽到天數: 6009 天 [LV.Master]伴壇終老
|
馬上註冊，結交更多好友，享用更多功能，讓你輕鬆玩轉社群。
您需要 登入 才可以下載或檢視，沒有帳號？立即註冊
×
jQuery Mobile 是用於建立移動 Web 應用的前端開發框架。
4 v7 g1 z0 ?$ g# `( rjQuery Mobile 可以應用於智能手機與平板電腦。 # }- O- \7 F8 Z9 n
jQuery Mobile 使用 HTML5 & CSS3 最小的腳本來佈局網頁。+ [6 Y9 n4 |4 S% A1 M5 {
+ G# p, A& D: Q" b/ n$ }
什麼是 jQuery Mobile? " A/ G( [3 _3 \( z
+ O5 j6 Z* N- V1 H% P* E
jQuery Mobile 是針對觸屏智能手機與平板電腦的網頁開發框架。 & j9 g1 j% o% p( u* x: \$ s- c
/ b$ e2 Q8 Y; K1 z) D, |2 YjQuery Mobile 工作與所有主流的智能手機和平板電腦上： W- f- q5 z- J7 @# Z* |+ g
1 |$ [( S( o3 x( K8 c9 O6 l: H
jQuery Mobile 構建於 jQuery 以及 jQuery UI類庫之上，如果您瞭解 jQuery，您可以很容易的學習 jQuery Mobile。 % B1 Y# F, U9 \; K! m# ]' s$ h
jQuery Mobile 使用了極少的 HTML5、CSS3、JavaScript 和 AJAX 腳本代碼來完成頁面的佈局渲染。) c6 T; w; o0 M9 F3 D
0 Z. r' ~1 T7 a. H5 Q為什麼使用 jQuery Mobile?: W( D( d+ J1 c9 X5 ^+ @
' G/ X# ?! L+ b& G; G5 f+ F0 \通過使用jQuery Mobile 可以 "寫更少的代碼，做更多的事情" : 它可以通過一個靈活及簡單的方式來佈局網頁，且兼容所有移動設備。3 T& Z! |! M/ a# Y- f; Q2 f6 `
lamp 不同設備使用了不同開發語言，jQuery Mobile可以很好的兼容不容的設備或操作系統：
% K. W+ G$ K' d. Q( r) c2 x. A, @0 A1 `! p! Y
Android 和 Blackberry（黑莓） 使用JAVA語言。
; d- L$ l0 Q2 I6 |; l4 L/ s iOS 使用 Objective C 語言4 W& t% k* I# @* M
Windows Phone 使用 C# 和 .net, 等。
W$ B& r( h% Q
# {: C) N; t l: k. k3 BjQuery Mobile 解決了不同設備兼容的問題，因為它只使用HTML，CSS和 JavaScript，這是所有移動網絡瀏覽器的標準！
# X8 S1 g* u3 L( o) @7 r" j% @; S' i+ Q6 s
jQuery Mobile 安裝. }" w# N/ n* |1 u: R% s0 N: s- ^: @( n
在你的網頁中增加 jQuery Mobile
/ m8 ]9 H/ h# e% e% n
$ {( _, K, o% c1 I. T你可以通過以下幾種方式將jQuery Mobile增加到你的網頁中：: o6 S/ e# Y0 |1 u' s4 Y9 r
2 n9 N* b7 U9 ^1 d+ V1 d$ Y' c
從 CDN 中加載 jQuery Mobile (推薦)
8 N) t; n" N# b7 M- u 從jQuerymobile.com 下載 jQuery Mobile庫1 b0 t; C7 R0 F5 w) N. U
, A+ V2 }% \& _/ M G3 q
下載 jQuery Mobile
/ u, B" z1 T# b2 @: C- _& A; y4 ^5 c) P- ]2 y& X) i$ o! ~
如果你想將 jQuery Mobile 放於你的主機中,你可以從 jQuerymobile.com下載該檔案。, I9 i( H1 \! V
; W4 K' m( _7 D* z* c
<head>
* h7 `, U& B9 H7 D. d# ~<meta name="viewport" content="width=device-width, initial-scale=1">$ x1 \+ s% d+ A1 l: ]8 |. q4 ]. `
<link rel="stylesheet" href="jquery.mobile-1.4.5.css">
/ R* d& s2 K/ u5 n<script src="jquery.js"></script>
1 M0 B8 d& N/ K1 Y<script src="jquery.mobile-1.4.5.js"></script>% S! z0 A0 W# x3 }0 |
</head>
1 P* w' U3 e/ \. X2 B* a0 Y" p: Y, W2 v: V) w7 H
提示： 將下載的檔案放置於與網頁同一目錄下。3 g" i- n) M4 q9 K+ D A/ D8 L
lamp 你是否想知道為什麼在 <script> 標籤中 沒有插入 type="text/javascript" ?/ W. M& b2 F0 Q% {0 N9 C. D
) Q% s: i9 |! ^+ q在 HTML5 已經不需要該屬性。 JavaScript 在所有現代瀏覽器中是 HTML5 的預設腳本語言！7 W& d1 E( k7 o9 l- P& e" J! {
# [& r, a7 |+ F6 m% z1 X
jQuery Mobile 頁面
" X D& u4 \* G, a2 I/ X開始學習 jQuery Mobile5 u6 r1 z h, k& o' B
實例
- j. y6 G' T% {; V<body>
8 D/ r5 U5 a! @<div data-role="page">
5 w" p: S7 q: Q
% a6 O" ]: Y/ Y2 _; M" B <div data-role="header">0 Y+ D; b- {5 V1 [) E6 D: J
<h1>歡迎來到我的主頁</h1>
( N) P F: `8 ~: m' i1 G! c </div>
4 }8 ?2 v5 u* Q" k! l/ r3 @2 n8 u" o) p/ F. L) f2 |) @
<div data-role="main" class="ui-content">
6 Q E& j( \" \$ A! k v <p>我現在是一個移動端開發者!!</p>
& t0 y+ n; v) N+ N </div>6 J6 J5 S9 B8 r5 Z
8 W8 W8 v k7 K3 }/ B( t4 Y3 O* n <div data-role="footer">+ E3 |, ]6 F$ N
<h1>底部文字</h1>9 I: @% r" w" H( B6 D8 k
</div>
# Z3 ~4 D; {/ s) ~( y3 J5 |% M- }9 x
0 M5 \- {- C* L7 F9 Y6 Z/ u</div>" \/ T1 U. y. e! ?/ Y
</body>* |7 k: d: C) D$ n! Y
實例解析：
* n+ F/ e, L& ^5 f. O
' n5 e" e" b0 c& g data-role="page" 是在瀏覽器中顯示的頁面。3 D- B8 |5 z8 m0 N* l$ }" M0 V
data-role="header" 是在頁面頂部建立的工具條 (通常用於標題或者搜尋按鈕)9 s' e4 d# e' @: ?* Q) I o& E
data-role="main" 定義了頁面的內容，比如文字， 圖片，表單，按鈕等。 A6 a0 I y9 X* Q/ q& p, k/ P9 B1 x" p
"ui-content" 類用於在頁面增加內邊距和外邊距。
6 u0 ?/ f) n% V, R8 w/ s2 ] data-role="footer" 用於建立頁面底部工具條。8 I: ]3 u& H/ n
在這些容器中你可以增加任何 HTML 元素 - 段落, 圖片, 標題, 列表等。5 J* b' n- T, g. u
5 w4 O& b* J- u: j6 Vlamp jQuery Mobile 依賴 HTML5 data-* 屬性來支援各種 UI 元素、過渡和頁面結構。不支援它們的瀏覽器將以靜默方式棄用它們。
0 E: j# U3 E* _6 w, x$ H+ s, ~/ b) b: R
在頁面中增加 jQuery Mobile4 k& j! U0 ^6 }6 `
3 @" c4 z! R8 ]1 D使用 jQuery Mobile, 你可以再單個 HTML 檔案中建立多個不同的頁面。
- r3 G- \9 c) R
8 U, N. h7 V$ q3 x你可以使用不同的href屬性來區分使用同一個唯一id的頁面：1 d3 T. a& m9 \* u; j3 G
實例
* P* x' B; F9 U<div data-role="page" id="pageone">* N, F" J: \8 }5 v' a% A
<div data-role="main" class="ui-content">. }- b2 |, T& A( r+ [
<a href="#pagetwo">跳轉到第二個頁面</a>) r1 Z" b( W5 C# r
</div>
5 ?- s0 i8 U. P/ }</div>
- G2 I8 k3 J7 H7 d( p9 K# [
7 a9 w. K% P B6 L7 x+ U' }<div data-role="page" id="pagetwo">0 w; R- X& b u
<div data-role="main" class="ui-content">* Y8 }1 F6 W1 M- T1 m- w3 U7 O
<a href="#pageone">跳轉到第一個頁面</a>* b# W: G$ t7 o
</div>
0 d8 L& ~' m& a5 @</div># P* E& D' p0 g% O: Q
注意： 當web應用有大量的內容（文字，圖片，腳本等）將會嚴重影響加載時間。如果你不想使用內頁連結可以使用外部檔案：
+ j: b n, J5 |. j+ P) E+ `, T/ {, U
<a href="externalfile.html">訪問外部檔案</a>
; H& M) a5 u" }! v* @8 G
: ~1 Q2 i" J ^7 n' {5 [) P) E* Y( e頁面作為對話框使用
9 j! s8 j5 l/ E# a/ f' l; h
& W8 I. h' h+ }& c對話框是用於顯示頁面內容顯示或者表單內容的輸入。
& ` j( A/ d* E" G; W- a* C, }" W# C9 `& K3 b
在連結中增加data-rel="dialog"讓會員點閱連結時彈出對話框:
% a, _8 r' K2 o: B0 u7 ^0 S, ~$ l實例) K4 p' f: q" x/ g; t7 `3 l7 s
<div data-role="page" id="pageone"> J- f6 ^0 {+ Z8 l0 ~2 t
<div data-role="main" class="ui-content">. y8 W2 t% a( O6 S1 E; s( i# _
<a href="#pagetwo">跳轉到第二個頁面</a>5 X; w) a' a1 z! \
</div>
! S8 v, `' U" t" m1 ^$ w( s& k</div>- o# I: a+ m3 M5 N ^' d9 c; V) H
' @; f4 P# q) U o1 a7 E<div data-role="page" data-dialog="true" id="pagetwo">
- j: x% m) h+ x. A <div data-role="main" class="ui-content">; B3 a0 S, F# m- q Z( J: C
<a href="#pageone">跳轉到第一個頁面</a>
1 G9 s3 f( W& \# z# @3 x </div>& L M2 h; E V+ m5 I. n( I
</div> |
|
|Archiver|手機版|禁閉室|MyXNova (原 myxnova.com)
聲望
現金
存款
瀏覽推廣
註冊推廣
金幣
遊戲幣
鑽石
IP卡
狗仔卡
[資訊未更新]
發表於 2016-6-25 16:22:43
提升卡
置頂卡
沉默卡
喧囂卡
變色卡
千斤頂
顯身卡