等級：25 - 爐火純青 經驗值：0 / 245 魔法值：14180 / 14180 生命值：5%
升級
   100%
TA的每日心情 | 奮斗
1 小時前 |
|---|
簽到天數: 5710 天 [LV.Master]伴壇終老
|
馬上註冊，結交更多好友，享用更多功能，讓你輕鬆玩轉社群。
您需要 登入 才可以下載或檢視，沒有帳號？立即註冊
×
jQuery Mobile 是用於建立移動 Web 應用的前端開發框架。
' f" B0 l: K6 I5 DjQuery Mobile 可以應用於智能手機與平板電腦。 * i- O' P' e/ \% a$ R2 v
jQuery Mobile 使用 HTML5 & CSS3 最小的腳本來佈局網頁。
3 n J% s' S: \- ]0 R# n2 A' A3 V2 ]3 a0 x
什麼是 jQuery Mobile?
" D; p# _! X8 ~1 l" x* k, P7 r, K$ ~3 h! F4 M v9 `9 D
jQuery Mobile 是針對觸屏智能手機與平板電腦的網頁開發框架。 2 [5 Q Z8 T( K+ j1 x6 @( o
, r! b% g2 w) c- ?5 H
jQuery Mobile 工作與所有主流的智能手機和平板電腦上：
' N0 c: Z# ~. O! B9 b1 y- @# i! n+ P4 S2 m/ b: E d* b
jQuery Mobile 構建於 jQuery 以及 jQuery UI類庫之上，如果您瞭解 jQuery，您可以很容易的學習 jQuery Mobile。
; D3 d2 |4 Q/ ^6 X$ rjQuery Mobile 使用了極少的 HTML5、CSS3、JavaScript 和 AJAX 腳本代碼來完成頁面的佈局渲染。
! q1 ~ D! _+ d4 w" H% L0 D
( {6 Y y! E' l2 ~& ^: {為什麼使用 jQuery Mobile?! ?! _3 P2 L* F* `1 B+ g
+ c, z# @. \% X3 `6 b% Y( n* M通過使用jQuery Mobile 可以 "寫更少的代碼，做更多的事情" : 它可以通過一個靈活及簡單的方式來佈局網頁，且兼容所有移動設備。
' [( n4 n' R5 @$ `# p# ]% _lamp 不同設備使用了不同開發語言，jQuery Mobile可以很好的兼容不容的設備或操作系統：
3 v7 `2 p" {' B% f; {5 i2 H& K. Q7 B+ |
Android 和 Blackberry（黑莓） 使用JAVA語言。
; S) S. L2 Z. H: E iOS 使用 Objective C 語言
$ \- |" z6 J6 |/ b; A Windows Phone 使用 C# 和 .net, 等。
# C& `( I8 i4 @, j$ F
6 a) v2 j* X& U: ajQuery Mobile 解決了不同設備兼容的問題，因為它只使用HTML，CSS和 JavaScript，這是所有移動網絡瀏覽器的標準！
9 ]# j: o" D2 B( v, D) {$ e3 e# ]7 m* @
jQuery Mobile 安裝
& ^) @" Y2 u; Q) \/ I ~+ `在你的網頁中增加 jQuery Mobile1 m1 Y9 j9 ?0 W* O: y5 F
( c+ N/ B3 u8 j) G/ z% {! c你可以通過以下幾種方式將jQuery Mobile增加到你的網頁中：% `$ D+ a/ q/ b& S4 h* d" l$ l3 |
! R0 f6 G& [$ J- o5 S5 ?
從 CDN 中加載 jQuery Mobile (推薦)$ Q6 m) f( V! n6 i5 Y# i
從jQuerymobile.com 下載 jQuery Mobile庫
. b3 Y& ~5 F9 O7 `- Y
) L1 U: b9 J& c5 c' S下載 jQuery Mobile% o2 O* G5 D: f% ]' E: I0 J: z
3 N% C- E3 `2 R如果你想將 jQuery Mobile 放於你的主機中,你可以從 jQuerymobile.com下載該檔案。% e* X: m" X: _5 F. Z1 ?
/ o# X0 {, g4 ?$ E7 w- R* w) |! ]* R
<head>! X& Y* ], t9 X) f$ c! C- [# I5 s# _
<meta name="viewport" content="width=device-width, initial-scale=1">2 m4 [. D! X3 \! x0 s
<link rel="stylesheet" href="jquery.mobile-1.4.5.css">2 c& Y+ Q2 Y4 w* @0 V* `: k- v$ o
<script src="jquery.js"></script>
& m( P; H2 ]" B8 m+ A<script src="jquery.mobile-1.4.5.js"></script>, [5 A1 i, H$ _
</head>
1 x* N; e$ t( Z* e& ~
' Y- j# Y |: Z7 s) z& o7 @% h7 j! x提示： 將下載的檔案放置於與網頁同一目錄下。
( O" z6 r: |. D- ulamp 你是否想知道為什麼在 <script> 標籤中 沒有插入 type="text/javascript" ?
, A f; a( [( E9 @' t9 L0 x9 r3 N+ I( m: Q, p: |
在 HTML5 已經不需要該屬性。 JavaScript 在所有現代瀏覽器中是 HTML5 的預設腳本語言！, q) f! e, O1 c
9 A9 T/ g3 ~: }4 c* q$ D$ ]
jQuery Mobile 頁面. q3 {- z' o- D8 `+ @, j; ^# ^: P, h
開始學習 jQuery Mobile
. n. P' @1 q: z4 z5 r實例
' J& x. V5 D9 P0 ?: s7 ]<body>
( y5 w. L$ B- z8 U5 H<div data-role="page">
% @2 W4 _+ \( q! w+ g9 f6 Z M r6 v! v6 q1 W& [3 h5 E9 c
<div data-role="header">
6 a8 c( B7 d/ p/ X2 T4 M3 | <h1>歡迎來到我的主頁</h1>
" B+ ^9 Y2 x. r' K4 x </div>
0 }2 w. [& u- _, g' x/ H( Q
' Y% k4 z [; C& `) M+ j+ D <div data-role="main" class="ui-content">
/ i3 i1 J6 @) j+ }8 Q1 `& G0 s <p>我現在是一個移動端開發者!!</p>' X, t+ R+ l' X
</div>
' R$ L$ _8 b0 c' Y2 G8 @* Q5 Z% p: R R4 _
<div data-role="footer">
) ]) h4 H: x5 \% O6 d <h1>底部文字</h1>
+ K; |5 N) w) V ?/ @" F! k </div>( {: _5 ^: _* [( t
$ P/ g" b) y( U
</div>
4 V% X" u: m9 M6 H" u( W</body>
. V# f* V# d: L4 _. c# @1 B實例解析：) r, b% _! W, M6 r
# O: ]8 J) `; i+ i- z
data-role="page" 是在瀏覽器中顯示的頁面。$ P, Q5 ^% j/ R2 t- Y3 b: ~0 f3 C3 j
data-role="header" 是在頁面頂部建立的工具條 (通常用於標題或者搜尋按鈕)2 G7 W3 z v8 Q2 H5 j
data-role="main" 定義了頁面的內容，比如文字， 圖片，表單，按鈕等。
- i* `# ~! o. J) w "ui-content" 類用於在頁面增加內邊距和外邊距。
/ @% p" y0 @8 y* C, K data-role="footer" 用於建立頁面底部工具條。4 f. z# R, i2 j" G; J$ s- R! [
在這些容器中你可以增加任何 HTML 元素 - 段落, 圖片, 標題, 列表等。
. q! d: ]! A6 ~# M/ _5 w6 j
8 G4 }& I$ H- h1 U& Q2 \4 l- ~4 Jlamp jQuery Mobile 依賴 HTML5 data-* 屬性來支援各種 UI 元素、過渡和頁面結構。不支援它們的瀏覽器將以靜默方式棄用它們。
) }9 R! J, ^1 i# t2 U% X6 v* z! k; D7 z
在頁面中增加 jQuery Mobile
, A" Q2 k; R/ z- k4 U: b9 _/ m. q
4 X/ e5 K; b: x4 G Q使用 jQuery Mobile, 你可以再單個 HTML 檔案中建立多個不同的頁面。8 ]7 @! u+ L9 m) M( v
6 M2 ]: I+ {+ x% \4 \- {# h你可以使用不同的href屬性來區分使用同一個唯一id的頁面： i$ m8 x G3 B5 W
實例
- T6 _" p0 t% l. ^<div data-role="page" id="pageone">
4 \2 j% `; q: j, T$ x3 @$ C <div data-role="main" class="ui-content">; V% k9 F2 x+ O" r+ H/ {8 B; }
<a href="#pagetwo">跳轉到第二個頁面</a>
" [4 { y" n' ^ </div>
( f) f$ E7 O! f0 T4 l</div>! ~/ \4 c1 r/ m: ] g9 t$ n
+ p1 A5 J6 J( y, M& e) u
<div data-role="page" id="pagetwo">) @/ a% t, o8 u- m1 H3 v4 V
<div data-role="main" class="ui-content">2 Q7 B- ~ S) |' c& N3 G/ {, C
<a href="#pageone">跳轉到第一個頁面</a>
9 A0 ~" P2 e( o3 |8 R \6 v </div>6 t+ B" `9 C; V4 D, s! U3 F+ ]
</div>
5 M+ j L$ y( K# K: Q0 U注意： 當web應用有大量的內容（文字，圖片，腳本等）將會嚴重影響加載時間。如果你不想使用內頁連結可以使用外部檔案：% P9 i9 B% ~/ v. F4 H2 J
0 _) u6 J M9 _7 ~; }<a href="externalfile.html">訪問外部檔案</a># X, f6 t6 O6 x2 [4 k2 @, }- |
+ F( l! Z$ J! y1 Z/ U
頁面作為對話框使用
8 y* j$ ~5 _8 ~- h
# z9 Z$ [" C8 {. S7 P+ h對話框是用於顯示頁面內容顯示或者表單內容的輸入。2 [' S. C1 P# M
5 B: j1 k# `$ e `' H3 ~在連結中增加data-rel="dialog"讓會員點閱連結時彈出對話框:" ?+ W N' `7 L" j0 `, W
實例
: h& ?' d5 W3 \ M<div data-role="page" id="pageone">2 H5 c! h! f% A1 i0 {7 r [" E- E
<div data-role="main" class="ui-content">
9 S' A( W- ^" C g' ~ j% J <a href="#pagetwo">跳轉到第二個頁面</a>! K& E! l" ~; y6 m! F4 A
</div>; d0 [& w- h2 ` F9 X5 y, D
</div>2 G1 @3 O# u8 Q
; t3 e- `9 m- s$ {3 q' r$ _4 @
<div data-role="page" data-dialog="true" id="pagetwo">
+ `) e( H9 Z/ l5 B <div data-role="main" class="ui-content">
' P) }' E3 ?% w- L <a href="#pageone">跳轉到第一個頁面</a>) ^1 Z. d' u J% }6 J3 ~6 v
</div>% a; K$ _& V8 B2 O9 C4 q
</div> |
|
|Archiver|手機版|禁閉室|MyXNova (原 myxnova.com)
聲望
現金
存款
瀏覽推廣
註冊推廣
金幣
遊戲幣
鑽石
IP卡
狗仔卡
[資訊未更新]
發表於 2016-6-25 16:22:43
提升卡
置頂卡
沉默卡
喧囂卡
變色卡
千斤頂
顯身卡