等級：25 - 爐火純青 經驗值：0 / 246 魔法值：14899 / 14899 生命值：6%
升級
   100%
TA的每日心情 | 奮斗
7 小時前 |
|---|
簽到天數: 5930 天 [LV.Master]伴壇終老
|
馬上註冊，結交更多好友，享用更多功能，讓你輕鬆玩轉社群。
您需要 登入 才可以下載或檢視，沒有帳號？立即註冊
×
jQuery Mobile 是用於建立移動 Web 應用的前端開發框架。
/ v |6 P; B" LjQuery Mobile 可以應用於智能手機與平板電腦。 1 Y7 O( j" }- y( S4 C" q" B( {! q
jQuery Mobile 使用 HTML5 & CSS3 最小的腳本來佈局網頁。7 t7 f- z8 y. ]$ Y, {4 c, C/ c
) F4 l* g6 N J
什麼是 jQuery Mobile?
& j3 z& c/ r3 k* L V& x
8 |( ?# e/ {: ?jQuery Mobile 是針對觸屏智能手機與平板電腦的網頁開發框架。
4 V7 y( D" f( d8 z& }( G& J; M* _/ h: a
jQuery Mobile 工作與所有主流的智能手機和平板電腦上：
( g) N1 l4 E2 ~* M+ M: S, m8 o3 z; h6 V: K
jQuery Mobile 構建於 jQuery 以及 jQuery UI類庫之上，如果您瞭解 jQuery，您可以很容易的學習 jQuery Mobile。 / W6 C2 {( e/ n3 I: ?
jQuery Mobile 使用了極少的 HTML5、CSS3、JavaScript 和 AJAX 腳本代碼來完成頁面的佈局渲染。' W+ Y: w+ @9 u! p
: v9 y: b" I" U7 D4 x+ @
為什麼使用 jQuery Mobile?( q% W2 f5 o, q
% R: e4 Q5 f; n5 Y$ [0 T
通過使用jQuery Mobile 可以 "寫更少的代碼，做更多的事情" : 它可以通過一個靈活及簡單的方式來佈局網頁，且兼容所有移動設備。
2 L$ w9 m) R/ J- Olamp 不同設備使用了不同開發語言，jQuery Mobile可以很好的兼容不容的設備或操作系統：" X" g) @/ E' p
- r4 z1 ^. ` D s. K3 a- J
Android 和 Blackberry（黑莓） 使用JAVA語言。
2 L2 p. K$ w: G/ _ iOS 使用 Objective C 語言" S; r$ f+ z% ~% K0 b
Windows Phone 使用 C# 和 .net, 等。
( g( {- I# \8 ]( x4 H
2 l+ a# n1 o- O1 jjQuery Mobile 解決了不同設備兼容的問題，因為它只使用HTML，CSS和 JavaScript，這是所有移動網絡瀏覽器的標準！
2 {( m4 ~' V4 a+ {& N
7 F+ ^' Z8 J9 ?5 p. T2 {" RjQuery Mobile 安裝
9 h# d/ a" A$ ~- k在你的網頁中增加 jQuery Mobile
3 Q( G8 Z+ Q) u4 }, |
2 B. U# m+ o4 l" K0 I# E l你可以通過以下幾種方式將jQuery Mobile增加到你的網頁中：
0 @" U" U2 y7 U, \( P# H8 Z
/ s4 K: d; p. g! A7 ]' Y 從 CDN 中加載 jQuery Mobile (推薦)
0 T8 R& g, P7 t 從jQuerymobile.com 下載 jQuery Mobile庫
3 F/ P; w3 z5 J* I+ V( w7 l' ]6 ^: T( x
下載 jQuery Mobile
; w$ B! L. a Y0 \
% J7 c( V: k: ?; v# V- Q {如果你想將 jQuery Mobile 放於你的主機中,你可以從 jQuerymobile.com下載該檔案。1 ^7 [) V- Z1 T- W8 w: }
# v9 y% [& b/ R<head>
/ W# Z/ @+ b( m9 o: B5 ^<meta name="viewport" content="width=device-width, initial-scale=1">! h! R2 b7 V ^0 {- E
<link rel="stylesheet" href="jquery.mobile-1.4.5.css">
- R$ h, L0 j8 \) C1 Z. ]4 h4 X<script src="jquery.js"></script>4 a, I$ t2 f1 w' S+ R
<script src="jquery.mobile-1.4.5.js"></script>) e8 n7 L) e+ x, _) @4 T! N/ w
</head>
" E- x' K( h2 f8 N
9 N. \$ q S6 z* r3 K: L6 j提示： 將下載的檔案放置於與網頁同一目錄下。
2 W1 L" E. d4 Q4 x% O9 R c" Q) [lamp 你是否想知道為什麼在 <script> 標籤中 沒有插入 type="text/javascript" ?
5 Y& r6 ?' X- [3 l: x6 p
8 N; @; f8 l) r3 w5 O, R在 HTML5 已經不需要該屬性。 JavaScript 在所有現代瀏覽器中是 HTML5 的預設腳本語言！2 S5 R, ^! d" t& {8 Q3 }- i
& o# ]; K# G4 njQuery Mobile 頁面
I2 O( Q7 Q* u開始學習 jQuery Mobile
4 o/ N% w2 a' w4 Q. i1 e; E實例7 @' t$ j; M* M6 N ^3 Q1 }% h! M
<body>
9 S( n/ N, V b<div data-role="page">
( L3 L8 I3 ?" k* d. ^ W3 `2 v3 g
9 k. i& P7 m1 t <div data-role="header">
4 r# J5 Q3 |4 H. a& h <h1>歡迎來到我的主頁</h1>
) ~6 u' q1 T9 e/ s" v </div># X- C, K+ m: b+ I' Q, s
1 ]" I @4 K% l% z <div data-role="main" class="ui-content">, F. R+ C, Q' ?+ t7 h- c
<p>我現在是一個移動端開發者!!</p>
3 Y# P0 o8 R2 b" o6 o$ e( S5 Z </div>
0 x+ \3 ^! N; v
9 I1 d' {! _" |; p <div data-role="footer">3 x/ a# @# q, f) y3 R2 _5 m
<h1>底部文字</h1>
& B; _; [9 S' x( z </div>
, d1 l( O0 q/ m- J4 e1 |2 m# j( ^" ~0 S
</div>
# _& _8 o, |: x2 L</body>
/ l# p, J$ [2 ^. S: O實例解析：9 d, w' f8 m" L* O2 X- P8 @, l- M- V
* y) m0 h C3 ?! y data-role="page" 是在瀏覽器中顯示的頁面。% J; ?3 o' d5 B! L) }5 P
data-role="header" 是在頁面頂部建立的工具條 (通常用於標題或者搜尋按鈕)
3 B! j5 T" ]7 j5 j! y: H' M data-role="main" 定義了頁面的內容，比如文字， 圖片，表單，按鈕等。
3 q+ U4 L. U% ] j# p "ui-content" 類用於在頁面增加內邊距和外邊距。
# l: k5 J9 o& i9 l. u/ t& j data-role="footer" 用於建立頁面底部工具條。. w# N0 d& B* J8 e
在這些容器中你可以增加任何 HTML 元素 - 段落, 圖片, 標題, 列表等。
# q) l$ S9 k0 l2 V8 x! z5 v7 o6 m& X: ]1 q
lamp jQuery Mobile 依賴 HTML5 data-* 屬性來支援各種 UI 元素、過渡和頁面結構。不支援它們的瀏覽器將以靜默方式棄用它們。$ S: ?- h A9 v, R" c! |
) L2 g( M) O1 R在頁面中增加 jQuery Mobile
" k. `9 N6 @! { |* `3 G
; O6 D" }' W* b" Q使用 jQuery Mobile, 你可以再單個 HTML 檔案中建立多個不同的頁面。
: p/ D7 Z' `. }9 a. }, `% q& U( B) Y4 ^: Y7 C {8 Z
你可以使用不同的href屬性來區分使用同一個唯一id的頁面：
7 P5 `. a! d/ g. u: h6 Y/ J0 _實例6 _4 D) e9 O5 |
<div data-role="page" id="pageone">
2 x+ f: f3 }. X8 O( Z) ~ <div data-role="main" class="ui-content">' H3 {2 T3 Z7 D. W: D
<a href="#pagetwo">跳轉到第二個頁面</a>9 B; `2 T# I [
</div>
$ g6 l. m' p# c9 A5 m# V; h" F</div>7 l5 }4 R9 p+ P; s$ x6 S
$ W# b0 t r9 M1 `. c$ j R' g' U/ u
<div data-role="page" id="pagetwo">
( M/ j- ~ S% V: \ <div data-role="main" class="ui-content"> j3 M6 Y5 T3 B, h, P& n# [/ Y
<a href="#pageone">跳轉到第一個頁面</a>
0 |- x' f' T T p! | </div>
$ d1 @) ~( w8 p1 y</div>6 y+ I. Z# D% B
注意： 當web應用有大量的內容（文字，圖片，腳本等）將會嚴重影響加載時間。如果你不想使用內頁連結可以使用外部檔案：9 z" h0 c6 o$ r0 A
5 F/ [& R9 H! Q9 N0 v2 S) ] O
<a href="externalfile.html">訪問外部檔案</a>+ U1 L" R! j3 U2 r1 g& _
, X F* L3 \: t+ ~% D5 s
頁面作為對話框使用
# F0 [2 k% i& p8 z& B( } [2 R. ^# h! i. X/ l5 t, k
對話框是用於顯示頁面內容顯示或者表單內容的輸入。
. C4 I' w% T/ ?. a: j0 ]" x
0 `+ c+ B% e6 U在連結中增加data-rel="dialog"讓會員點閱連結時彈出對話框: S8 z) {7 g: U, i. C& g9 ?% I
實例6 F# `7 Z3 R% B, [# F0 m% q
<div data-role="page" id="pageone">
& a* j, p7 e- Y/ V' P; u <div data-role="main" class="ui-content">7 m7 ]+ L E5 d; t
<a href="#pagetwo">跳轉到第二個頁面</a>: I4 i& X, b: M A3 h4 V
</div>
% m, x! |4 D2 x5 Y4 D# E</div># L$ S$ Q, U6 d% g& ~
1 [$ V% v* M. n+ ^4 b6 |' T3 c
<div data-role="page" data-dialog="true" id="pagetwo">
$ P8 q. ^* A- K4 I! z5 t <div data-role="main" class="ui-content">
: U3 N, K5 E" G5 J <a href="#pageone">跳轉到第一個頁面</a>4 H- v. F4 D+ v! @
</div>- L3 p4 ?; o3 F
</div> |
|
|Archiver|手機版|禁閉室|MyXNova (原 myxnova.com)
聲望
現金
存款
瀏覽推廣
註冊推廣
金幣
遊戲幣
鑽石
IP卡
狗仔卡
[資訊未更新]
發表於 2016-6-25 16:22:43
提升卡
置頂卡
沉默卡
喧囂卡
變色卡
千斤頂
顯身卡