等級：25 - 爐火純青 經驗值：0 / 245 魔法值：13566 / 13566 生命值：5%
升級
   100%
TA的每日心情 | 擦汗
4 小時前 |
|---|
簽到天數: 5490 天 [LV.Master]伴壇終老
|
馬上註冊，結交更多好友，享用更多功能，讓你輕鬆玩轉社群。
您需要 登入 才可以下載或檢視，沒有帳號？立即註冊
×
jQuery Mobile 是用於建立移動 Web 應用的前端開發框架。 & c2 Z/ Y/ a% e
jQuery Mobile 可以應用於智能手機與平板電腦。 ( V# d% }3 j. o
jQuery Mobile 使用 HTML5 & CSS3 最小的腳本來佈局網頁。+ j4 y5 Z5 V+ z0 i
. {4 _. @$ E: o0 ^( U6 N什麼是 jQuery Mobile? e1 `% \# u, o, e
; }, u7 V+ x2 H) M7 a; y8 S
jQuery Mobile 是針對觸屏智能手機與平板電腦的網頁開發框架。
5 d- ~) K, w$ n6 n1 T/ V7 C
9 Q) q3 H' B7 j8 z/ SjQuery Mobile 工作與所有主流的智能手機和平板電腦上： ( F& g& t( q/ j7 o1 w& E
" v( l- ]8 e/ F' s; K: N- B5 [jQuery Mobile 構建於 jQuery 以及 jQuery UI類庫之上，如果您瞭解 jQuery，您可以很容易的學習 jQuery Mobile。
( O* `: o2 [0 W% h+ k* Q$ IjQuery Mobile 使用了極少的 HTML5、CSS3、JavaScript 和 AJAX 腳本代碼來完成頁面的佈局渲染。
+ i0 w: G2 E* E% m- ~% \* C, l% R
4 R* K% @3 n3 K% g為什麼使用 jQuery Mobile?
7 P$ g- o4 U x$ I, N$ q$ I% ~: K' n' l! `' Y# R
通過使用jQuery Mobile 可以 "寫更少的代碼，做更多的事情" : 它可以通過一個靈活及簡單的方式來佈局網頁，且兼容所有移動設備。
0 Y6 J$ \! z" Mlamp 不同設備使用了不同開發語言，jQuery Mobile可以很好的兼容不容的設備或操作系統：; v0 h1 l8 C! o7 d5 o9 C
' k6 n H/ @( n' M& c h, ?
Android 和 Blackberry（黑莓） 使用JAVA語言。
$ |% a( ^- N9 h7 Q( _$ S iOS 使用 Objective C 語言/ X* |% Z/ ~7 B( H- \6 N
Windows Phone 使用 C# 和 .net, 等。0 l2 R7 F9 Z/ b4 S) {" q( O
( i, @" I1 O( S. n/ `jQuery Mobile 解決了不同設備兼容的問題，因為它只使用HTML，CSS和 JavaScript，這是所有移動網絡瀏覽器的標準！
$ |* X. T% g) P! t; Y( W* Y
w5 B. M! {. m: bjQuery Mobile 安裝" E; s4 z: v6 d8 e8 j
在你的網頁中增加 jQuery Mobile; q, r( T0 G% ~3 O+ J) f. ~
5 f" v( N+ A) x你可以通過以下幾種方式將jQuery Mobile增加到你的網頁中：
8 W& M8 ?& k, ~5 g, u' n- G- @0 o
+ D% b# Y6 u4 O3 h% j4 Y" ? 從 CDN 中加載 jQuery Mobile (推薦)% `# u9 }% w# L3 I9 A9 ?/ C
從jQuerymobile.com 下載 jQuery Mobile庫, r. F$ @' ?6 A' X1 a4 m, \! X
, B# p0 L+ m- z, I/ h. p. T下載 jQuery Mobile% f; b6 Q) l! R& L
0 {1 b9 G7 [3 _4 w* b, D如果你想將 jQuery Mobile 放於你的主機中,你可以從 jQuerymobile.com下載該檔案。
% e, J) `0 A" {7 @0 B
) g6 I4 I( ?* V- v4 m<head>
/ v. K9 y" I+ L, I<meta name="viewport" content="width=device-width, initial-scale=1"> ~9 n9 }5 @, w! O
<link rel="stylesheet" href="jquery.mobile-1.4.5.css"> [* ~ f/ O8 N! S4 r' d
<script src="jquery.js"></script>; A2 X$ `; L) |7 q7 ^/ \+ f
<script src="jquery.mobile-1.4.5.js"></script>
" F4 H! Y6 o$ [& e</head>1 ]; j; G: ^& v* s' I
: S; \$ A5 W4 Q$ c# C( t) d/ u* P
提示： 將下載的檔案放置於與網頁同一目錄下。
" E, W3 x' \* m0 ^9 C5 D% b C5 o) Hlamp 你是否想知道為什麼在 <script> 標籤中 沒有插入 type="text/javascript" ?3 A6 y9 s) A1 S; v
3 {( T8 Q |- @
在 HTML5 已經不需要該屬性。 JavaScript 在所有現代瀏覽器中是 HTML5 的預設腳本語言！4 A; Y7 M7 O, Q+ o( v- ~
3 G0 v6 W- F9 P2 q5 z( y1 S
jQuery Mobile 頁面. f6 g6 k* U" [6 [/ c
開始學習 jQuery Mobile2 r# v" M& D5 k, ^, i! C
實例
" Q( h( R7 F) a9 l$ B<body>
0 p/ _* ]+ I) Y8 c; V<div data-role="page">% L: ?' S0 d# _6 \6 O3 L
3 C/ ?; K- X" c9 f. h8 [. Q1 P <div data-role="header">+ o# X2 R5 S$ h+ ~
<h1>歡迎來到我的主頁</h1>+ }6 z2 p* g1 o+ I+ R6 H, l
</div>
! k) R# k- S" }' ~4 Z5 ~6 P* I V+ [" p& f2 _# N
<div data-role="main" class="ui-content">- ]# K3 h" g4 U. k2 |
<p>我現在是一個移動端開發者!!</p>4 _: q8 v- |. r5 G
</div>
9 `3 Q7 P" m6 d' D' U& O% A1 e8 M3 D4 o! M
<div data-role="footer">" A8 Q" ^0 F; ~% k2 j# [8 j m5 f
<h1>底部文字</h1>$ M6 ^% W& w5 q6 K! L
</div>0 ?- w7 y, Q" r6 e; x! Q9 h& h& Z
/ ?; t7 {. X( P" ^& u! Y
</div>
+ w' M- t, \! x; i( ?</body>
: J& ~0 x6 u$ j4 j4 c; ] C. `實例解析：
- p( g! s' V8 ~+ l
/ w$ s& H) R* |& q5 ~3 V& W data-role="page" 是在瀏覽器中顯示的頁面。$ \3 A3 p- c. Q" K
data-role="header" 是在頁面頂部建立的工具條 (通常用於標題或者搜尋按鈕)
5 o1 j) |* k! z# w4 R2 W5 k$ b data-role="main" 定義了頁面的內容，比如文字， 圖片，表單，按鈕等。. v: l. o' Y- ^* e" k
"ui-content" 類用於在頁面增加內邊距和外邊距。
9 }2 r5 ~8 m$ I: R. ^0 y data-role="footer" 用於建立頁面底部工具條。
4 I! F3 @- l/ M8 k3 g& @3 I 在這些容器中你可以增加任何 HTML 元素 - 段落, 圖片, 標題, 列表等。4 i& P) \" q+ Y4 Q
4 Q& x' R7 \/ K( b' N w' s% |5 o- Hlamp jQuery Mobile 依賴 HTML5 data-* 屬性來支援各種 UI 元素、過渡和頁面結構。不支援它們的瀏覽器將以靜默方式棄用它們。
) `. b+ ~1 z r# m) y1 n) [2 W8 w* N) x4 `6 G9 P
在頁面中增加 jQuery Mobile3 y6 g; y6 {/ {0 [1 ?& T, T
5 M& e. ]$ l" M2 ]0 l使用 jQuery Mobile, 你可以再單個 HTML 檔案中建立多個不同的頁面。4 o' `: n& H! y1 d/ m* d
# t' _+ v# m$ L& r你可以使用不同的href屬性來區分使用同一個唯一id的頁面：
) ^+ f9 n0 r* J1 Q b0 P0 Q0 {實例% | C$ i3 b- r6 B0 i) ]
<div data-role="page" id="pageone">
5 e( Q: J8 P* {# w. G <div data-role="main" class="ui-content">
5 O2 @# I: W* `" W$ f <a href="#pagetwo">跳轉到第二個頁面</a>
5 u% L( P2 I% r) ^9 w2 P# M. T, c </div>( \) {* J# x: d3 H2 A. t" y1 R2 h
</div>
' G8 o# N: Q4 s2 W7 P4 F1 L( @& w( A. D. X0 m4 S! H' L
<div data-role="page" id="pagetwo">; F! y4 O: @* Y! C
<div data-role="main" class="ui-content">
" s+ {6 T, h6 c8 q <a href="#pageone">跳轉到第一個頁面</a>1 |( c: ]- G! Z1 L; S& k
</div>4 X& {! r \0 ^9 }
</div>
0 u% I+ D: `% D+ G' O `' M注意： 當web應用有大量的內容（文字，圖片，腳本等）將會嚴重影響加載時間。如果你不想使用內頁連結可以使用外部檔案：) D" }2 c4 S4 G# I; c
7 J9 K. x" l2 B! |$ n. a; D<a href="externalfile.html">訪問外部檔案</a>
+ W: O) P: x( h. B2 H* K" @* w& U" q9 I4 t
頁面作為對話框使用5 \) E+ F7 U! S
* C! c" D2 W# s: M對話框是用於顯示頁面內容顯示或者表單內容的輸入。& w p9 V' y" v5 K! }
1 g- X0 C' n$ _& R
在連結中增加data-rel="dialog"讓會員點閱連結時彈出對話框:
9 _9 W3 s2 @7 l# O. B3 v實例
) |+ |3 E& D8 G2 L. E. e1 ` ?( ?<div data-role="page" id="pageone">9 g4 d: c. O2 t4 ]4 {# s# [: s$ J
<div data-role="main" class="ui-content">% t$ R* t4 ~7 a. K8 m
<a href="#pagetwo">跳轉到第二個頁面</a>8 N( ], p `9 v
</div>
9 r$ \( V% B w9 J4 @: A8 t</div>& ]+ |) n4 ~0 a5 z; h
+ d& d1 O1 r, f, _3 }<div data-role="page" data-dialog="true" id="pagetwo">
9 B. |# n% [* H% @& X% y0 i. T <div data-role="main" class="ui-content">3 t6 R* ^) H k/ v: D
<a href="#pageone">跳轉到第一個頁面</a>% e$ x$ f- t3 p6 ^3 u2 F
</div>
2 F3 h" j& m# G</div> |
|
|Archiver|手機版|禁閉室|MyXNova (原 myxnova.com)
聲望
現金
存款
瀏覽推廣
註冊推廣
金幣
遊戲幣
鑽石
IP卡
狗仔卡
[資訊未更新]
發表於 2016-6-25 16:22:43
提升卡
置頂卡
沉默卡
喧囂卡
變色卡
千斤頂
顯身卡