等級：25 - 爐火純青 經驗值：0 / 246 魔法值：15040 / 15040 生命值：6%
升級
   100%
TA的每日心情 | 奮斗
14 小時前 |
|---|
簽到天數: 5981 天 [LV.Master]伴壇終老
|
馬上註冊，結交更多好友，享用更多功能，讓你輕鬆玩轉社群。
您需要 登入 才可以下載或檢視，沒有帳號？立即註冊
×
jQuery Mobile 是用於建立移動 Web 應用的前端開發框架。
0 ` K9 g- E+ w8 `' JjQuery Mobile 可以應用於智能手機與平板電腦。
8 t( C3 x) `; D) _; t3 MjQuery Mobile 使用 HTML5 & CSS3 最小的腳本來佈局網頁。
- W2 c4 v' |" |( d& ?: ~4 j; z! e" x6 q( ?' E/ D
什麼是 jQuery Mobile? ! |: Q. B* R& c2 l# o8 A! @% p2 I
( o: U" B* _2 ?6 x! H# JjQuery Mobile 是針對觸屏智能手機與平板電腦的網頁開發框架。
, a' s5 C7 d! o: @2 i% Y" b6 a `2 `+ P3 A
jQuery Mobile 工作與所有主流的智能手機和平板電腦上：
. U* g+ G5 y8 P. @" Y# h, o4 n- @/ c$ H$ ]
jQuery Mobile 構建於 jQuery 以及 jQuery UI類庫之上，如果您瞭解 jQuery，您可以很容易的學習 jQuery Mobile。
$ R7 Z0 t3 S# |/ d& [jQuery Mobile 使用了極少的 HTML5、CSS3、JavaScript 和 AJAX 腳本代碼來完成頁面的佈局渲染。
2 O% d$ M/ s5 r% c& @1 ~7 Y2 _0 X, {& l
9 B8 d3 h; ?1 c為什麼使用 jQuery Mobile?1 s/ R$ F" E" Y( C
+ i- z3 c5 ?% s0 I7 A
通過使用jQuery Mobile 可以 "寫更少的代碼，做更多的事情" : 它可以通過一個靈活及簡單的方式來佈局網頁，且兼容所有移動設備。5 W* z, \0 {) Q( Y% _9 X
lamp 不同設備使用了不同開發語言，jQuery Mobile可以很好的兼容不容的設備或操作系統：0 u4 R* e* `1 L5 [* [0 D* p7 w
1 b7 v0 v. m& Q3 ^
Android 和 Blackberry（黑莓） 使用JAVA語言。
! W, _8 p0 e: W8 K- G1 ^% R3 T/ W iOS 使用 Objective C 語言
6 \ ~1 w# ~. u5 z3 R6 ^7 |% T6 Y Windows Phone 使用 C# 和 .net, 等。
/ k7 ?" O) L( k' u! G* O, o. H! N; Q- p* n5 h
jQuery Mobile 解決了不同設備兼容的問題，因為它只使用HTML，CSS和 JavaScript，這是所有移動網絡瀏覽器的標準！
: {0 y7 |# T( W/ T6 o. H1 ?5 ^; U' ^
jQuery Mobile 安裝9 I0 y7 t c5 a& }. g
在你的網頁中增加 jQuery Mobile
: q* P: @$ v# e6 d0 b" ~/ z) z7 x- @5 F6 Q+ X+ {* F2 f) d6 V
你可以通過以下幾種方式將jQuery Mobile增加到你的網頁中：4 C( V0 B7 [& Q8 A; D
+ p; ^2 S$ c' y. Y 從 CDN 中加載 jQuery Mobile (推薦)
1 W0 D! G9 _8 L8 A: J) } 從jQuerymobile.com 下載 jQuery Mobile庫
' J* M) {' [( [- ^5 J2 |$ A
* r' L1 D# O& A. e, x B/ t3 U# }下載 jQuery Mobile
p5 e m. s) {
' L* [& A8 f8 p. F如果你想將 jQuery Mobile 放於你的主機中,你可以從 jQuerymobile.com下載該檔案。
3 {: O, U: w" j+ q8 l0 T; I! N( v" X
<head>
/ }6 D! V' W. h6 [<meta name="viewport" content="width=device-width, initial-scale=1">
6 R2 ^0 n) h# S8 J" _<link rel="stylesheet" href="jquery.mobile-1.4.5.css">
+ W, N2 {0 T. E5 T; G<script src="jquery.js"></script>) r( Z, x& @/ h- I* ]5 U+ O7 b
<script src="jquery.mobile-1.4.5.js"></script>
0 z/ p: H; ^; M6 G, A' S</head>0 r5 C% z7 Y( Z9 H$ _& N# T
9 \) s* U3 F7 h1 H. f/ C# ] B提示： 將下載的檔案放置於與網頁同一目錄下。
5 o1 E2 A3 Q/ z6 d+ m0 u# Dlamp 你是否想知道為什麼在 <script> 標籤中 沒有插入 type="text/javascript" ?
/ K% I) D$ S7 J9 H, w
, x4 x5 [3 T7 d& b- ?' d# y1 U在 HTML5 已經不需要該屬性。 JavaScript 在所有現代瀏覽器中是 HTML5 的預設腳本語言！
$ s7 A+ O O1 E6 E5 x8 H6 M9 N7 g" C ^0 f# g. {
jQuery Mobile 頁面& S/ m' [. T0 H
開始學習 jQuery Mobile
' t; x$ j4 T$ q+ W4 D實例
; G6 h- I/ f2 @# D) b0 C. e) ^<body>
( j, V+ B7 F5 E* n/ V6 @<div data-role="page">; z* ^2 G! [0 i, U: _4 {9 J
0 j3 [# p0 o# E! A2 {
<div data-role="header">0 ^$ O9 g& r3 B
<h1>歡迎來到我的主頁</h1>, x, B1 Z! L3 e* _, y9 `) _
</div>% @. k5 z3 {: E/ ~& q
+ Q% D" P% B; b" j
<div data-role="main" class="ui-content">, [3 ^' L+ f1 M2 [8 ~: Y! H
<p>我現在是一個移動端開發者!!</p>
1 Q, N. m8 _' Y! |& g </div>! ~9 c) ~9 Y6 ~7 E
9 B5 g5 ^6 k" y1 h5 x2 V
<div data-role="footer">
( O, h3 d7 F. l8 s$ O <h1>底部文字</h1>6 \# b* z3 n+ W' Y0 O( s/ a
</div>
0 w) C# x: Y- x; L% e
. [# {5 O8 C$ y6 G# m w' z1 i1 V% ?</div>
6 B& u0 Z2 y, O* H; p" O( I+ L</body>
& ]7 S" w1 R2 p9 f5 b: M; n實例解析：. B" {: g! {: B& P. h
" C- N" E6 Q8 G: C+ t+ }
data-role="page" 是在瀏覽器中顯示的頁面。7 j9 V; L4 L2 ^! r
data-role="header" 是在頁面頂部建立的工具條 (通常用於標題或者搜尋按鈕)
5 X) y7 b" D5 Z9 h data-role="main" 定義了頁面的內容，比如文字， 圖片，表單，按鈕等。
) H2 C% u. ~! H8 P. `1 b "ui-content" 類用於在頁面增加內邊距和外邊距。+ v, H, g2 `: q$ `9 y# ? f/ d4 b* }0 C
data-role="footer" 用於建立頁面底部工具條。
1 V0 q3 T+ o- {5 j7 E9 r 在這些容器中你可以增加任何 HTML 元素 - 段落, 圖片, 標題, 列表等。
1 d, t( z8 C! M9 k- e
7 V) k/ i- l$ A( P6 ]lamp jQuery Mobile 依賴 HTML5 data-* 屬性來支援各種 UI 元素、過渡和頁面結構。不支援它們的瀏覽器將以靜默方式棄用它們。5 l; v% C: V# o" Y
4 e/ \/ o9 _$ i* X( f在頁面中增加 jQuery Mobile
7 L5 O& B, a+ d9 S& [* g& t" ~- n: Q" g2 N" f" p1 M# n
使用 jQuery Mobile, 你可以再單個 HTML 檔案中建立多個不同的頁面。
6 G/ `, V' u5 f2 ]3 c
& ~& J! |1 ^# H% d; I6 G- t/ r你可以使用不同的href屬性來區分使用同一個唯一id的頁面：; z; y; a, J* n5 I0 e
實例9 d2 P0 e" f. A" x
<div data-role="page" id="pageone">
0 |( s1 f# n" ]8 G2 _ <div data-role="main" class="ui-content">& h$ r5 x# k. X- d o* r
<a href="#pagetwo">跳轉到第二個頁面</a>
' X: n* K- B( U8 N </div>3 h+ k+ l1 J6 g4 Z- g7 N# c! p, y
</div>' h. h8 g& R. Z1 A. L: e
- c) G! v. i" @% Z4 s<div data-role="page" id="pagetwo">
+ {( ?$ G9 O, ?' @6 Q" Y. o( o% F <div data-role="main" class="ui-content"># b8 g, C$ N6 i- i. z3 i3 ~
<a href="#pageone">跳轉到第一個頁面</a>+ t- K8 X: r+ o; l& B. |
</div>+ U D; h$ F* v [9 N. s" o* v
</div>
3 _. @0 K/ c: [" o; _# m+ |+ K( o$ e注意： 當web應用有大量的內容（文字，圖片，腳本等）將會嚴重影響加載時間。如果你不想使用內頁連結可以使用外部檔案：
: }! S( N9 i/ S9 c
) z* g3 x' ?+ ^0 Z' c. B+ U% o<a href="externalfile.html">訪問外部檔案</a>
' K3 |3 u& ?7 t. H) R8 |7 b" r/ Q% G5 |: P1 f+ H% a
頁面作為對話框使用" b- p. A5 H" @& Y1 y) I, ], ^
V/ d; [6 ^9 T7 {2 @3 x
對話框是用於顯示頁面內容顯示或者表單內容的輸入。) P& Q, J8 ^9 a, [4 ]* [
2 m- O/ ^: d1 M$ f! z8 `在連結中增加data-rel="dialog"讓會員點閱連結時彈出對話框:. y( b: M n+ ~1 k) N8 X: O
實例
1 E. o9 o* i+ n8 _3 o# ~: D# X<div data-role="page" id="pageone">$ O+ ~& Y5 f* b) u9 H) @
<div data-role="main" class="ui-content">
+ s; z: S6 |) |% g. z" H <a href="#pagetwo">跳轉到第二個頁面</a>
: A. \* a: U7 e& N' F </div>
1 P5 a7 }$ K2 f% w* |$ e* Z' ?</div>5 b: N; A1 v' i0 t1 b
1 m; @( `# U- k5 d) c<div data-role="page" data-dialog="true" id="pagetwo">
) k8 h" Q9 m V/ F4 k( \: g <div data-role="main" class="ui-content">5 g8 X8 m: w: }4 m
<a href="#pageone">跳轉到第一個頁面</a>
. h$ Y7 U$ H: p8 s F% S- `; n3 w </div>" ~+ q. s3 h8 Q4 c9 P( }
</div> |
|
|Archiver|手機版|禁閉室|MyXNova (原 myxnova.com)
聲望
現金
存款
瀏覽推廣
註冊推廣
金幣
遊戲幣
鑽石
IP卡
狗仔卡
[資訊未更新]
發表於 2016-6-25 16:22:43
提升卡
置頂卡
沉默卡
喧囂卡
變色卡
千斤頂
顯身卡