等級：25 - 爐火純青 經驗值：0 / 246 魔法值：15173 / 15173 生命值：6%
升級
   100%
TA的每日心情 | 奮斗
3 小時前 |
|---|
簽到天數: 6031 天 [LV.Master]伴壇終老
|
馬上註冊，結交更多好友，享用更多功能，讓你輕鬆玩轉社群。
您需要 登入 才可以下載或檢視，沒有帳號？立即註冊
×
jQuery Mobile 是用於建立移動 Web 應用的前端開發框架。 ' [ v# M$ x. P' k8 a8 a
jQuery Mobile 可以應用於智能手機與平板電腦。
% p' \# e% @/ D2 C* }jQuery Mobile 使用 HTML5 & CSS3 最小的腳本來佈局網頁。
; p* X2 t; a& M+ V1 A- y$ Y, ?* H
' V8 s" |5 S+ v什麼是 jQuery Mobile? 7 G& h8 l8 E- ]
3 O* A5 P' t$ I' D! g; `% H
jQuery Mobile 是針對觸屏智能手機與平板電腦的網頁開發框架。
: r8 _4 t! V, k+ m9 K% E* ~3 K" ~ c+ n
jQuery Mobile 工作與所有主流的智能手機和平板電腦上：
7 z& `3 ~' {9 ]7 j2 i" F4 A3 q' `) C {& E8 n& F5 y; j: V
jQuery Mobile 構建於 jQuery 以及 jQuery UI類庫之上，如果您瞭解 jQuery，您可以很容易的學習 jQuery Mobile。 . e+ {0 n2 `* w' {
jQuery Mobile 使用了極少的 HTML5、CSS3、JavaScript 和 AJAX 腳本代碼來完成頁面的佈局渲染。" I$ ^; Z! e0 D( v5 _& \1 K2 W8 F
+ _( c. k& }' V7 j4 |/ I' I/ |
為什麼使用 jQuery Mobile?/ [" m$ \# Z8 R* V# s( |! t
8 W% v4 }$ B) `1 L! O; g# J通過使用jQuery Mobile 可以 "寫更少的代碼，做更多的事情" : 它可以通過一個靈活及簡單的方式來佈局網頁，且兼容所有移動設備。
3 G* |5 A m- m1 ~- Q+ c5 K3 wlamp 不同設備使用了不同開發語言，jQuery Mobile可以很好的兼容不容的設備或操作系統：
/ u6 h$ v+ n- i$ d
3 S) M+ m; A# p1 R1 t0 Z& @4 R Android 和 Blackberry（黑莓） 使用JAVA語言。
) D/ \4 w0 h; V0 _ iOS 使用 Objective C 語言
2 J( w' \( H% p# T2 E) { Windows Phone 使用 C# 和 .net, 等。
; O+ J4 f! v, J. `* W2 b1 I/ o/ j6 B
jQuery Mobile 解決了不同設備兼容的問題，因為它只使用HTML，CSS和 JavaScript，這是所有移動網絡瀏覽器的標準！9 x0 ~3 p( q! i; n% V6 W
) Z; l: p3 b: f3 W2 y' K' t
jQuery Mobile 安裝
) d+ t/ B# E# S' X' X在你的網頁中增加 jQuery Mobile7 g! X$ g- @* W; L9 }, _
7 ]: l& [6 v1 U& t y7 V你可以通過以下幾種方式將jQuery Mobile增加到你的網頁中：
% C/ K# v, u$ h. y6 T
8 K$ ` G! t( q! h 從 CDN 中加載 jQuery Mobile (推薦)/ T6 t7 Y. I1 x, [& q6 |
從jQuerymobile.com 下載 jQuery Mobile庫
$ a- b) I7 o' _* [/ Q* F' g0 K9 i. Z! L, C: T
下載 jQuery Mobile
; s8 D% @* g3 e
$ B+ U% k7 [# Q5 V3 _9 u如果你想將 jQuery Mobile 放於你的主機中,你可以從 jQuerymobile.com下載該檔案。4 d, h; N9 R$ C& O \3 j& }
7 N% X. B: Z3 {# h; m) m
<head>
* H( d: `2 T8 {<meta name="viewport" content="width=device-width, initial-scale=1">; }2 X C% s# x5 d9 ?
<link rel="stylesheet" href="jquery.mobile-1.4.5.css">7 m0 R, N8 [! B$ h5 v. m$ n# G W
<script src="jquery.js"></script>
+ s& H. j/ @4 r, C* B<script src="jquery.mobile-1.4.5.js"></script> ?2 ]8 f7 w) T
</head>) ]6 W5 p( A7 [; ]2 c5 y* n; Y
8 b9 ?8 X4 ~2 J: _9 p6 {
提示： 將下載的檔案放置於與網頁同一目錄下。8 c, K$ o8 R) c$ J! D' g( K
lamp 你是否想知道為什麼在 <script> 標籤中 沒有插入 type="text/javascript" ?* a" g) v# h& {- k# d5 W
$ f5 [$ G( j) B' S; L& W7 B
在 HTML5 已經不需要該屬性。 JavaScript 在所有現代瀏覽器中是 HTML5 的預設腳本語言！. F: }/ w) U8 `; d, P/ u
! E# H5 |) q1 {! k" |jQuery Mobile 頁面- i# B" k k4 e. i5 c& Q! C) I
開始學習 jQuery Mobile& _ G( Z- R' m3 V
實例
7 z0 U0 F8 c' D2 U4 k<body>
8 i9 ~: p7 |, J6 q<div data-role="page">9 N4 D$ h; c9 H8 z; Y/ W1 t
" `$ e s, M/ R1 G. \' {
<div data-role="header">
) q2 i) _9 S S0 F- ` <h1>歡迎來到我的主頁</h1>
0 e% t- N; n' J7 S& m/ J </div>
# {7 Q( Q7 o- N2 w) L& q. Y) ~/ _# x8 W, V! R3 b# F1 p4 W8 _
<div data-role="main" class="ui-content">. d) F! D% e, z5 T, q0 h+ e
<p>我現在是一個移動端開發者!!</p>& j" ]3 o2 c1 e; z% ]3 g/ X- U$ w, ^% P
</div>0 K2 ]$ q+ Y0 ~" M% s
* y" o# T# I9 O+ t <div data-role="footer"> _3 |4 o2 B8 n5 ~, @
<h1>底部文字</h1>/ S4 J, X% N8 z
</div>4 ~; e% `# G A. O q
( Z Q) l- _0 q1 h$ T
</div>
3 W" x. E- r8 C</body>0 {% U' n- k; m( k
實例解析：
- j! w6 s2 ]3 ~" c# E4 X3 {& `6 h4 m) l+ g/ Y) E- F. A. L) E8 `
data-role="page" 是在瀏覽器中顯示的頁面。
/ }2 P% o$ `. L$ R+ K4 R7 C! q1 g* }8 i data-role="header" 是在頁面頂部建立的工具條 (通常用於標題或者搜尋按鈕)
6 n/ C3 d' y! T- O8 U+ J data-role="main" 定義了頁面的內容，比如文字， 圖片，表單，按鈕等。
( G6 _8 H" p- J: ^$ ^ "ui-content" 類用於在頁面增加內邊距和外邊距。
9 t1 j8 F: D% g! K5 N6 G/ b/ ` data-role="footer" 用於建立頁面底部工具條。, W+ p# d2 i# @2 J$ O: a% E5 G
在這些容器中你可以增加任何 HTML 元素 - 段落, 圖片, 標題, 列表等。
9 c( C# m. X7 h% x! x, L3 q
8 D9 i2 B k( n$ g$ ylamp jQuery Mobile 依賴 HTML5 data-* 屬性來支援各種 UI 元素、過渡和頁面結構。不支援它們的瀏覽器將以靜默方式棄用它們。/ M! A5 P' V J: R! w+ ]
6 {1 R. l$ g6 d+ |4 L5 A( x" G
在頁面中增加 jQuery Mobile9 P: ?. @) P1 u0 @8 p: u' X) h: ?
% |+ ?. p) M+ n: ~, v0 k$ _5 w @使用 jQuery Mobile, 你可以再單個 HTML 檔案中建立多個不同的頁面。
{2 A1 C: j" t, @
/ `! M2 U% y9 w# }7 m E你可以使用不同的href屬性來區分使用同一個唯一id的頁面：
4 N$ t5 n! X0 R9 T& S實例0 _6 S5 m2 ~/ x; u5 K
<div data-role="page" id="pageone">5 T( g6 I& t6 T4 X5 U
<div data-role="main" class="ui-content">8 v4 L, a+ k8 V$ `* I& A% N- ]
<a href="#pagetwo">跳轉到第二個頁面</a>! l) ]. x" [0 q
</div>
. h; ~2 k; W# m</div>
( D/ b; c+ y- ]* s n
4 R7 E& v. X% ]0 g4 b<div data-role="page" id="pagetwo">8 q9 h5 X: a( _% s, S. A* h
<div data-role="main" class="ui-content">/ C( V; P+ b2 ?- [
<a href="#pageone">跳轉到第一個頁面</a>0 d& u+ x3 u3 c# t3 R. Z
</div>: i+ r9 T3 l% B9 x* {# l/ U1 h
</div>9 f/ `/ x3 V5 {) ]
注意： 當web應用有大量的內容（文字，圖片，腳本等）將會嚴重影響加載時間。如果你不想使用內頁連結可以使用外部檔案：' @8 d$ W4 x1 \
5 F1 G2 N# a- t" H<a href="externalfile.html">訪問外部檔案</a>
. F/ _0 m) R' ?/ a6 @# X4 e3 f- m4 i- w3 N* C5 y9 \9 Z
頁面作為對話框使用
8 C6 j9 p& b' Y5 O' H' V, N& J
$ c1 |9 c' W! W0 v對話框是用於顯示頁面內容顯示或者表單內容的輸入。$ F8 b2 M0 r% I/ j0 H1 F1 R% j, c: t
+ J) a; W! U+ a1 r9 R+ O
在連結中增加data-rel="dialog"讓會員點閱連結時彈出對話框:6 J$ X. D; f1 ~; g$ z* G1 k
實例
0 q- [/ [8 {4 H! E4 K( b) d<div data-role="page" id="pageone">
% j' N8 A( i9 o9 ^) h <div data-role="main" class="ui-content">' L5 A# N) ^0 `( S4 J) c3 t! z* b$ A
<a href="#pagetwo">跳轉到第二個頁面</a>
) O( V0 R! j) ~3 q: S& }5 s </div>8 L9 Z. A+ l& X
</div>. p/ o4 |& I( f% j( l2 r
3 Z8 Q& a, U, V5 `" Z7 e<div data-role="page" data-dialog="true" id="pagetwo">7 m: t K0 \- R8 q2 b% H0 N3 _0 R
<div data-role="main" class="ui-content">) @. J) Y+ ^$ p. ? Q2 r8 s: \) E
<a href="#pageone">跳轉到第一個頁面</a>0 `" A- S( @0 i3 Y' F
</div>
7 B* d9 O7 ^8 Z0 z9 [' T</div> |
|
|Archiver|手機版|禁閉室|MyXNova (原 myxnova.com)
聲望
現金
存款
瀏覽推廣
註冊推廣
金幣
遊戲幣
鑽石
IP卡
狗仔卡
[資訊未更新]
發表於 2016-6-25 16:22:43
提升卡
置頂卡
沉默卡
喧囂卡
變色卡
千斤頂
顯身卡