等級：25 - 爐火純青 經驗值：0 / 245 魔法值：13942 / 13942 生命值：5%
升級
   100%
TA的每日心情 | 奮斗
昨天 14:36 |
|---|
簽到天數: 5628 天 [LV.Master]伴壇終老
|
馬上註冊，結交更多好友，享用更多功能，讓你輕鬆玩轉社群。
您需要 登入 才可以下載或檢視，沒有帳號？立即註冊
×
jQuery Mobile 是用於建立移動 Web 應用的前端開發框架。
$ M: `* V0 {. p1 SjQuery Mobile 可以應用於智能手機與平板電腦。 - m& a4 _3 K* J) P
jQuery Mobile 使用 HTML5 & CSS3 最小的腳本來佈局網頁。9 T: M/ \' n- @; u* H/ k; e; w! L
! `7 D" ]$ b2 V, S什麼是 jQuery Mobile?
( ~4 b" D2 d. _& D | A
! X' j% w$ f @2 ` kjQuery Mobile 是針對觸屏智能手機與平板電腦的網頁開發框架。
3 j8 |/ Z; H% V: ~/ z* P) z& d* ~( ]1 m$ e' M- }8 a; H& N) b0 b
jQuery Mobile 工作與所有主流的智能手機和平板電腦上： 6 A8 N0 @8 s# W( R* O
% C: C7 U; K% I' u& N2 ojQuery Mobile 構建於 jQuery 以及 jQuery UI類庫之上，如果您瞭解 jQuery，您可以很容易的學習 jQuery Mobile。
2 @" A* X( G; L7 `jQuery Mobile 使用了極少的 HTML5、CSS3、JavaScript 和 AJAX 腳本代碼來完成頁面的佈局渲染。, x* w& o0 `- C/ i
& M% N& t: _( R a
為什麼使用 jQuery Mobile?
0 r3 m' P0 P J7 _5 ~- h. ] ^- `% x: }
通過使用jQuery Mobile 可以 "寫更少的代碼，做更多的事情" : 它可以通過一個靈活及簡單的方式來佈局網頁，且兼容所有移動設備。 e2 |# _3 l8 }4 j- ] v
lamp 不同設備使用了不同開發語言，jQuery Mobile可以很好的兼容不容的設備或操作系統：$ J' P# a, u: P0 X
# _% X: k2 P6 d1 P" O Android 和 Blackberry（黑莓） 使用JAVA語言。8 ^& p7 c$ x- A: E9 ~
iOS 使用 Objective C 語言
) c2 r- A9 V. r Windows Phone 使用 C# 和 .net, 等。3 ^7 d) @) z9 a1 G& V: `+ ^
4 N, v- e+ t/ F2 `9 E. M/ \
jQuery Mobile 解決了不同設備兼容的問題，因為它只使用HTML，CSS和 JavaScript，這是所有移動網絡瀏覽器的標準！9 A! R; N; g/ Q: H8 ]1 ]
3 N: k, ^' }% Q& W" @4 tjQuery Mobile 安裝
^' W7 z' I# z& D; Q1 H在你的網頁中增加 jQuery Mobile6 c' S, k6 F" ^6 r" ~9 H8 ^7 B
' g: n* \8 n* m4 z$ g8 X6 [. I你可以通過以下幾種方式將jQuery Mobile增加到你的網頁中：
: W) _$ l4 s2 E( ~7 P$ O/ M+ f0 n$ J7 J }# N& m9 Z+ z* s2 D" t" r
從 CDN 中加載 jQuery Mobile (推薦)
9 B- d& t9 Y. Y8 `% j; w$ a 從jQuerymobile.com 下載 jQuery Mobile庫
' i" A/ U. x$ Z k, t2 o5 x4 [' m* x9 {' K t
下載 jQuery Mobile1 m2 Z; R5 y7 i; `* R8 a; w. ~
. M0 K. I" \3 N4 ?# Z! t如果你想將 jQuery Mobile 放於你的主機中,你可以從 jQuerymobile.com下載該檔案。! R3 P3 J, s2 i* d) d
( [2 E( b/ |# o! z
<head>+ |3 Q' p- a$ h: [: R, {
<meta name="viewport" content="width=device-width, initial-scale=1">
! |/ i% ?/ q( L# g! a% H<link rel="stylesheet" href="jquery.mobile-1.4.5.css">( @; m6 {# g/ H* `, t
<script src="jquery.js"></script>
$ s2 A% {4 J0 [9 ]$ `* G<script src="jquery.mobile-1.4.5.js"></script>
9 o4 x6 f( ~ y+ u$ ?$ X; Q8 E</head>1 [ W( y8 A# H ~
2 G& j' D1 R' P! e6 n+ w; r, [
提示： 將下載的檔案放置於與網頁同一目錄下。
# w# C7 y) ~5 rlamp 你是否想知道為什麼在 <script> 標籤中 沒有插入 type="text/javascript" ?3 U+ z: H3 }* j6 F# L8 K. u+ ?( V9 J
3 r# f% G, D, U7 V& ]
在 HTML5 已經不需要該屬性。 JavaScript 在所有現代瀏覽器中是 HTML5 的預設腳本語言！
3 c, K+ e2 [/ S% a! }. w. \/ d: o( q, B8 D" n' I9 f
jQuery Mobile 頁面
. {, s& s& n' K! y開始學習 jQuery Mobile4 b& s+ u t8 x6 l, v
實例
8 G( w4 m9 ?; C. {% a' n( j6 f<body>+ r2 {; m! Y0 s5 f# W
<div data-role="page">2 u( L9 }; ] X! \: o6 ~; ?
1 r2 e5 V# U4 e1 \$ J4 B I+ _' @ <div data-role="header">
) u6 o* ]5 P( a( ?2 L/ K <h1>歡迎來到我的主頁</h1>" N- p( B, j, l5 l9 w
</div>
, F, I0 W1 S: W. ~
4 z5 s0 [( W( {8 N/ j9 T5 P6 a <div data-role="main" class="ui-content">& [% l8 Q; Q& U9 O; v1 y3 W$ I9 @2 p
<p>我現在是一個移動端開發者!!</p>
% ^3 w) D: m5 p/ f$ y1 ] </div>
1 _" Y; _! @& j4 f) x, c$ O
! i" `8 Z, Y, c$ B' | <div data-role="footer">
* R/ p5 H6 Z: `* T <h1>底部文字</h1># z k+ k% Q8 k0 f+ X
</div>
4 u0 z! x2 y; Q3 o/ p- A3 t$ }4 f) p% s( J
</div># B. L6 t4 F* [7 y1 v9 [" U( g$ {6 e
</body>
2 ^- \# Z" P* x" _- d2 }* w Z實例解析：, C& m7 }* E3 T
) W$ P5 @. Q6 D4 N E9 L
data-role="page" 是在瀏覽器中顯示的頁面。
3 }2 J- c% }- e6 I& H0 F" w data-role="header" 是在頁面頂部建立的工具條 (通常用於標題或者搜尋按鈕)/ @% v/ s0 l: s* U
data-role="main" 定義了頁面的內容，比如文字， 圖片，表單，按鈕等。
" {7 f# @) r" a7 q3 x' M- c "ui-content" 類用於在頁面增加內邊距和外邊距。
0 s2 w& i2 n) I$ B data-role="footer" 用於建立頁面底部工具條。% o5 R9 y# ]) Q' W0 F
在這些容器中你可以增加任何 HTML 元素 - 段落, 圖片, 標題, 列表等。2 {" l( J9 N: N7 U
6 w( E8 K- T5 K- m0 F: g
lamp jQuery Mobile 依賴 HTML5 data-* 屬性來支援各種 UI 元素、過渡和頁面結構。不支援它們的瀏覽器將以靜默方式棄用它們。
* A( G! A. X/ [0 n
. Y3 }. H$ C6 @! ]" G7 O6 Y2 {在頁面中增加 jQuery Mobile) A) A& z! m5 j. [7 `* x" D" H1 h
r& h* N) h: E8 ~ Y+ I使用 jQuery Mobile, 你可以再單個 HTML 檔案中建立多個不同的頁面。" S$ [: [/ e- _8 h: O( ~0 h! Z7 x7 i" q
2 V4 a: F, g& I6 o
你可以使用不同的href屬性來區分使用同一個唯一id的頁面：
+ W u: H g! r- u實例
, N; W I/ }6 R \4 `* K<div data-role="page" id="pageone">9 A# Z( ^$ U+ J4 ?8 `7 M# ~
<div data-role="main" class="ui-content">
& a# @9 a% W: L7 l6 j7 z% f <a href="#pagetwo">跳轉到第二個頁面</a>
8 j3 a1 ]& Y2 Z8 [ x </div>, Z& j/ B# I9 c' {/ |6 b% T+ J+ O
</div>. z' u$ Y2 x# _/ _5 G+ U, O
# x7 O/ p( t$ N<div data-role="page" id="pagetwo">6 K. M, b, i5 c9 ^7 S8 \9 j: p
<div data-role="main" class="ui-content">
$ D, Z9 C8 k, n: a' x0 X/ ]7 t <a href="#pageone">跳轉到第一個頁面</a>* G8 D! h1 r4 u2 F6 R' H, e& U0 h
</div>; m) ^8 M& q0 I* Q
</div>8 [; t7 O8 W! e/ p: @3 Z* U
注意： 當web應用有大量的內容（文字，圖片，腳本等）將會嚴重影響加載時間。如果你不想使用內頁連結可以使用外部檔案：# t: H" n$ n. i9 r! l
! ?* A# y; ]$ ?1 _6 d5 ^<a href="externalfile.html">訪問外部檔案</a>
7 y; J _! u: i% J6 q. F# n/ W I4 F/ E; N. _4 {, k) g( X1 f
頁面作為對話框使用
1 x/ {5 r) {# G1 o9 H3 u
! b2 H- G) n8 C9 T6 A5 H' i對話框是用於顯示頁面內容顯示或者表單內容的輸入。+ m+ X" Y# N3 p4 o5 A
& u% ]& d2 v2 k
在連結中增加data-rel="dialog"讓會員點閱連結時彈出對話框: C* E5 m+ q8 }, c' V& b7 C6 k9 b
實例" k. i. @& }- h' U1 j; V: b
<div data-role="page" id="pageone">/ W: x: u" p, }/ D0 [4 D' M, O! J
<div data-role="main" class="ui-content">9 ~, J, t# M W. G) L$ `
<a href="#pagetwo">跳轉到第二個頁面</a>7 u3 ?) B, h' u8 r* M/ {
</div>
( x. p! q2 b8 f$ P$ ]1 M: h+ a- z</div>/ c ]8 Z( ]. e' O0 K
- j1 v( r. b% \<div data-role="page" data-dialog="true" id="pagetwo">
3 l. a& s" Z% f: G <div data-role="main" class="ui-content">* }1 b8 p. J7 W7 i
<a href="#pageone">跳轉到第一個頁面</a>
7 L' }2 v% i6 _2 x" {2 [ </div>
1 C. `- M) k5 g" Y5 ?3 G</div> |
|
|Archiver|手機版|禁閉室|MyXNova (原 myxnova.com)
聲望
現金
存款
瀏覽推廣
註冊推廣
金幣
遊戲幣
鑽石
IP卡
狗仔卡
[資訊未更新]
發表於 2016-6-25 16:22:43
提升卡
置頂卡
沉默卡
喧囂卡
變色卡
千斤頂
顯身卡