等級：25 - 爐火純青 經驗值：0 / 246 魔法值：15117 / 15117 生命值：6%
升級
   100%
TA的每日心情 | 奮斗
7 小時前 |
|---|
簽到天數: 6010 天 [LV.Master]伴壇終老
|
馬上註冊，結交更多好友，享用更多功能，讓你輕鬆玩轉社群。
您需要 登入 才可以下載或檢視，沒有帳號？立即註冊
×
jQuery Mobile 是用於建立移動 Web 應用的前端開發框架。 / `( p8 b/ ?1 a6 |+ J0 G8 _
jQuery Mobile 可以應用於智能手機與平板電腦。
/ R$ [$ x3 u4 b1 g) r8 k' y RjQuery Mobile 使用 HTML5 & CSS3 最小的腳本來佈局網頁。
3 }5 R! X3 j# w# w; z' ?1 G' G) ^8 X4 W3 f! B; }4 D, x
什麼是 jQuery Mobile? " |1 J; `4 V4 K. @' s+ q! x9 Q
' b' Q' ~% I+ C" n6 l* Z% I3 m! E6 F+ }
jQuery Mobile 是針對觸屏智能手機與平板電腦的網頁開發框架。
8 T0 { H; e$ o! P2 w
3 i" b8 V9 w# |& RjQuery Mobile 工作與所有主流的智能手機和平板電腦上：
U/ }) C2 `. v# A, f- x6 ^5 u% ]/ j9 p. w% j
jQuery Mobile 構建於 jQuery 以及 jQuery UI類庫之上，如果您瞭解 jQuery，您可以很容易的學習 jQuery Mobile。
9 }9 L" z7 D$ E* T9 Y9 ojQuery Mobile 使用了極少的 HTML5、CSS3、JavaScript 和 AJAX 腳本代碼來完成頁面的佈局渲染。
/ L! j) _: Y) W9 Y6 H( Z" `$ {# K; g9 [+ l
為什麼使用 jQuery Mobile?% X- t% U' R. K
! x! b( T. v& ]! q+ Q& _通過使用jQuery Mobile 可以 "寫更少的代碼，做更多的事情" : 它可以通過一個靈活及簡單的方式來佈局網頁，且兼容所有移動設備。
9 |; H& A7 J; S1 qlamp 不同設備使用了不同開發語言，jQuery Mobile可以很好的兼容不容的設備或操作系統：" \0 e' z7 E( ~, f" v5 X/ v" T; O
: `- @3 c, ?, Z
Android 和 Blackberry（黑莓） 使用JAVA語言。
! v& \3 p5 U6 L) y iOS 使用 Objective C 語言
, b: \3 {3 j/ r: d Windows Phone 使用 C# 和 .net, 等。2 ~8 u+ p# w1 b9 B- z" o2 U
+ Y/ w9 P* g9 f) `4 x
jQuery Mobile 解決了不同設備兼容的問題，因為它只使用HTML，CSS和 JavaScript，這是所有移動網絡瀏覽器的標準！
3 e3 F2 I1 ?, L J2 X# A J* I6 r- Z$ i% r
jQuery Mobile 安裝8 v8 z) Z; {9 C& E- g. C
在你的網頁中增加 jQuery Mobile
; p" j) G# x) ~ p2 n" E2 X& @6 I9 K; i2 |* Z, F
你可以通過以下幾種方式將jQuery Mobile增加到你的網頁中：6 p5 c; B' `. |0 d+ E& k
: c+ o/ l5 @5 g8 s$ L" K: O2 l2 } 從 CDN 中加載 jQuery Mobile (推薦)- b8 {7 v9 S2 p1 q7 [& }$ D
從jQuerymobile.com 下載 jQuery Mobile庫
0 \7 T- m8 ]# t. Y: e& h% |. e: ~# m) ?. O, \# d+ L
下載 jQuery Mobile
: K2 \, c9 J' r3 Z
5 f! O2 ^" |7 O J! a. n( U$ K* W, j如果你想將 jQuery Mobile 放於你的主機中,你可以從 jQuerymobile.com下載該檔案。
( P2 m) ]* _# Q6 t9 D& Z" e; l( f5 L( r6 N2 Z/ t. t# c* }# `
<head>( [8 K; @1 U* C1 @
<meta name="viewport" content="width=device-width, initial-scale=1">, h/ t9 L3 e: k5 W
<link rel="stylesheet" href="jquery.mobile-1.4.5.css">
: K5 }, F q% i5 E<script src="jquery.js"></script>4 ~1 b' n, ~) c% V
<script src="jquery.mobile-1.4.5.js"></script>
1 |6 P& ~6 l- U/ ` w v2 R3 W2 v" ~</head>
. K' L; y+ t5 o( V
5 y1 \2 `$ `8 c% z: Q提示： 將下載的檔案放置於與網頁同一目錄下。
! c6 m3 v E6 H- G2 blamp 你是否想知道為什麼在 <script> 標籤中 沒有插入 type="text/javascript" ?
1 N! e& E7 f. k! W8 i- B2 T
& z/ i1 t+ S4 t5 f6 L2 W在 HTML5 已經不需要該屬性。 JavaScript 在所有現代瀏覽器中是 HTML5 的預設腳本語言！
( G* ?7 n3 n0 T9 a& @2 |, [' z- A) O
" P/ c& n8 H# j0 `0 I1 TjQuery Mobile 頁面
3 Q& A6 [8 L! i$ G開始學習 jQuery Mobile& [! M$ n0 Y2 {$ _' x
實例
( O. P! X# h4 e3 Q<body>% P- }+ O) Z5 H2 }3 K
<div data-role="page">' w/ b8 D3 y& b5 _
T7 R/ F, N( w5 Q# Q <div data-role="header">
V1 M5 W2 z4 a: `, [( x <h1>歡迎來到我的主頁</h1>. w) e6 e: G9 v1 l! x" B' r/ L
</div>! t @* y, f, X! a5 u' h2 n
! u% O. `0 f6 `6 _3 T3 t
<div data-role="main" class="ui-content">* g0 I# m; _* i4 E( N
<p>我現在是一個移動端開發者!!</p>+ \8 n( K& c8 ]4 O
</div>
1 z9 U0 w5 L$ @( A# K+ K- `# @9 A/ Y& K
<div data-role="footer">; X- {, }) u" U, r% q& B# U% O
<h1>底部文字</h1>/ o* X4 ~9 k) O2 \$ D( b
</div>
: _4 N. v) Z5 R5 a) Z2 ]0 P3 I1 `2 ]& J B0 B y# T, A* R
</div>
9 W7 `, d$ H F2 ]- ~9 H! [</body>! R# J! R( P# I( W4 [8 F4 ^) Y: w
實例解析：$ P3 t: G/ N( Y! o& D
6 g2 Q/ o+ @" V$ E data-role="page" 是在瀏覽器中顯示的頁面。: ~1 V/ X2 d, c% |9 z- G4 Z! k
data-role="header" 是在頁面頂部建立的工具條 (通常用於標題或者搜尋按鈕)
- ^5 l) X! [! |8 u9 Y' N& n9 J2 Z1 ^ data-role="main" 定義了頁面的內容，比如文字， 圖片，表單，按鈕等。
$ Y% b) a! C& \* u- X5 U$ ]# p "ui-content" 類用於在頁面增加內邊距和外邊距。
0 v9 U1 N4 D+ N2 Y. c8 z& P* v6 W data-role="footer" 用於建立頁面底部工具條。- a3 I3 _/ G$ D2 G8 P5 n
在這些容器中你可以增加任何 HTML 元素 - 段落, 圖片, 標題, 列表等。5 c) ] r' r2 u- U
7 B- v( ~" _. A! x, a
lamp jQuery Mobile 依賴 HTML5 data-* 屬性來支援各種 UI 元素、過渡和頁面結構。不支援它們的瀏覽器將以靜默方式棄用它們。
9 Y# N6 z8 S8 Z$ ^; Y. e7 b
7 e" w) A+ K; \: j& ~在頁面中增加 jQuery Mobile
& P# n, G/ \3 W5 F
2 |% O l8 ~9 T# X4 W# N使用 jQuery Mobile, 你可以再單個 HTML 檔案中建立多個不同的頁面。
" }+ P. N9 W+ g" N( w2 E# Z$ r$ ?9 J7 O, c% v+ ~
你可以使用不同的href屬性來區分使用同一個唯一id的頁面：6 b( @/ _: V/ L7 c# z/ H6 K
實例
$ v9 l3 N6 Y. w0 v' w4 a4 |! ?<div data-role="page" id="pageone">
& C: T4 S2 y0 Q <div data-role="main" class="ui-content">3 a/ \" A. |& z1 |6 _3 I
<a href="#pagetwo">跳轉到第二個頁面</a>
x! \# u4 v- N </div>5 v& x5 v" Z0 \+ \
</div>9 W: g: V3 l A
3 B8 g) ]3 L& }' D
<div data-role="page" id="pagetwo">
9 D. k/ Q& E h <div data-role="main" class="ui-content">
! [& e v* [% H2 T <a href="#pageone">跳轉到第一個頁面</a>9 j7 _9 L/ s& H9 E5 [
</div>. t' |# w1 y( e+ P" i
</div>
) L: Q! t8 q' T8 P注意： 當web應用有大量的內容（文字，圖片，腳本等）將會嚴重影響加載時間。如果你不想使用內頁連結可以使用外部檔案：
' z* S6 T7 |: Q3 v" e1 |% F/ U: t, {! l, P1 T& w2 t
<a href="externalfile.html">訪問外部檔案</a>7 c* s) V+ F% Z/ W
. ~' p; Q) i m/ \頁面作為對話框使用6 Y! t8 j+ Z6 d) v4 W
; A) o, C6 L3 p1 E) d& H0 p. _0 T對話框是用於顯示頁面內容顯示或者表單內容的輸入。
' Z* a( C' _, {/ j$ ~
1 w7 m' u l$ A3 ~- F) M" V$ i! M在連結中增加data-rel="dialog"讓會員點閱連結時彈出對話框:
6 P6 Y% g# G# c! n實例! u7 @- t( K9 P$ [- n6 Z
<div data-role="page" id="pageone">$ R5 Y# v8 `" k1 f- j. f$ n9 k! H
<div data-role="main" class="ui-content">
# Q ^/ p3 i, a: K% y2 u5 f4 c <a href="#pagetwo">跳轉到第二個頁面</a>
. h) G! T; A Z* _4 J% y </div># n) {2 F) f5 A+ R! M! t& G& B( ^
</div>. G* I4 Z; j. _. r8 {% F
# Z, l6 \6 `: r0 G$ E- ?: W. O% o' V
<div data-role="page" data-dialog="true" id="pagetwo">9 m$ ^5 h2 M) G1 j$ a/ V; o. I2 o
<div data-role="main" class="ui-content">
9 I4 r+ o: g' Q q: x* W) o; u <a href="#pageone">跳轉到第一個頁面</a>( Y& k3 i1 I1 r1 R; I/ [1 M2 x
</div>2 ^- o+ W! E9 Q* G& Y8 M
</div> |
|
|Archiver|手機版|禁閉室|MyXNova (原 myxnova.com)
聲望
現金
存款
瀏覽推廣
註冊推廣
金幣
遊戲幣
鑽石
IP卡
狗仔卡
[資訊未更新]
發表於 2016-6-25 16:22:43
提升卡
置頂卡
沉默卡
喧囂卡
變色卡
千斤頂
顯身卡