等級：25 - 爐火純青 經驗值：0 / 245 魔法值：13940 / 13940 生命值：5%
升級
   100%
TA的每日心情 | 奮斗
昨天 14:52 |
|---|
簽到天數: 5627 天 [LV.Master]伴壇終老
|
馬上註冊，結交更多好友，享用更多功能，讓你輕鬆玩轉社群。
您需要 登入 才可以下載或檢視，沒有帳號？立即註冊
×
jQuery Mobile 是用於建立移動 Web 應用的前端開發框架。
( w5 ]0 h% {: a9 OjQuery Mobile 可以應用於智能手機與平板電腦。 9 ]3 I; Z0 l+ P2 C
jQuery Mobile 使用 HTML5 & CSS3 最小的腳本來佈局網頁。# L) B( S2 j; J
, `3 [) Y) ~( B' n' E/ D x+ p& X3 B
什麼是 jQuery Mobile?
# y" L8 q* I0 L; R% y3 \5 ?
! t7 t/ z- C+ m$ BjQuery Mobile 是針對觸屏智能手機與平板電腦的網頁開發框架。 # C& @& D# `' z' i1 ~
7 O$ ^" z! ~0 N( o7 l
jQuery Mobile 工作與所有主流的智能手機和平板電腦上：
0 L$ S0 @7 D! t: X
' i5 o' [% ]4 t/ ^4 g& t: P3 g- RjQuery Mobile 構建於 jQuery 以及 jQuery UI類庫之上，如果您瞭解 jQuery，您可以很容易的學習 jQuery Mobile。 + ? | O/ L) q% |1 u+ O
jQuery Mobile 使用了極少的 HTML5、CSS3、JavaScript 和 AJAX 腳本代碼來完成頁面的佈局渲染。
2 t9 g8 w6 T3 a2 W' e
0 f: ^( Z, l+ D& O為什麼使用 jQuery Mobile?7 S6 f1 M. O" w' f
8 _& p& U; W/ s通過使用jQuery Mobile 可以 "寫更少的代碼，做更多的事情" : 它可以通過一個靈活及簡單的方式來佈局網頁，且兼容所有移動設備。( d2 @* E1 W2 Z6 p( g; y: N
lamp 不同設備使用了不同開發語言，jQuery Mobile可以很好的兼容不容的設備或操作系統：1 D! t* m" O' t
. q+ c9 H# L. f. U6 o: H$ w( c Android 和 Blackberry（黑莓） 使用JAVA語言。
$ ]! }1 N9 ]2 d+ w5 B5 n8 J iOS 使用 Objective C 語言; e7 h- B# I+ k& n
Windows Phone 使用 C# 和 .net, 等。" m, }! x' e. ~* A! s2 F' g; X
6 G2 j9 W4 {- KjQuery Mobile 解決了不同設備兼容的問題，因為它只使用HTML，CSS和 JavaScript，這是所有移動網絡瀏覽器的標準！
# @6 {: }$ e% f) @/ M
0 X. l; Z9 L9 }% Z% H: \: ]jQuery Mobile 安裝# R3 C5 s0 B7 n0 j
在你的網頁中增加 jQuery Mobile
, M7 L+ K* Z6 E B7 E. {
/ ^, u3 P4 O- S8 J: d你可以通過以下幾種方式將jQuery Mobile增加到你的網頁中：
' i b7 K# m" B2 `$ l) L2 @4 t5 Q
. f3 O7 H7 Q2 G' J' V 從 CDN 中加載 jQuery Mobile (推薦)' p7 A5 Q$ n1 t2 L h7 Y
從jQuerymobile.com 下載 jQuery Mobile庫+ A' W9 C/ b4 P- y% u4 p
8 X8 R7 Y" ~+ e1 N' [1 ?下載 jQuery Mobile
% l, f S9 o+ Y$ E5 P
& X) ]1 w, t6 L1 m2 S, q如果你想將 jQuery Mobile 放於你的主機中,你可以從 jQuerymobile.com下載該檔案。3 A' M2 q9 M5 k3 K. W: P
6 r; f7 G E9 j% Z; u, `/ v
<head>4 {8 Q2 [/ J4 \! ~5 B
<meta name="viewport" content="width=device-width, initial-scale=1">/ I9 K" E: r) g0 s0 G; P
<link rel="stylesheet" href="jquery.mobile-1.4.5.css">9 V- u' s7 T$ p7 V
<script src="jquery.js"></script>
$ P8 [6 j0 x- I3 w8 h/ @<script src="jquery.mobile-1.4.5.js"></script>
- K4 y; q. I- M/ a</head>9 T3 a- i% ^1 D) }# \
' v. M+ F6 \8 }$ ^9 F/ Q" Q! ^# p! j提示： 將下載的檔案放置於與網頁同一目錄下。& _- y% b( {! e, F
lamp 你是否想知道為什麼在 <script> 標籤中 沒有插入 type="text/javascript" ?9 u0 e S" n+ T* `( u
2 v. J) `& T L
在 HTML5 已經不需要該屬性。 JavaScript 在所有現代瀏覽器中是 HTML5 的預設腳本語言！' i& T# P- k# j/ [& q
" _6 @. T! _- f
jQuery Mobile 頁面8 B$ _, w/ {% j# T
開始學習 jQuery Mobile4 P2 f8 a9 B8 |2 ~
實例 r2 z7 ~$ O2 U! \$ t" c1 k
<body>" c/ L' O( g0 S' F( q4 i7 e
<div data-role="page">/ p- ]1 W- e1 f! H" n
" I, @) U* D0 p7 z/ ], P <div data-role="header">
/ ]: a/ ^( L* I9 ^+ }2 Y @ <h1>歡迎來到我的主頁</h1>
# {- W5 q! ?+ S# x- ^' [- R" W5 e1 K8 [ </div>) q" ?! l* h! z2 w
7 Q' F- l0 L( C/ X8 t, ^
<div data-role="main" class="ui-content">4 K- ~5 i5 [" K$ I' G$ z7 m
<p>我現在是一個移動端開發者!!</p>
: q+ O2 v# J9 F: B </div>+ \' G2 u6 y# x. _2 R# a- w2 u7 j
9 k' f: Z! F1 T' B* y
<div data-role="footer">8 u1 J* p G7 J4 I5 [8 g2 x
<h1>底部文字</h1>& o3 \' Z$ E/ s k
</div>
) u- A. B2 ]6 Z# z3 C1 k* T. t4 Q8 Q+ U& @* C* z" u* t
</div># ]. U. j9 A$ G$ ~
</body>
- N( x, |3 O3 h# X/ D實例解析：8 I- m' c# P2 c- {/ f8 d- j' o
9 L6 L& _/ ~6 V9 ]$ g, Q/ m3 l4 {
data-role="page" 是在瀏覽器中顯示的頁面。. w- V# _& I6 J( v
data-role="header" 是在頁面頂部建立的工具條 (通常用於標題或者搜尋按鈕)
4 P7 F# l1 ?5 C% D9 [# Q data-role="main" 定義了頁面的內容，比如文字， 圖片，表單，按鈕等。
; w$ m+ \6 @% k" A "ui-content" 類用於在頁面增加內邊距和外邊距。
8 B# @0 N/ I% S; [ data-role="footer" 用於建立頁面底部工具條。
c* T) W+ C, P+ W$ H, Q9 T 在這些容器中你可以增加任何 HTML 元素 - 段落, 圖片, 標題, 列表等。/ x0 X& f \; q9 d r: z. ^
j! J5 _0 k$ s4 ~2 `
lamp jQuery Mobile 依賴 HTML5 data-* 屬性來支援各種 UI 元素、過渡和頁面結構。不支援它們的瀏覽器將以靜默方式棄用它們。5 j. @* W" F8 X8 f5 S
' w7 a r0 Y @) k在頁面中增加 jQuery Mobile
; v$ A Y. b4 E( |) G
% m6 q6 K( a7 f: S( X使用 jQuery Mobile, 你可以再單個 HTML 檔案中建立多個不同的頁面。$ ]. G5 c3 j1 b+ }$ k
7 z" t& ?. F( ]0 z你可以使用不同的href屬性來區分使用同一個唯一id的頁面：
; p$ x/ N' F/ _9 t8 u- V0 F4 h* @實例
$ d! |4 _! `( [+ ~1 B M<div data-role="page" id="pageone"># G. w) j9 O0 k9 _
<div data-role="main" class="ui-content">
0 W5 x3 p3 r: h9 h* W) L+ ]6 r4 q <a href="#pagetwo">跳轉到第二個頁面</a>
0 H9 M/ O. i( `- {% T </div>
% c" C& t0 X( v</div>
0 ]/ u1 q- t! \: {+ m# i1 T& X% m: W3 O" M& _3 F: E
<div data-role="page" id="pagetwo">
% y& W$ r0 O2 C# a <div data-role="main" class="ui-content">
$ C2 y: j( M2 }6 E0 R# [. s$ x <a href="#pageone">跳轉到第一個頁面</a>
H0 Z7 B9 H: V& C: I! Z/ [+ x </div>
* X8 L4 G3 Q6 R' T+ e/ Y+ l</div>
+ ]0 ]8 @% n( b注意： 當web應用有大量的內容（文字，圖片，腳本等）將會嚴重影響加載時間。如果你不想使用內頁連結可以使用外部檔案：
( G: e% D: F9 K, A$ e
' O. t1 p) F3 m( ?$ w* l/ H0 `4 r<a href="externalfile.html">訪問外部檔案</a># D: x4 }0 Y+ j5 B) s2 }
1 Q& b" L% n- ~ E! z5 r: g- w
頁面作為對話框使用
' ^. I+ @& O4 Q6 s+ w9 U$ g* E7 Z/ r
對話框是用於顯示頁面內容顯示或者表單內容的輸入。, e' w B3 a x# J
$ L; V \! r$ p: U7 I) ~, J, P* I0 S
在連結中增加data-rel="dialog"讓會員點閱連結時彈出對話框:
. i" t9 X1 |- Q5 y+ ]; u: t( [' U+ s實例- W3 l- _3 d( w* N( q( {8 i& G# r% g2 d
<div data-role="page" id="pageone">" s- B0 E/ v/ E0 q6 m! |
<div data-role="main" class="ui-content">
8 S9 p, w0 d. i1 h; p$ I% x- i <a href="#pagetwo">跳轉到第二個頁面</a>
! @* B! L) T" {0 M. I% j- N </div>, e! d& B1 N- s, `* f& t& G \" b
</div>, V8 w2 ]+ {" d: W
( i0 J9 j! t1 n/ B8 f2 V<div data-role="page" data-dialog="true" id="pagetwo">6 M# l" K/ z% v; f# Z
<div data-role="main" class="ui-content">2 E* x; J+ i5 c5 D
<a href="#pageone">跳轉到第一個頁面</a>- q4 Q* t# Z$ B9 A6 N; U/ r
</div>
; K, D5 b- V( s. b</div> |
|
|Archiver|手機版|禁閉室|MyXNova (原 myxnova.com)
聲望
現金
存款
瀏覽推廣
註冊推廣
金幣
遊戲幣
鑽石
IP卡
狗仔卡
[資訊未更新]
發表於 2016-6-25 16:22:43
提升卡
置頂卡
沉默卡
喧囂卡
變色卡
千斤頂
顯身卡