等級：25 - 爐火純青 經驗值：0 / 246 魔法值：14984 / 14984 生命值：6%
升級
   100%
TA的每日心情 | 奮斗
4 小時前 |
|---|
簽到天數: 5961 天 [LV.Master]伴壇終老
|
馬上註冊，結交更多好友，享用更多功能，讓你輕鬆玩轉社群。
您需要 登入 才可以下載或檢視，沒有帳號？立即註冊
×
jQuery Mobile 是用於建立移動 Web 應用的前端開發框架。 ' e Y9 i. }- h( h) u3 f4 W; A
jQuery Mobile 可以應用於智能手機與平板電腦。
! w: d. Z1 V& Q0 b/ K |jQuery Mobile 使用 HTML5 & CSS3 最小的腳本來佈局網頁。
5 ^ A, f4 s% g# o1 g( ]$ s( ^
* T2 |: H) |$ B* D% K" Z( |/ T什麼是 jQuery Mobile? ! |! ? b, q- a" p% I
, z. d/ C) J4 ojQuery Mobile 是針對觸屏智能手機與平板電腦的網頁開發框架。
8 Q8 _" _& x6 Z5 X, j# @
0 w6 X/ {* J# B4 ]: ?5 ?jQuery Mobile 工作與所有主流的智能手機和平板電腦上： 8 }5 a; g3 T! B T& R- r- Y& o5 n8 c
3 r: I+ A# a. r9 M4 V
jQuery Mobile 構建於 jQuery 以及 jQuery UI類庫之上，如果您瞭解 jQuery，您可以很容易的學習 jQuery Mobile。
5 o- O6 n) f3 f/ h5 a/ M2 rjQuery Mobile 使用了極少的 HTML5、CSS3、JavaScript 和 AJAX 腳本代碼來完成頁面的佈局渲染。
( x+ J- t6 j0 R' M t9 W1 @: n4 @! Q
為什麼使用 jQuery Mobile?# C& x0 L% ^2 A3 L% M6 [# [
4 a) e6 D F; d3 y5 g通過使用jQuery Mobile 可以 "寫更少的代碼，做更多的事情" : 它可以通過一個靈活及簡單的方式來佈局網頁，且兼容所有移動設備。( H* Y) O" N9 n! K8 y" V# m; I( M9 w
lamp 不同設備使用了不同開發語言，jQuery Mobile可以很好的兼容不容的設備或操作系統：
& l7 R7 G6 c9 M9 r' U5 x3 W0 S- j" E
Android 和 Blackberry（黑莓） 使用JAVA語言。% h9 i" J6 Q. y
iOS 使用 Objective C 語言( P. w+ |8 p' `. L6 v3 S. h% Z& r4 D
Windows Phone 使用 C# 和 .net, 等。
8 z- N/ c( P! ?) d) f6 Y; z
( ?9 |2 C( D& W+ R8 _jQuery Mobile 解決了不同設備兼容的問題，因為它只使用HTML，CSS和 JavaScript，這是所有移動網絡瀏覽器的標準！
5 P; _$ n( f, G0 x( L
: Q4 I! K/ ~7 ]: ZjQuery Mobile 安裝
0 Z' g' v n! m+ B/ B在你的網頁中增加 jQuery Mobile
7 D5 n6 \% B8 V3 J1 o, I' \* s; V5 B
5 G5 H; y7 ~% w' r. ^" `, K* \你可以通過以下幾種方式將jQuery Mobile增加到你的網頁中：
0 O6 w8 ]+ |7 n3 |! q' A: o% m" h$ g! i' v ~
從 CDN 中加載 jQuery Mobile (推薦)
% L: V- k/ o: C1 _' a1 a( @3 C3 r; x 從jQuerymobile.com 下載 jQuery Mobile庫0 x. E g9 q [+ }, A- z
" N' L3 A0 M# ?7 V" K- g下載 jQuery Mobile; h$ B/ X* l; M4 P# p: T7 [
8 x& I: V- }& o5 [# u如果你想將 jQuery Mobile 放於你的主機中,你可以從 jQuerymobile.com下載該檔案。: U1 z1 ? o' K% \
8 V# v6 K2 ?- |% s% c<head>
/ p8 C# W2 e0 w' F<meta name="viewport" content="width=device-width, initial-scale=1"> J9 x+ D' r- `. l
<link rel="stylesheet" href="jquery.mobile-1.4.5.css">1 ^2 `) G0 V; I% `" J0 B$ ^, s
<script src="jquery.js"></script>
, B0 C+ n/ Z2 k$ W. |<script src="jquery.mobile-1.4.5.js"></script>
7 ]$ C1 t9 ~9 r% z! \1 Q, y</head>
3 a* O F' g+ O Q1 C( {
" u* }& W( U' P9 _: n提示： 將下載的檔案放置於與網頁同一目錄下。, {7 R: p& Y& A2 I2 ~- t- O& n
lamp 你是否想知道為什麼在 <script> 標籤中 沒有插入 type="text/javascript" ?4 d" P E' @# p2 ?' d3 y% p/ Y# ^ S
- V( q! ~0 a/ V/ |; M
在 HTML5 已經不需要該屬性。 JavaScript 在所有現代瀏覽器中是 HTML5 的預設腳本語言！
$ ~" ^$ r/ ]" f. f% u* G. d3 J q4 P( }- T1 ?
jQuery Mobile 頁面8 n0 Y* D- }) x
開始學習 jQuery Mobile
2 o4 M4 S) l8 t. d2 f1 @實例4 d5 k$ o2 U9 c$ z6 {. Q$ ]
<body>2 g; R M7 L. J1 n" b
<div data-role="page">
3 I- \* _6 u8 V8 d
1 c F; w8 Y0 U" g) [9 R <div data-role="header">" _/ R) F8 {) B* X9 y9 G! F
<h1>歡迎來到我的主頁</h1>' u5 B. [: o J) ]0 |/ u
</div>5 H, d' J/ v4 {# C4 S/ K
/ b0 u0 J# c/ Q/ E <div data-role="main" class="ui-content">; E# { D. D% m2 n* V6 U- X8 [4 p
<p>我現在是一個移動端開發者!!</p>
& X1 s0 f' K, N: C5 k </div>8 Y3 D4 _4 B Y' {. ]
3 n' v9 Q% ?% C5 D
<div data-role="footer">8 ]; S q y' J: @' }' F
<h1>底部文字</h1> T" R) O7 H# \$ }: w0 D9 W
</div>5 k/ }: U0 w% |! P
. H5 S3 l# P4 D( @
</div>1 c& F5 U+ U X, G
</body>; g6 X {: }6 O
實例解析：2 ^5 x E9 B# P& D) c6 N
. M7 i: k R8 R9 f2 c1 ]6 R
data-role="page" 是在瀏覽器中顯示的頁面。
( l, i* W( [0 W( W |3 H data-role="header" 是在頁面頂部建立的工具條 (通常用於標題或者搜尋按鈕)
* e3 k# w& ]% {6 t. C& c0 R) b data-role="main" 定義了頁面的內容，比如文字， 圖片，表單，按鈕等。
3 J4 p/ u9 U/ K( ^' j "ui-content" 類用於在頁面增加內邊距和外邊距。3 t. @# t( D% b% F" H' l
data-role="footer" 用於建立頁面底部工具條。6 P# G! q* @# c$ }; I
在這些容器中你可以增加任何 HTML 元素 - 段落, 圖片, 標題, 列表等。
+ f# ^* z( o3 ^9 h9 O1 {
# K; s' _6 }! J# ]2 k% b. B+ @' rlamp jQuery Mobile 依賴 HTML5 data-* 屬性來支援各種 UI 元素、過渡和頁面結構。不支援它們的瀏覽器將以靜默方式棄用它們。
' q3 `) l+ p5 U0 C+ \* T: E; h% }
在頁面中增加 jQuery Mobile8 E9 B" K, t9 q8 S2 B
! D; q( [! L x# z1 B: }
使用 jQuery Mobile, 你可以再單個 HTML 檔案中建立多個不同的頁面。' a9 P& m2 G- Y( j
" M. ^* g5 H; t, z1 T$ m9 N4 F8 Y/ H你可以使用不同的href屬性來區分使用同一個唯一id的頁面：
5 s# X" ~8 ^ T9 V$ y1 U實例
8 N3 [* O P4 ^( A) H$ ?6 M, A<div data-role="page" id="pageone">
( g' }! S, Q9 Z" g <div data-role="main" class="ui-content">. D- O6 W; Q5 c. o1 T5 [7 V/ B9 _
<a href="#pagetwo">跳轉到第二個頁面</a>
r& c+ V2 W ?0 o) Z3 R </div>0 W/ Y# P& Q: e0 @' i7 G
</div>
" e' I: G5 G: G }9 Q
" H' w8 H/ d e! r# f" b2 P<div data-role="page" id="pagetwo">
' _; U3 |. R* _: ]/ P <div data-role="main" class="ui-content">
9 d0 S- D4 o9 a# e* [2 h# \ <a href="#pageone">跳轉到第一個頁面</a>
: t( P9 w8 |& V1 c5 V' {% Z </div>
: R0 q3 x h4 s1 s1 R</div>
}4 ~5 m* o' v! R4 q- _' j* P6 B) \% [注意： 當web應用有大量的內容（文字，圖片，腳本等）將會嚴重影響加載時間。如果你不想使用內頁連結可以使用外部檔案：
; e; r" j9 I- {1 {- D+ S1 ^
% ]8 B) E. ?* v# _; A<a href="externalfile.html">訪問外部檔案</a>) s5 {5 Q B' \4 f& P" n% o
" d' Q" X1 V: J9 i7 l
頁面作為對話框使用! {) i0 u" ^. R# Q7 i1 v& k u
+ r- h* S) y" a3 }6 W% d% \! q: x6 _對話框是用於顯示頁面內容顯示或者表單內容的輸入。
# z& H0 D6 n) B- S, ?: t1 c9 h, u: A0 H$ @* m2 z" d6 A
在連結中增加data-rel="dialog"讓會員點閱連結時彈出對話框:
9 T, P4 Q) [- \* h% W, \實例8 S# E% @4 ^0 d+ K8 m+ v+ E T1 L2 D
<div data-role="page" id="pageone">
6 x, H/ \0 @: t0 Q v <div data-role="main" class="ui-content">
* N. E1 |$ Y( H7 U. H <a href="#pagetwo">跳轉到第二個頁面</a>3 C4 d0 G2 X% c; N7 k: `. p( t
</div>+ t+ o8 |/ S$ P/ G, v; Q
</div>
% G: V! ^4 X) l, `' i0 t% h+ G* A5 ~0 b1 G/ f3 I
<div data-role="page" data-dialog="true" id="pagetwo">
5 e( h7 N n( F2 u# @$ ^7 S/ E <div data-role="main" class="ui-content">
: |3 ^0 H7 j3 Y& r$ g. w8 y <a href="#pageone">跳轉到第一個頁面</a>
/ B: ^2 E1 ~0 |$ \# P' V' B6 Y m </div>8 Q; }- ~1 k! U7 k+ [4 J
</div> |
|
|Archiver|手機版|禁閉室|MyXNova (原 myxnova.com)
聲望
現金
存款
瀏覽推廣
註冊推廣
金幣
遊戲幣
鑽石
IP卡
狗仔卡
[資訊未更新]
發表於 2016-6-25 16:22:43
提升卡
置頂卡
沉默卡
喧囂卡
變色卡
千斤頂
顯身卡