等級：25 - 爐火純青 經驗值：0 / 245 魔法值：14127 / 14127 生命值：5%
升級
   100%
TA的每日心情 | 奮斗
21 小時前 |
|---|
簽到天數: 5689 天 [LV.Master]伴壇終老
|
馬上註冊，結交更多好友，享用更多功能，讓你輕鬆玩轉社群。
您需要 登入 才可以下載或檢視，沒有帳號？立即註冊
×
jQuery Mobile 是用於建立移動 Web 應用的前端開發框架。 % Z! D) i! ^! T V) g
jQuery Mobile 可以應用於智能手機與平板電腦。
; W, ], U! M3 x& }$ kjQuery Mobile 使用 HTML5 & CSS3 最小的腳本來佈局網頁。
( m; q3 y( T4 ?# W
3 ~3 {( Y8 R6 x什麼是 jQuery Mobile?
% X+ r- e7 C4 a% ~
1 s" ~& W& |1 w: LjQuery Mobile 是針對觸屏智能手機與平板電腦的網頁開發框架。 9 ~0 D2 b! p+ x
- _2 d3 N6 |$ {! O- s
jQuery Mobile 工作與所有主流的智能手機和平板電腦上：
7 {4 W; c s3 Q# j; ?
8 u% T+ ~' e% A+ E6 i3 n, YjQuery Mobile 構建於 jQuery 以及 jQuery UI類庫之上，如果您瞭解 jQuery，您可以很容易的學習 jQuery Mobile。 # M) x, g% }. t
jQuery Mobile 使用了極少的 HTML5、CSS3、JavaScript 和 AJAX 腳本代碼來完成頁面的佈局渲染。
6 [: w8 V( Q- u! t+ p
' [5 {3 j+ a8 G# N! p為什麼使用 jQuery Mobile?' |8 _3 l7 j7 T2 s" W" V F0 f0 Z
! o* L2 U5 n$ @& \; G# U通過使用jQuery Mobile 可以 "寫更少的代碼，做更多的事情" : 它可以通過一個靈活及簡單的方式來佈局網頁，且兼容所有移動設備。9 j- Y0 c* p- P! B: F$ G) m
lamp 不同設備使用了不同開發語言，jQuery Mobile可以很好的兼容不容的設備或操作系統：
! b- v6 i ?; }. t! X
. O7 p! x0 Q8 i Android 和 Blackberry（黑莓） 使用JAVA語言。, _% o; R! ]( S1 I% C6 n; G
iOS 使用 Objective C 語言
- |- G0 ` c1 O# l Windows Phone 使用 C# 和 .net, 等。2 C( J8 v0 @; J% f! Z& v
+ I) i" T# `! S. Z: v
jQuery Mobile 解決了不同設備兼容的問題，因為它只使用HTML，CSS和 JavaScript，這是所有移動網絡瀏覽器的標準！0 q/ Z E$ I4 u4 Z! z2 R2 U# y: C8 _# j
+ d6 j/ s& {9 C6 B6 ijQuery Mobile 安裝* c7 I1 f4 o7 |
在你的網頁中增加 jQuery Mobile
* x7 E8 g- Y2 A! @2 T$ t1 y
( Q/ _. Z( G* i6 \2 e; \& d: _/ L. K你可以通過以下幾種方式將jQuery Mobile增加到你的網頁中：7 |. I" |9 }6 A
: ?! `) K0 H. t1 r
從 CDN 中加載 jQuery Mobile (推薦)
3 U+ Q4 S" N0 }0 _. t; U 從jQuerymobile.com 下載 jQuery Mobile庫# y5 E8 l: H$ v# E* d9 ^, H
9 q9 U; G, l& e1 ]* w; [; [
下載 jQuery Mobile
) v% r3 m/ W5 q: f8 |' J1 w1 r$ E0 f6 l( V: @) }* F" M7 N
如果你想將 jQuery Mobile 放於你的主機中,你可以從 jQuerymobile.com下載該檔案。- p8 f( P! Z7 ^
) k2 D8 i- y/ h% t) | B
<head>
; `' u( q9 [, z<meta name="viewport" content="width=device-width, initial-scale=1">
# y3 N# @- k+ x ?<link rel="stylesheet" href="jquery.mobile-1.4.5.css">
' _: o- P: n- q) O5 q/ K1 O7 K5 ?<script src="jquery.js"></script>
/ l" C8 H/ m' ~" d, `<script src="jquery.mobile-1.4.5.js"></script>/ F% l2 ]1 k9 u: c' J
</head>
' M" W/ v4 V+ P6 V9 o' Y5 A0 b7 z
. h- i' \7 M3 o6 b# h- e2 I提示： 將下載的檔案放置於與網頁同一目錄下。
4 ^9 @$ L7 I" V1 vlamp 你是否想知道為什麼在 <script> 標籤中 沒有插入 type="text/javascript" ?4 x3 ] J0 m. Q7 N. m
6 j* ] ~, U( \- q9 V" |
在 HTML5 已經不需要該屬性。 JavaScript 在所有現代瀏覽器中是 HTML5 的預設腳本語言！. t4 Z/ k; T: ~# h! |1 t! G
- K3 y' G j/ i d% N, U: ?
jQuery Mobile 頁面+ X7 S _2 P) W& f
開始學習 jQuery Mobile
: Q* w8 {; z' p實例1 Z7 r _0 T+ }, N3 c/ ]# B& p/ B
<body>. ]" d5 ~$ J& N2 l9 W) L
<div data-role="page">
$ x) x4 A6 H% z( e0 Q+ G
( `* I( K4 ^! L0 g, Y <div data-role="header">: a a. {, z+ A1 e
<h1>歡迎來到我的主頁</h1># `1 {: J! u; P: a5 |3 r4 c; r K" v t
</div>
% y- Z! r3 a0 {* A1 _- ^
- l7 E* H+ y) s4 p5 y; S <div data-role="main" class="ui-content">
8 a4 ~' k+ o- H% ~2 T3 G <p>我現在是一個移動端開發者!!</p>$ W% c8 ~9 ]( \; \
</div>9 \- a5 f% P/ S4 B
5 J+ Y K G2 h* p- x4 k0 `0 f, x% x
<div data-role="footer">( j2 Q5 S1 A1 O2 l5 q
<h1>底部文字</h1>
$ {% X9 K) z$ w </div>
8 s" ^/ ^" Y2 `% K3 o) I1 R( W
[$ f2 M& V% M) u4 }# n</div>
; E& w5 I2 ?5 [- e</body>
1 X3 R2 @9 h8 \' {5 a* e% V- H! q實例解析： ^+ |& J6 `3 Q- f
- ]/ Y, Q" i9 F# ^' Y
data-role="page" 是在瀏覽器中顯示的頁面。
, M- j* H% G5 @' Q5 n data-role="header" 是在頁面頂部建立的工具條 (通常用於標題或者搜尋按鈕)
" @4 {# d& j2 H2 L! W' D7 a data-role="main" 定義了頁面的內容，比如文字， 圖片，表單，按鈕等。
4 Z4 ~8 q1 |4 f& E- w "ui-content" 類用於在頁面增加內邊距和外邊距。; w; h- |; E+ U5 x
data-role="footer" 用於建立頁面底部工具條。
* M& X) r% F7 X" ~ o8 q6 p 在這些容器中你可以增加任何 HTML 元素 - 段落, 圖片, 標題, 列表等。; z3 @& d3 @9 s% c2 S
5 B6 f G( J/ t0 r( ?5 u5 s
lamp jQuery Mobile 依賴 HTML5 data-* 屬性來支援各種 UI 元素、過渡和頁面結構。不支援它們的瀏覽器將以靜默方式棄用它們。* Y# g" n# D) t9 r
8 r ~3 i1 [3 O2 A/ Z) |在頁面中增加 jQuery Mobile
. Q( X' S5 H. a, n Y6 a
9 D' ?1 R7 [. C2 i使用 jQuery Mobile, 你可以再單個 HTML 檔案中建立多個不同的頁面。; H/ V3 `" A7 b) P0 Z
$ c6 F/ I$ u8 ?: B你可以使用不同的href屬性來區分使用同一個唯一id的頁面： _5 J/ a% U, {0 E- {
實例! N ]& _/ e; I) [" A6 D
<div data-role="page" id="pageone">
. l' F8 H# w3 N2 Q) T. B2 Z <div data-role="main" class="ui-content">
5 W" g6 j% | t r <a href="#pagetwo">跳轉到第二個頁面</a>' u3 m8 v: U0 t8 O) k7 t
</div>& M1 J; c! `; q$ k
</div>' A8 d& U# i9 r- C; f P
& k% w/ @0 u% q% ?8 V* u; F
<div data-role="page" id="pagetwo">
. p! }0 S3 G: p$ O: n# B/ I; b <div data-role="main" class="ui-content">
3 ^1 g9 r: B5 z. y: j <a href="#pageone">跳轉到第一個頁面</a>
5 ^0 F" t. V, N D/ n- p# A </div>7 S: Z7 s' X) P$ C
</div>
/ j/ l6 G7 b- z7 k; Y注意： 當web應用有大量的內容（文字，圖片，腳本等）將會嚴重影響加載時間。如果你不想使用內頁連結可以使用外部檔案：
# m; m* G1 Q' _
' h$ V: L: U3 Y+ d9 ? M# ~% i<a href="externalfile.html">訪問外部檔案</a>
5 v( g& b( C. e. X, S3 d7 v, ^5 D X+ M) _& U/ d3 [2 S0 Z0 R" M5 I6 ]% `1 D
頁面作為對話框使用
- W7 t) H+ g+ S/ z0 D8 U$ w Y0 F/ j, v0 u" ?
對話框是用於顯示頁面內容顯示或者表單內容的輸入。' p% |) h5 \3 k: X
7 ^" a% m: n$ ?% s" [
在連結中增加data-rel="dialog"讓會員點閱連結時彈出對話框:
2 d8 L3 |9 O( Y( I; ]0 S4 X實例
: U0 T# ~/ M7 b& p/ v- Q<div data-role="page" id="pageone">
. B" N, w# M. ~ <div data-role="main" class="ui-content">- [( k3 {. C+ ~+ ^4 d" n
<a href="#pagetwo">跳轉到第二個頁面</a>" [- ]/ I2 U+ J
</div>1 r E/ d* @& I! s6 b
</div>
6 |+ W- K5 \# u. V( {6 ^* l
! D9 J& n" K9 U+ Q<div data-role="page" data-dialog="true" id="pagetwo">
, @: y# ^2 l* {8 y+ k <div data-role="main" class="ui-content">
3 t, A, O5 i' E Q" t <a href="#pageone">跳轉到第一個頁面</a>
: B, n: W- x5 Y8 z, { </div>
! A' @' K' ]4 H6 z5 X</div> |
|
|Archiver|手機版|禁閉室|MyXNova (原 myxnova.com)
聲望
現金
存款
瀏覽推廣
註冊推廣
金幣
遊戲幣
鑽石
IP卡
狗仔卡
[資訊未更新]
發表於 2016-6-25 16:22:43
提升卡
置頂卡
沉默卡
喧囂卡
變色卡
千斤頂
顯身卡