等級：25 - 爐火純青 經驗值：0 / 246 魔法值：14875 / 14875 生命值：6%
升級
   100%
TA的每日心情 | 奮斗
1 小時前 |
|---|
簽到天數: 5922 天 [LV.Master]伴壇終老
|
馬上註冊，結交更多好友，享用更多功能，讓你輕鬆玩轉社群。
您需要 登入 才可以下載或檢視，沒有帳號？立即註冊
×
jQuery Mobile 是用於建立移動 Web 應用的前端開發框架。
) i2 h" R% G ]$ F) i1 OjQuery Mobile 可以應用於智能手機與平板電腦。
8 F8 G1 z/ I/ \jQuery Mobile 使用 HTML5 & CSS3 最小的腳本來佈局網頁。4 V j3 d l8 E
- G/ p7 k; I1 h( B2 p! [# Y9 b. x
什麼是 jQuery Mobile?
- N& \9 ?! p. U/ r: a6 l4 z+ O' j1 _: {
jQuery Mobile 是針對觸屏智能手機與平板電腦的網頁開發框架。
$ J, @9 U7 a7 ^! a) A: w' i2 Y; v! {& I/ {7 _
jQuery Mobile 工作與所有主流的智能手機和平板電腦上： # {; P# S2 U: l4 }* t
# n P: a. B# W( T& e* C
jQuery Mobile 構建於 jQuery 以及 jQuery UI類庫之上，如果您瞭解 jQuery，您可以很容易的學習 jQuery Mobile。 / H4 a3 ^2 K& q' q
jQuery Mobile 使用了極少的 HTML5、CSS3、JavaScript 和 AJAX 腳本代碼來完成頁面的佈局渲染。5 p+ x6 e6 ^* K; a- D% s) g: a D
6 s* g5 _7 S- e- R% x" X! @
為什麼使用 jQuery Mobile?
# E; w; O6 {3 F! s, U" n) P6 A0 |7 i
1 A% a5 Z- k$ l M; R通過使用jQuery Mobile 可以 "寫更少的代碼，做更多的事情" : 它可以通過一個靈活及簡單的方式來佈局網頁，且兼容所有移動設備。
7 e& D$ [3 o* X4 q& \# q0 L; qlamp 不同設備使用了不同開發語言，jQuery Mobile可以很好的兼容不容的設備或操作系統：% N6 I8 W$ y. l- L& x9 r* P0 c
# D( a: v @+ H Android 和 Blackberry（黑莓） 使用JAVA語言。- g8 b4 l% { ^0 p1 f
iOS 使用 Objective C 語言+ j7 E* |7 Z$ |" e
Windows Phone 使用 C# 和 .net, 等。: `) v4 b" `" [ v
, I& K! V$ E2 _0 ~2 F% `jQuery Mobile 解決了不同設備兼容的問題，因為它只使用HTML，CSS和 JavaScript，這是所有移動網絡瀏覽器的標準！+ n4 B; K7 a* D0 e8 x2 u+ C
n; q& T( q! L# k
jQuery Mobile 安裝
# P( u! I& V( x" d; z, V在你的網頁中增加 jQuery Mobile
2 t1 \$ T- t3 x0 @( C0 o U+ E( i- }7 C$ k' c. r/ P
你可以通過以下幾種方式將jQuery Mobile增加到你的網頁中：
3 s5 G' C( F8 |" l- @) B
: k4 ?' X5 U9 v1 R R: I 從 CDN 中加載 jQuery Mobile (推薦)' x% h* T6 I. U* ?5 i5 O
從jQuerymobile.com 下載 jQuery Mobile庫% ~' v: ~& r- w. C+ X' |: ~
2 P, h4 }; [. @# Z6 r6 A8 V# V下載 jQuery Mobile
7 h" p3 g3 i* m+ \) ^
* Z0 P! U: O8 _. j如果你想將 jQuery Mobile 放於你的主機中,你可以從 jQuerymobile.com下載該檔案。
2 R+ R, J. a' R6 z6 D% g/ W! s6 g) B$ O1 R) i O( j
<head>
8 ^3 S: G& Y* w<meta name="viewport" content="width=device-width, initial-scale=1">. B m* {% n8 S4 }: d0 g5 i
<link rel="stylesheet" href="jquery.mobile-1.4.5.css">
5 [. n- Q- f- L* E. n4 B<script src="jquery.js"></script>+ S# J' o) U3 R& L5 W1 C$ D" \$ [7 S
<script src="jquery.mobile-1.4.5.js"></script>
V1 c+ w) i* J0 Y) h</head>
5 G; o0 q# t9 Z: D/ x0 b! L' [- ~3 a) T" _3 E" ^# W( B$ p" x
提示： 將下載的檔案放置於與網頁同一目錄下。2 H) ^& H: e8 B
lamp 你是否想知道為什麼在 <script> 標籤中 沒有插入 type="text/javascript" ?
4 U: V0 N5 l h5 k' f5 w1 N/ I4 |
# U3 {$ Y1 r, f5 E在 HTML5 已經不需要該屬性。 JavaScript 在所有現代瀏覽器中是 HTML5 的預設腳本語言！9 i! O5 q5 ^! Q/ f& u
* X0 k3 E& ]2 d8 rjQuery Mobile 頁面' [: L3 A5 N5 |9 [: K4 V3 Z% v- U
開始學習 jQuery Mobile6 o: _# G- F6 ?
實例' ~: m; L* d! v9 S l
<body>
4 y. `& S1 A N* t+ [8 w<div data-role="page">2 B; v; F* T8 ]" r; E- F6 c
8 P* X7 D# } j' F <div data-role="header">1 g# M4 h W9 s2 E% x) P
<h1>歡迎來到我的主頁</h1>
, n& T7 r2 u: j% C </div>/ ?* K7 b* V# C+ k8 Z; D
& l' u) ?! h$ u <div data-role="main" class="ui-content">$ u% J2 ]/ ~0 @
<p>我現在是一個移動端開發者!!</p>2 ?; w" G* y! Y! Y; t! A
</div>
$ F& u) A _7 Q) f5 D' W6 R7 k9 t, _+ `, {
" j( g; N+ S5 z4 x7 s" N$ z <div data-role="footer">- E* ]+ {, i- H! l' N, e
<h1>底部文字</h1>- g- j# i% u) N/ b" F5 r3 b; Q& o# l( W
</div>
/ o( w; B2 [% u' u7 g2 Z3 A' D5 V8 u) w* U. U$ n# F3 D: t
</div>
; `" V& C8 N; j. E4 s0 j</body>! G$ r# l4 k/ ^7 ` S) s
實例解析：5 u& a" g: i. U
`, t- x9 u0 m/ v+ Y/ i# A# r
data-role="page" 是在瀏覽器中顯示的頁面。
2 P( z; j9 A7 R# l4 o$ S- z data-role="header" 是在頁面頂部建立的工具條 (通常用於標題或者搜尋按鈕)
2 J o. T; ]- T7 `+ ~+ C6 R data-role="main" 定義了頁面的內容，比如文字， 圖片，表單，按鈕等。. u& _: Z1 I' F* } g
"ui-content" 類用於在頁面增加內邊距和外邊距。4 v& M. _: w; F) G1 l, ]
data-role="footer" 用於建立頁面底部工具條。
9 q" j: T ^& ~* { 在這些容器中你可以增加任何 HTML 元素 - 段落, 圖片, 標題, 列表等。! I- V* h( M: A3 r
: G9 U% t6 y' m
lamp jQuery Mobile 依賴 HTML5 data-* 屬性來支援各種 UI 元素、過渡和頁面結構。不支援它們的瀏覽器將以靜默方式棄用它們。
- i; U8 ^; m+ ?: N$ @
' [5 Y* l: d; T8 A0 s# N在頁面中增加 jQuery Mobile$ A3 m2 a b1 E( d2 Q2 Z" g
$ a0 |6 D* }1 _8 W+ p
使用 jQuery Mobile, 你可以再單個 HTML 檔案中建立多個不同的頁面。3 {8 Z8 r6 n% y' {6 b# a
& s) g3 r6 k" M1 u( | z你可以使用不同的href屬性來區分使用同一個唯一id的頁面：
r# N. A" v5 W$ j8 N8 x* V實例
' x" x& ?, N( b<div data-role="page" id="pageone">$ X# B5 S$ f S, T5 m
<div data-role="main" class="ui-content">5 d' l+ y1 K! Q3 w& I4 c8 J
<a href="#pagetwo">跳轉到第二個頁面</a>
7 w- F+ z! Y+ B* D, u' ? </div>8 r# S5 V0 Y g% q0 T- j) F
</div>* L" Z1 y, n Q7 @# u* ]- H
9 A5 o5 |+ M5 G# J# U6 v
<div data-role="page" id="pagetwo"> Z0 B s B& c% @
<div data-role="main" class="ui-content">* B. b' ?) r. s Q ~
<a href="#pageone">跳轉到第一個頁面</a>, @! _3 J0 J4 S% H
</div>$ Q$ H6 v9 j# f4 N; g; g+ n' r
</div>9 l7 ~" C2 {6 ]9 Q) y* B
注意： 當web應用有大量的內容（文字，圖片，腳本等）將會嚴重影響加載時間。如果你不想使用內頁連結可以使用外部檔案：
1 L. M' ~3 ]& |' u$ o) _- q
: `* b C- S' Z& H* X* D( `' {<a href="externalfile.html">訪問外部檔案</a>$ v# Q7 n# [1 \$ N* i- c- n, w, C
4 o/ K; n4 w: d7 A5 Q1 w( h
頁面作為對話框使用+ f! x2 C/ E9 {, s
6 _$ K: {' Q/ o! z: @$ x" W0 J
對話框是用於顯示頁面內容顯示或者表單內容的輸入。
7 Q+ h+ t$ Q& k9 h! l7 I. k6 y0 e( V7 G/ B
在連結中增加data-rel="dialog"讓會員點閱連結時彈出對話框:
$ ~3 _1 C9 l8 E4 }: H, O) L實例# n( B* Y) k# y0 |# V
<div data-role="page" id="pageone"># H& V% G. a1 S0 ?1 t3 [
<div data-role="main" class="ui-content">/ B# \ L! |: ?, Z" F1 l ?, {
<a href="#pagetwo">跳轉到第二個頁面</a>- ]7 U% b7 r' n6 O/ B8 _9 I% \
</div>
7 N! ^: K% D8 i</div>
: R. U) _ x' N: p6 D$ t# S4 x, ~; \! }6 v1 g! X/ y
<div data-role="page" data-dialog="true" id="pagetwo"># @' H1 m- p8 n0 o3 Z: J! x
<div data-role="main" class="ui-content">0 o( R$ [4 [4 ^; ]! y
<a href="#pageone">跳轉到第一個頁面</a>) q' J/ Y5 f$ S% ^
</div>
- b$ H; c% J/ S0 b; y+ f</div> |
|
|Archiver|手機版|禁閉室|MyXNova (原 myxnova.com)
聲望
現金
存款
瀏覽推廣
註冊推廣
金幣
遊戲幣
鑽石
IP卡
狗仔卡
[資訊未更新]
發表於 2016-6-25 16:22:43
提升卡
置頂卡
沉默卡
喧囂卡
變色卡
千斤頂
顯身卡