等級：25 - 爐火純青 經驗值：0 / 245 魔法值：13940 / 13940 生命值：5%
升級
   100%
TA的每日心情 | 奮斗
昨天 14:52 |
|---|
簽到天數: 5627 天 [LV.Master]伴壇終老
|
馬上註冊，結交更多好友，享用更多功能，讓你輕鬆玩轉社群。
您需要 登入 才可以下載或檢視，沒有帳號？立即註冊
×
jQuery Mobile 是用於建立移動 Web 應用的前端開發框架。 % t& w* o: M2 s
jQuery Mobile 可以應用於智能手機與平板電腦。 ) }: |2 R+ I0 x* R, s
jQuery Mobile 使用 HTML5 & CSS3 最小的腳本來佈局網頁。! o1 |3 G" v# o* @0 l; d( R
1 g, y& X. [, N. R/ ^. l
什麼是 jQuery Mobile?
6 q% o. r' Z7 b* r, E g2 u. @& t% I# H# e* V. h# a4 q$ R5 ?3 D' j" O0 ~' A
jQuery Mobile 是針對觸屏智能手機與平板電腦的網頁開發框架。 % d3 e! [9 s1 W
4 D$ l% f: c. F! e( s# ^jQuery Mobile 工作與所有主流的智能手機和平板電腦上： + E. O; h* V" |1 l4 o( p
: N, j7 s- k- ^8 UjQuery Mobile 構建於 jQuery 以及 jQuery UI類庫之上，如果您瞭解 jQuery，您可以很容易的學習 jQuery Mobile。
/ g; h/ ~; @! o% d4 rjQuery Mobile 使用了極少的 HTML5、CSS3、JavaScript 和 AJAX 腳本代碼來完成頁面的佈局渲染。
5 Y; B' q9 K3 R
4 t$ }+ s) S0 {為什麼使用 jQuery Mobile?( Y d5 d7 Q0 ?* w u% D
' k# O4 S2 K, ], G) H
通過使用jQuery Mobile 可以 "寫更少的代碼，做更多的事情" : 它可以通過一個靈活及簡單的方式來佈局網頁，且兼容所有移動設備。
c+ `% q7 F$ w% b0 L3 x8 `& q! \lamp 不同設備使用了不同開發語言，jQuery Mobile可以很好的兼容不容的設備或操作系統：8 f; B( D2 D4 b/ ~' `0 `2 C& Q" [
9 M! K% x K5 O+ t. L
Android 和 Blackberry（黑莓） 使用JAVA語言。
+ n' z J9 s8 T: {4 _5 m: N( a3 p iOS 使用 Objective C 語言
" W9 a8 }. {1 d' b( m Windows Phone 使用 C# 和 .net, 等。
4 ^1 g2 G( ~) J
' k w$ B. T, EjQuery Mobile 解決了不同設備兼容的問題，因為它只使用HTML，CSS和 JavaScript，這是所有移動網絡瀏覽器的標準！% q8 u& l) y) v7 j+ F
~" l3 E; B. R) a5 Z% k
jQuery Mobile 安裝
* P8 {: Y2 D& w6 |4 |/ X# H在你的網頁中增加 jQuery Mobile* B6 _% D, L, e H w( T. [! n
0 z1 \4 R$ n- x( q! ~' Q
你可以通過以下幾種方式將jQuery Mobile增加到你的網頁中：
+ a' c# J1 N$ k: R2 M
0 Q) Z0 G w y2 y 從 CDN 中加載 jQuery Mobile (推薦)
8 I. R5 `6 w, F 從jQuerymobile.com 下載 jQuery Mobile庫3 F- v0 x7 t& r1 ^8 d- G
# P, _6 |6 p% M' Q5 x下載 jQuery Mobile
6 t8 M% ^" R$ T& y- s2 O5 s2 W1 N6 }5 _" g- N
如果你想將 jQuery Mobile 放於你的主機中,你可以從 jQuerymobile.com下載該檔案。& y1 a9 J# K5 Y! T" ?6 ?' T
6 b/ V4 z3 ]+ }9 e! V
<head>
* q4 O+ a2 L' Z/ u, p9 u x( Y. R$ a" k<meta name="viewport" content="width=device-width, initial-scale=1">
( e u/ v, F; |4 G9 n<link rel="stylesheet" href="jquery.mobile-1.4.5.css">
0 C3 L P e# S- v<script src="jquery.js"></script>
; w; X1 P# d9 P. v7 v( ~) g' Y<script src="jquery.mobile-1.4.5.js"></script>
) a" |" A o! N2 t8 l</head>
2 U! P! p3 e0 q% u, F$ ?! C: Y% T* ]' Y8 Z+ `
提示： 將下載的檔案放置於與網頁同一目錄下。: T- l& Y% e) b5 ?; i* H3 t
lamp 你是否想知道為什麼在 <script> 標籤中 沒有插入 type="text/javascript" ?: i. p: W& z; f+ P$ j1 }; m. N
" i: e/ ^5 }" s! s* `4 n在 HTML5 已經不需要該屬性。 JavaScript 在所有現代瀏覽器中是 HTML5 的預設腳本語言！- W7 n& @) O4 ?0 U, k+ y
J( ^+ z$ u# g3 [+ C' _/ n* k
jQuery Mobile 頁面
+ Z$ _$ h6 U2 O+ t" P開始學習 jQuery Mobile$ |* g+ B; L# Y
實例6 T- K7 F9 @8 {* e. ~% k
<body>9 w, t* W- w6 ?- y
<div data-role="page">6 c& t7 ^' c. Y* f: `
! ?/ ~5 m( |* \" w t) M& O
<div data-role="header">
0 P& |* ~! G& X% O9 f, L( \( d <h1>歡迎來到我的主頁</h1>
. Z5 h/ a- s9 \9 H </div>
2 [5 I. v% f0 x. [0 E
% T6 t: q0 }+ t! `$ L3 m <div data-role="main" class="ui-content">
5 p' J6 E; m" n/ q! F% _5 o <p>我現在是一個移動端開發者!!</p>3 U1 _/ g1 A5 X4 S& k$ Y8 Z
</div>
6 b4 l4 I {( T0 |7 b2 }0 e' k( ~- c$ c1 u$ L9 \7 }( a7 |
<div data-role="footer">2 X! P* c% N% N( g! J& T/ P. Z4 G
<h1>底部文字</h1>
2 G/ N% q5 ~% |5 m9 P' o </div>/ @5 `- Q0 p* F) H. n, K
) _$ K7 s0 \# B- V
</div>
5 C0 U1 _8 m9 L% d</body>& [; L# `, Q$ \
實例解析：
' }2 ?* U" ^3 U. A( V- e6 R' a/ y/ m
data-role="page" 是在瀏覽器中顯示的頁面。
: V# V; w$ g7 w( _6 f data-role="header" 是在頁面頂部建立的工具條 (通常用於標題或者搜尋按鈕)% \4 f* |& t3 n# c
data-role="main" 定義了頁面的內容，比如文字， 圖片，表單，按鈕等。
, v7 V5 j4 c1 P "ui-content" 類用於在頁面增加內邊距和外邊距。" G4 H7 B+ n* m$ _5 L: ]
data-role="footer" 用於建立頁面底部工具條。; m7 ]5 n z" l4 S( R
在這些容器中你可以增加任何 HTML 元素 - 段落, 圖片, 標題, 列表等。' r! J( j) R: c( ^% w
% y" o! a/ `! v5 {1 D# ]) nlamp jQuery Mobile 依賴 HTML5 data-* 屬性來支援各種 UI 元素、過渡和頁面結構。不支援它們的瀏覽器將以靜默方式棄用它們。1 ?; T# D9 N' c# k* e
3 M3 Y5 V. i/ c; \% n8 V- d
在頁面中增加 jQuery Mobile
9 {; ?1 O% ~! z+ [8 r" Y! m" v+ Z1 Q, L. W4 t
使用 jQuery Mobile, 你可以再單個 HTML 檔案中建立多個不同的頁面。# {; B- y/ A8 s9 y6 C! W$ i
0 h1 d% T6 r3 X& d
你可以使用不同的href屬性來區分使用同一個唯一id的頁面：, n/ ~' y$ s) {0 {- W% w
實例9 G+ Q0 K/ G2 A# e& v
<div data-role="page" id="pageone">7 P# [8 b* k3 K
<div data-role="main" class="ui-content">
; b* q ?/ N8 s* I5 t7 r% \! O <a href="#pagetwo">跳轉到第二個頁面</a>
7 j5 @5 z0 Z2 W, G% ~$ D3 S7 x </div>$ e2 P5 I1 r5 M- c2 u) U
</div>
* R$ Y+ ~1 W) p& x) t
Q; |# s, y; |) x<div data-role="page" id="pagetwo">
) Q J) H- X0 A& p <div data-role="main" class="ui-content">
7 H. W1 u6 K Q j# X7 \6 M( V <a href="#pageone">跳轉到第一個頁面</a>
& j8 S5 ~; F# H8 g0 o4 n: V- \7 O </div>1 Z0 }2 F( C+ C" y% W! S. w# ^
</div>5 I$ J, A9 t g- Q) j" j! I
注意： 當web應用有大量的內容（文字，圖片，腳本等）將會嚴重影響加載時間。如果你不想使用內頁連結可以使用外部檔案：
3 @. I; g: o' N$ W9 I( G. ]- {1 `" k( `
<a href="externalfile.html">訪問外部檔案</a>% ~- ^! A4 Y2 K$ `
& A/ G+ o& S* J. \7 b
頁面作為對話框使用# n, m- s+ u% C+ o @" |
9 j6 ]& f) _7 `3 n對話框是用於顯示頁面內容顯示或者表單內容的輸入。; W) A& O' ^0 B
" S6 u* X' n/ J8 {+ ?" ~在連結中增加data-rel="dialog"讓會員點閱連結時彈出對話框:* G, o* I- T, Q$ p( M
實例
& y: E/ Q1 M1 A2 P5 U<div data-role="page" id="pageone">. ~( ^9 B$ [# K0 [
<div data-role="main" class="ui-content">
# Y* X3 B3 Z# t' M+ d) r- F <a href="#pagetwo">跳轉到第二個頁面</a>
7 k4 C/ N- b4 P* W </div>
! A- H4 A1 h& A8 R! L& q</div>
! K/ c9 m1 c* g! Z" v- Z# o
& a+ a6 p( w$ C: C2 K( Q<div data-role="page" data-dialog="true" id="pagetwo">
0 @: V/ x; s, R: S/ w" R <div data-role="main" class="ui-content">
8 H4 D* W. _2 \ <a href="#pageone">跳轉到第一個頁面</a>) I' x& f! \: H: w: i- `& f
</div>
' ^0 b) n' x; d* ^' ^" d, F. K</div> |
|
|Archiver|手機版|禁閉室|MyXNova (原 myxnova.com)
聲望
現金
存款
瀏覽推廣
註冊推廣
金幣
遊戲幣
鑽石
IP卡
狗仔卡
[資訊未更新]
發表於 2016-6-25 16:22:43
提升卡
置頂卡
沉默卡
喧囂卡
變色卡
千斤頂
顯身卡