等級：25 - 爐火純青 經驗值：0 / 244 魔法值：12902 / 12902 生命值：4%
升級
   100%
TA的每日心情 | 奮斗
4 小時前 |
|---|
簽到天數: 5241 天 [LV.Master]伴壇終老
|
馬上註冊，結交更多好友，享用更多功能，讓你輕鬆玩轉社群。
您需要 登入 才可以下載或檢視，沒有帳號？立即註冊
×
jQuery Mobile 是用於建立移動 Web 應用的前端開發框架。 8 I" G4 w+ v0 g) O `+ H% q9 n) \$ R5 h
jQuery Mobile 可以應用於智能手機與平板電腦。
+ D) W# t5 l" BjQuery Mobile 使用 HTML5 & CSS3 最小的腳本來佈局網頁。/ Z: _6 _* ] w7 } e! B
+ \+ ?& q- ~/ {5 O' _- A" \, {5 x+ m: U
什麼是 jQuery Mobile?
+ Y) c$ z/ |% w u6 x% ?& W* Z" T$ ~' K- m0 ^1 J
jQuery Mobile 是針對觸屏智能手機與平板電腦的網頁開發框架。 , C1 U' d1 B( _/ {" S8 l" {
# y: ?2 k) c! d" Q0 _
jQuery Mobile 工作與所有主流的智能手機和平板電腦上：
1 X. a8 P, W4 f' g7 e) }& D. R: j$ L; j" v) T5 ^- V
jQuery Mobile 構建於 jQuery 以及 jQuery UI類庫之上，如果您瞭解 jQuery，您可以很容易的學習 jQuery Mobile。 9 L8 e1 O: T- Q, s
jQuery Mobile 使用了極少的 HTML5、CSS3、JavaScript 和 AJAX 腳本代碼來完成頁面的佈局渲染。. r6 O9 t+ r T u7 v( y
) K6 A1 }' `+ F9 e為什麼使用 jQuery Mobile?
! P2 Z6 X# a" Q, d
) _! W1 W6 |7 x7 p8 K通過使用jQuery Mobile 可以 "寫更少的代碼，做更多的事情" : 它可以通過一個靈活及簡單的方式來佈局網頁，且兼容所有移動設備。
: j) U0 D5 J4 p6 T. u5 N0 i) mlamp 不同設備使用了不同開發語言，jQuery Mobile可以很好的兼容不容的設備或操作系統：
/ D( @7 O, r2 \& q0 i+ [) z
4 q0 o+ |$ R" g0 @, c Android 和 Blackberry（黑莓） 使用JAVA語言。' i( {) Z4 t' l) X, g7 G0 Z$ R
iOS 使用 Objective C 語言
2 p, b8 j# H) R1 i# K" ] Windows Phone 使用 C# 和 .net, 等。
" r: p( h' u# [) U
+ Q+ S! P1 ~$ Z, C, _, p5 L/ H" WjQuery Mobile 解決了不同設備兼容的問題，因為它只使用HTML，CSS和 JavaScript，這是所有移動網絡瀏覽器的標準！
6 ^5 Y5 b8 q$ x
% K$ l4 a' u/ N- [( e" pjQuery Mobile 安裝
, g; T) T$ l# P在你的網頁中增加 jQuery Mobile: K0 ?* M6 G/ q* P
2 a: X' \# A6 ~9 E9 h
你可以通過以下幾種方式將jQuery Mobile增加到你的網頁中：
1 f8 F. }9 r+ v1 q) R$ G
5 Z- E+ U2 N4 f; Q7 s 從 CDN 中加載 jQuery Mobile (推薦)
" p& x4 m( }6 g; R* ^) p u 從jQuerymobile.com 下載 jQuery Mobile庫; W2 K2 i. e6 O
j3 A3 ]6 n" S8 h
下載 jQuery Mobile
% Z( O; o$ n9 B- Q& |( D+ \5 ^" i1 x& T& `; l- r! G* z
如果你想將 jQuery Mobile 放於你的主機中,你可以從 jQuerymobile.com下載該檔案。
6 R8 ?+ c7 m; `( g. S' ]/ Y8 ^( t' I; D! d- ~
<head>
' D5 H% ^3 E- K# R- A# L<meta name="viewport" content="width=device-width, initial-scale=1">0 P/ Y$ w8 g- z
<link rel="stylesheet" href="jquery.mobile-1.4.5.css">
$ @% v" C3 E, x<script src="jquery.js"></script>
# f% f$ [, l# g! Q5 C8 X& E<script src="jquery.mobile-1.4.5.js"></script>
1 _, [& l {' [</head>
- R2 A' Y8 @+ K8 a8 j0 K/ o$ w1 d' f% ^$ `. k7 d8 P+ I/ e* f( _+ M
提示： 將下載的檔案放置於與網頁同一目錄下。2 j7 M( T: F* n2 {. y
lamp 你是否想知道為什麼在 <script> 標籤中 沒有插入 type="text/javascript" ?
. d2 M+ G1 w3 S7 ^& k1 W/ v6 T B8 z
# K P- ]! ~: j5 s+ s# a在 HTML5 已經不需要該屬性。 JavaScript 在所有現代瀏覽器中是 HTML5 的預設腳本語言！
* V: i) v0 b1 n9 u3 N
5 t" i$ ]) J0 Q( U* mjQuery Mobile 頁面
' Z3 N( n4 ]/ x' E7 t開始學習 jQuery Mobile
1 E: a5 H3 V2 d, h* K4 O7 n實例
1 \4 y! V- r+ o' X9 s. }<body>3 d% z, h. W6 {+ x8 _
<div data-role="page">
. \7 @/ }, c7 u
5 P4 z. F; P. z0 O0 K& P0 S5 g* v <div data-role="header">& U4 [, W9 q% P4 C& q' v3 b# P' n
<h1>歡迎來到我的主頁</h1>. z" u; w" F5 P3 m9 u
</div>
+ o5 ]- I; b1 q8 ?7 ^) Q+ G# x
g) V g( v* c1 M$ d <div data-role="main" class="ui-content">
8 J+ Y4 b) @7 O! ]/ b/ C7 d <p>我現在是一個移動端開發者!!</p>
% J5 ^/ n* _# s4 n" e. ? </div>
$ B% B( C; c$ F1 N: z" v
0 H" ?1 L" T" q. ]2 U <div data-role="footer">: b! `7 [2 x5 E/ l
<h1>底部文字</h1>
, }2 H/ Z: @- N. | </div>0 e6 w T9 A+ v# f, S
% f# S9 q2 z( |1 S; g) c" ~</div>: @( Z+ E' b: ~+ Q
</body>
# A3 R# S! D3 t* m q8 [實例解析：
# s! M N# }; T0 x, _
7 E; z, b% h \0 b2 e data-role="page" 是在瀏覽器中顯示的頁面。8 h5 s% b+ h% ?0 p7 A# q( `
data-role="header" 是在頁面頂部建立的工具條 (通常用於標題或者搜尋按鈕)
6 H/ w) h/ @$ v+ [ data-role="main" 定義了頁面的內容，比如文字， 圖片，表單，按鈕等。
3 u% T" C# ^! G6 e6 l4 l "ui-content" 類用於在頁面增加內邊距和外邊距。
; Q2 F3 O+ j+ T+ e y# D4 u data-role="footer" 用於建立頁面底部工具條。
8 F3 Z/ K+ F1 A; t3 ?; t/ @* b4 a 在這些容器中你可以增加任何 HTML 元素 - 段落, 圖片, 標題, 列表等。
: X5 o6 k1 T5 H. t* V; ^% p- i: y" w G% C D9 g
lamp jQuery Mobile 依賴 HTML5 data-* 屬性來支援各種 UI 元素、過渡和頁面結構。不支援它們的瀏覽器將以靜默方式棄用它們。
8 K/ }- Q9 W6 u, K0 L# T' z T( S1 J+ @
在頁面中增加 jQuery Mobile; y/ B- X! v6 C- i4 u7 y0 Z
+ q* I" y8 h7 z) F& l& `3 R使用 jQuery Mobile, 你可以再單個 HTML 檔案中建立多個不同的頁面。
! E- b- s* \5 N$ o7 X) O Y- m0 B. V& F; K/ r; {# u
你可以使用不同的href屬性來區分使用同一個唯一id的頁面：
) i: v) y! D7 h, T實例
+ e7 E# m; U: V7 T<div data-role="page" id="pageone">
" Y, _9 V" z+ W2 `; ^) j <div data-role="main" class="ui-content">! j. N5 R! k0 d1 z( R6 D
<a href="#pagetwo">跳轉到第二個頁面</a>! Q9 g- @- \) r0 X$ H: v* P2 m
</div>
# F7 M8 ~5 n& C% E</div>
' T2 e) g9 f1 n! d4 D( K" {$ H7 D5 L% b* T' {
<div data-role="page" id="pagetwo">, a& B9 }* Q E5 @2 a
<div data-role="main" class="ui-content">" R2 u- ~( a6 @' f9 l. U
<a href="#pageone">跳轉到第一個頁面</a>
5 J/ K4 ~ S. Y' P7 e5 ]5 m </div>2 @7 U& Z s5 D |$ K% O
</div>
- D( ]; Q9 |2 M8 P% h注意： 當web應用有大量的內容（文字，圖片，腳本等）將會嚴重影響加載時間。如果你不想使用內頁連結可以使用外部檔案：
! T3 d8 x; W; W. K C* ^3 ? ^+ E6 k4 U/ q
<a href="externalfile.html">訪問外部檔案</a>
, z3 t+ G8 S9 [: E5 ]- V* O3 v+ e2 U" h2 S: ~, d1 J8 z, f
頁面作為對話框使用/ |1 [" D; e3 X* o& n
( A$ F: u8 R d1 ?- G, u0 t2 Z1 R) x
對話框是用於顯示頁面內容顯示或者表單內容的輸入。. ]0 E2 n- m+ ~$ c# X5 T; I
/ Q# p$ S. [' j& ^在連結中增加data-rel="dialog"讓會員點閱連結時彈出對話框:
% g1 @# O7 s) G" {$ d實例! d! T8 i& ]7 y3 y/ j, {
<div data-role="page" id="pageone">, x2 u$ v* p0 R, b# |! m( v7 e U
<div data-role="main" class="ui-content">
; g: F1 _' l _ <a href="#pagetwo">跳轉到第二個頁面</a>( u/ a7 w( q( P: c7 E) C8 l
</div>% `. r$ n( h5 D7 C* R: P, x
</div>" e0 E7 p) K( K$ G
: K9 ^; h/ z$ ?% M. e5 M( q<div data-role="page" data-dialog="true" id="pagetwo">5 b4 r! ^7 u& A. |: J
<div data-role="main" class="ui-content">4 `& @! @* j* e/ v# L2 i/ M2 J
<a href="#pageone">跳轉到第一個頁面</a>
h+ D! s x( }+ O5 O+ w: l </div>- U- l- l3 z1 ]) n! Y
</div> |
|
|Archiver|手機版|禁閉室|MyXNova (原 myxnova.com)
聲望
現金
存款
瀏覽推廣
註冊推廣
金幣
遊戲幣
鑽石
IP卡
狗仔卡
[資訊未更新]
發表於 2016-6-25 16:22:43
提升卡
置頂卡
沉默卡
喧囂卡
變色卡
千斤頂
顯身卡