等級：25 - 爐火純青 經驗值：0 / 245 魔法值：13750 / 13750 生命值：5%
升級
   100%
TA的每日心情 | 郁悶
5 小時前 |
|---|
簽到天數: 5559 天 [LV.Master]伴壇終老
|
馬上註冊，結交更多好友，享用更多功能，讓你輕鬆玩轉社群。
您需要 登入 才可以下載或檢視，沒有帳號？立即註冊
×
jQuery Mobile 是用於建立移動 Web 應用的前端開發框架。
+ Z5 c% i; ^" u% q+ `: c' _jQuery Mobile 可以應用於智能手機與平板電腦。
& B5 X" V$ l# S. {( UjQuery Mobile 使用 HTML5 & CSS3 最小的腳本來佈局網頁。1 \/ X/ ]' i! ]# K* ^
. t' G, U: p) a) D+ p8 Z什麼是 jQuery Mobile? 4 y: W6 H7 j$ G( v+ e" a
$ o% H/ s$ e$ \* x% m, t
jQuery Mobile 是針對觸屏智能手機與平板電腦的網頁開發框架。
1 n1 h, u" X( d; J$ ~8 S8 X
" M8 |! b& i! |- f' E! XjQuery Mobile 工作與所有主流的智能手機和平板電腦上： 3 C! S$ ~1 B5 W o8 u6 J
8 i8 J' `9 X1 L9 r. [, X( S, o
jQuery Mobile 構建於 jQuery 以及 jQuery UI類庫之上，如果您瞭解 jQuery，您可以很容易的學習 jQuery Mobile。
6 _: s! Q9 _& ^. C; pjQuery Mobile 使用了極少的 HTML5、CSS3、JavaScript 和 AJAX 腳本代碼來完成頁面的佈局渲染。% E7 N1 S5 e2 N
6 o7 q8 b# S5 h" e- x5 I
為什麼使用 jQuery Mobile?
3 g% S- p1 q# s' z4 v8 N5 d% }
. h: ^, `( {# `通過使用jQuery Mobile 可以 "寫更少的代碼，做更多的事情" : 它可以通過一個靈活及簡單的方式來佈局網頁，且兼容所有移動設備。$ T. l A2 j* U$ P, \/ J" X5 m
lamp 不同設備使用了不同開發語言，jQuery Mobile可以很好的兼容不容的設備或操作系統：# k* B9 n: o/ }
" q0 [: B# w, L: H5 ` Android 和 Blackberry（黑莓） 使用JAVA語言。2 F, }! |# |. K" c! X
iOS 使用 Objective C 語言
! z4 t$ L8 Z, q+ Z Windows Phone 使用 C# 和 .net, 等。9 F; [+ G3 z# F) _# \- y
9 r; r/ \/ e/ gjQuery Mobile 解決了不同設備兼容的問題，因為它只使用HTML，CSS和 JavaScript，這是所有移動網絡瀏覽器的標準！
& z4 v6 | j2 k8 }, U& R: H- J1 K9 y
jQuery Mobile 安裝
$ _2 @5 G9 y& }4 B6 o/ r在你的網頁中增加 jQuery Mobile8 J5 l7 d- `3 c, z* [' g0 ^& m
9 l6 j, ?0 v2 ^0 t* ]8 g. g9 C4 V
你可以通過以下幾種方式將jQuery Mobile增加到你的網頁中：
7 U' z+ H2 R/ G4 N
8 A8 \6 I7 {% H/ X4 x. p# B 從 CDN 中加載 jQuery Mobile (推薦) j+ D; I; |2 K" [+ x- p
從jQuerymobile.com 下載 jQuery Mobile庫6 G3 u$ L* ^" i- d7 [, T
3 i D) x) r9 d0 ]- t* z: w3 L
下載 jQuery Mobile& Y2 B* t# g% R$ M+ S6 R
& V% g( g; ~$ {) A1 Y如果你想將 jQuery Mobile 放於你的主機中,你可以從 jQuerymobile.com下載該檔案。' l/ ~5 x3 K: l) B5 ~2 K% x
1 f; S9 T2 R% @
<head>" T/ Q4 W, D- l9 }% r; ]9 L+ R
<meta name="viewport" content="width=device-width, initial-scale=1">. E: p/ h- A, W# Y; x. p- U
<link rel="stylesheet" href="jquery.mobile-1.4.5.css">
. E d" q& w1 K9 H* h6 C' ?2 n7 _1 Y<script src="jquery.js"></script>. N* m$ v: O# Q: F
<script src="jquery.mobile-1.4.5.js"></script>& k2 ?+ A9 X) q' v
</head>* l' P9 r' y1 l c* x
: \4 Q& Q% x0 x# n- ?& V提示： 將下載的檔案放置於與網頁同一目錄下。0 H4 D5 n c8 N/ O
lamp 你是否想知道為什麼在 <script> 標籤中 沒有插入 type="text/javascript" ?5 h+ P% o s! _1 Y/ Q6 m
6 ]- j' ~7 i6 \& q ?8 W4 G/ l& }在 HTML5 已經不需要該屬性。 JavaScript 在所有現代瀏覽器中是 HTML5 的預設腳本語言！
6 m% Y! C& `5 s, d/ [. U; k9 c4 E
2 }; S& x; }/ w) K. }. zjQuery Mobile 頁面
" B1 L( u( S9 q% x0 o* `開始學習 jQuery Mobile
8 P- V* Y1 U+ x/ _. ?! T" C實例
8 w- R* e: k6 t5 Y. R<body>3 G( a- M3 ^" }+ k1 U& _. K! m: d
<div data-role="page">
) a2 _9 B5 e0 [+ o0 p' N- g
3 X0 [/ [( ^, K, V5 s3 j* k+ Y <div data-role="header">/ l3 a7 t4 t( p
<h1>歡迎來到我的主頁</h1>7 d6 Q8 o0 l! P* L3 h( v
</div>
6 Y. n6 e1 U7 K6 d: g
2 |3 R4 L7 N" K# @- c+ R, ~ <div data-role="main" class="ui-content">
2 A; [. ?, u) B6 V2 N <p>我現在是一個移動端開發者!!</p>
& D+ ?4 d B& q$ S$ _ </div>
8 k1 I3 E" d: p C; s$ r9 ?, D; c w6 c- K1 a
<div data-role="footer">
) @$ @9 s& e: x3 y <h1>底部文字</h1>; o1 H h+ H. l4 F6 F
</div>$ H7 F, ^9 h2 O, ?
; m0 G7 S2 q4 I" l; w) j
</div>. g8 C2 A$ j/ g5 @% \ w
</body>
' h1 }. V' v7 |; ? a( U. y實例解析：- j0 S# j# l9 Z+ o8 E
, A2 U: A0 n4 s$ j2 Y data-role="page" 是在瀏覽器中顯示的頁面。
+ q& |% K! p* {& \# [; O( t+ N data-role="header" 是在頁面頂部建立的工具條 (通常用於標題或者搜尋按鈕)' G& @2 V s" q
data-role="main" 定義了頁面的內容，比如文字， 圖片，表單，按鈕等。0 W, r2 y* D; [& K
"ui-content" 類用於在頁面增加內邊距和外邊距。
1 v( [9 C8 i1 @8 v data-role="footer" 用於建立頁面底部工具條。 ~( l J# i5 q7 Y S2 P: y& c
在這些容器中你可以增加任何 HTML 元素 - 段落, 圖片, 標題, 列表等。# r; g4 `0 |5 t: h8 s
% m% D( D a& L% L# k% V
lamp jQuery Mobile 依賴 HTML5 data-* 屬性來支援各種 UI 元素、過渡和頁面結構。不支援它們的瀏覽器將以靜默方式棄用它們。
$ a2 ^- ~4 M! {- a( o! o% v& t' A: y6 r! D n) [1 t. L8 i
在頁面中增加 jQuery Mobile
$ D' A0 _$ {3 x( {, t! J2 |* l5 c1 P! E4 q& B* {4 m( r1 E% |( D
使用 jQuery Mobile, 你可以再單個 HTML 檔案中建立多個不同的頁面。) U, P% h" w5 T2 @: j5 g
, h8 o4 m6 s J+ h
你可以使用不同的href屬性來區分使用同一個唯一id的頁面：; U+ c! i! i5 g9 N% G
實例
% v' S# v2 C7 Z2 L- w6 b/ U<div data-role="page" id="pageone">9 ~( D8 h4 E( m! d1 E8 G+ F
<div data-role="main" class="ui-content">
% ^* A2 Z8 e# h5 @4 m- F <a href="#pagetwo">跳轉到第二個頁面</a>
7 w9 q' c# e1 p </div>/ S# [2 k. q7 R& _! V
</div>
4 \0 \/ k; x; a! l$ K5 y: ~
9 K' c0 ~* D- J" x5 `. T<div data-role="page" id="pagetwo">/ m1 {: m% d0 d# g( [4 R
<div data-role="main" class="ui-content">
3 C; O, B7 P9 f0 I# s3 R- ` <a href="#pageone">跳轉到第一個頁面</a>
6 v1 E% j& R- Y0 K7 s8 X7 O </div>( I' ?" H) k0 \ o7 J) \$ ? @
</div>
( d5 x2 `& H1 R. }& }9 X注意： 當web應用有大量的內容（文字，圖片，腳本等）將會嚴重影響加載時間。如果你不想使用內頁連結可以使用外部檔案：9 N# _, d' Z2 [4 I7 h
7 H7 a% {* d/ P. J8 {4 Y<a href="externalfile.html">訪問外部檔案</a>/ V, K3 _7 P' d6 L( V
0 w0 U0 B+ P7 c" D
頁面作為對話框使用$ }! B7 j" z8 Q, |; K5 a: }% k$ [
+ p4 g7 c4 o: D2 l6 I: s對話框是用於顯示頁面內容顯示或者表單內容的輸入。
7 i+ J0 W6 u. \5 k: X; }, k
+ L1 {$ I. G( {9 T: X在連結中增加data-rel="dialog"讓會員點閱連結時彈出對話框:
% ~* c T* Z5 n0 i) _9 v實例8 c! u! N C7 P( e$ K
<div data-role="page" id="pageone">" J6 T, S/ x+ d. U+ i7 l
<div data-role="main" class="ui-content">
- I- f- L8 W) J; Z$ O$ L& f <a href="#pagetwo">跳轉到第二個頁面</a>) m# W8 Y9 b* R* e
</div>
1 L9 u/ Z( X6 W1 c, B+ N1 R# Y2 g</div>
( L$ l4 F7 Q( } _. ^) f& o3 i* U" x% K0 W# `$ [
<div data-role="page" data-dialog="true" id="pagetwo">- |* ]: o9 l8 n: e F* `
<div data-role="main" class="ui-content">
f8 Y* R: k0 M <a href="#pageone">跳轉到第一個頁面</a>% g' L" J! K$ S9 o- t6 ]$ j4 i
</div>
0 }2 h2 {* D* ^. D8 D; O5 G' f</div> |
|
|Archiver|手機版|禁閉室|MyXNova (原 myxnova.com)
聲望
現金
存款
瀏覽推廣
註冊推廣
金幣
遊戲幣
鑽石
IP卡
狗仔卡
[資訊未更新]
發表於 2016-6-25 16:22:43
提升卡
置頂卡
沉默卡
喧囂卡
變色卡
千斤頂
顯身卡