等級：25 - 爐火純青 經驗值：0 / 245 魔法值：14097 / 14097 生命值：5%
升級
   100%
TA的每日心情 | 奮斗
8 小時前 |
|---|
簽到天數: 5678 天 [LV.Master]伴壇終老
|
馬上註冊，結交更多好友，享用更多功能，讓你輕鬆玩轉社群。
您需要 登入 才可以下載或檢視，沒有帳號？立即註冊
×
jQuery Mobile 是用於建立移動 Web 應用的前端開發框架。
4 m$ W; W9 e& L3 N+ yjQuery Mobile 可以應用於智能手機與平板電腦。
/ b: Z G- m$ q. pjQuery Mobile 使用 HTML5 & CSS3 最小的腳本來佈局網頁。
. S; x4 B- b+ w9 X' P+ _9 j
! ?3 M0 H" r. @( g. [# e, B什麼是 jQuery Mobile? ' e) z! A+ y: }; s/ s
; l0 n. E! \2 K
jQuery Mobile 是針對觸屏智能手機與平板電腦的網頁開發框架。 , a. _9 c. Y& N6 l+ O3 l* ]: B
1 F `' M$ B% k0 Q- h+ R
jQuery Mobile 工作與所有主流的智能手機和平板電腦上：
5 i- M, Z) n3 S+ q/ H. b& |5 O' s. r( {' V3 H
jQuery Mobile 構建於 jQuery 以及 jQuery UI類庫之上，如果您瞭解 jQuery，您可以很容易的學習 jQuery Mobile。 + H( r4 p( i/ V) k0 H0 G: F+ s1 ?
jQuery Mobile 使用了極少的 HTML5、CSS3、JavaScript 和 AJAX 腳本代碼來完成頁面的佈局渲染。5 [3 Z7 L" |4 w( g( N4 R0 ^
( |& K2 o, V8 _; {1 ^# A3 j
為什麼使用 jQuery Mobile?
. O' l4 n& z: \ \4 F7 G+ ], }; L: A/ J7 o# E
通過使用jQuery Mobile 可以 "寫更少的代碼，做更多的事情" : 它可以通過一個靈活及簡單的方式來佈局網頁，且兼容所有移動設備。
; @* b5 c# L$ E% X1 d: b4 `% l- elamp 不同設備使用了不同開發語言，jQuery Mobile可以很好的兼容不容的設備或操作系統：1 X( s- \! [9 s) t- B8 j$ u
% @# t k6 @* C! m* i
Android 和 Blackberry（黑莓） 使用JAVA語言。
( {; J) D" f: {. |! l% U4 E& V iOS 使用 Objective C 語言
$ h0 q$ S3 m; |" V/ a" ~+ X8 U Windows Phone 使用 C# 和 .net, 等。
6 q- Q# P7 j2 w2 }( h+ f/ H# F6 G$ i; d
jQuery Mobile 解決了不同設備兼容的問題，因為它只使用HTML，CSS和 JavaScript，這是所有移動網絡瀏覽器的標準！( o; }0 l) F6 O) O) e+ C. o# v+ C
1 ~2 O- t k+ e) Z A+ ]4 c" ajQuery Mobile 安裝3 V! W2 B( J, G( e' ~' f Y/ f& m
在你的網頁中增加 jQuery Mobile
7 t: w- u# c/ b8 V. N! \7 d1 m% W2 k: q: u. v7 S+ \& e1 {
你可以通過以下幾種方式將jQuery Mobile增加到你的網頁中：5 ^9 c- ?6 L: N: y o
$ n8 U. a) f# m% F( n# n& H" \ 從 CDN 中加載 jQuery Mobile (推薦)
, _7 l8 g4 \3 e 從jQuerymobile.com 下載 jQuery Mobile庫; u8 }) X: u- C) L* F3 C6 n; Y* l* T
^; O J9 s e% w1 s, `. m
下載 jQuery Mobile) S7 M+ k ?' s7 S2 O4 z
- [1 n0 w6 j3 q: M1 h0 M! ~如果你想將 jQuery Mobile 放於你的主機中,你可以從 jQuerymobile.com下載該檔案。
% ]1 I q( ]( e5 G6 L) E1 d) `4 S: b% _
<head>
" x' c/ x. o) |) L& ^( ^ ?<meta name="viewport" content="width=device-width, initial-scale=1">
6 U+ G* n* U1 _+ p: k# N<link rel="stylesheet" href="jquery.mobile-1.4.5.css">. u; P0 n, r: M- R2 F
<script src="jquery.js"></script>
8 L& K' d& D! K( \6 v& ~6 O<script src="jquery.mobile-1.4.5.js"></script>% {. @; {" D( q' M- |$ D- V% A
</head>
2 W i2 z! m2 W; P/ a
6 v9 _" O/ @7 o3 P7 f提示： 將下載的檔案放置於與網頁同一目錄下。$ M6 {4 P* R) P+ J
lamp 你是否想知道為什麼在 <script> 標籤中 沒有插入 type="text/javascript" ?* i- g$ O; F8 {+ v# `$ X
" J% P- b$ l# Q; G3 b
在 HTML5 已經不需要該屬性。 JavaScript 在所有現代瀏覽器中是 HTML5 的預設腳本語言！) ^9 L, [& U$ v5 q7 b" r5 x$ n
% D9 P1 x9 o2 L* X6 [: u
jQuery Mobile 頁面. P( g. K3 j+ t3 Y+ M/ X6 g
開始學習 jQuery Mobile
) _# K3 h _2 G實例9 Y( g4 \8 z0 k3 G& k
<body>/ ?1 R. l- a2 g; P' |+ W7 t4 e
<div data-role="page">: |; e" V. g3 y, M
% a6 D4 p1 `' D# a
<div data-role="header">
7 J( R4 a+ p3 O o( t5 l( n <h1>歡迎來到我的主頁</h1>+ P) J. R* v$ }4 F I2 p! E% ]
</div>
( H% q3 [, z8 B
& v0 _% D2 A e! ?* m+ b# J <div data-role="main" class="ui-content">
4 P, n" `' @* j3 z <p>我現在是一個移動端開發者!!</p>* P( U+ V& F2 @. y
</div>5 \9 ^; ]5 E r1 B* e. O, ]2 v
w* `+ t; j+ o) x) p. f E8 K <div data-role="footer">
; K0 H* x7 e8 ^/ I, u$ J! W: h <h1>底部文字</h1>
5 e* ]0 S3 q( O </div>
2 Z+ w0 ~5 P& D, _. L4 I
4 @4 ?2 g3 S/ K$ M5 e, @</div>
8 }* L( E- Q& x5 S- ^</body>0 C* T* F6 X7 g$ w: A& M/ b
實例解析：
+ q0 ~! v: C; e H# c6 `6 I! \$ A# D8 p
data-role="page" 是在瀏覽器中顯示的頁面。
$ ?0 P" L5 a+ Y data-role="header" 是在頁面頂部建立的工具條 (通常用於標題或者搜尋按鈕)
2 P- \5 p% l9 g4 k" [ data-role="main" 定義了頁面的內容，比如文字， 圖片，表單，按鈕等。
$ I# N7 F6 g# B% D' v% j& h5 ^ "ui-content" 類用於在頁面增加內邊距和外邊距。
2 Y0 i' M6 H/ e" |( L data-role="footer" 用於建立頁面底部工具條。
' J' `4 B3 `/ p ` 在這些容器中你可以增加任何 HTML 元素 - 段落, 圖片, 標題, 列表等。8 z0 h: I! ^9 |4 h# w, h/ J# o
5 b* ~1 {& Q6 m6 L! m4 T
lamp jQuery Mobile 依賴 HTML5 data-* 屬性來支援各種 UI 元素、過渡和頁面結構。不支援它們的瀏覽器將以靜默方式棄用它們。, [* B6 [3 e( U+ u2 O" O& d& e8 E8 V
2 X3 d9 X- p; v; n: B6 _7 d在頁面中增加 jQuery Mobile
, z2 D, l, n7 g% i- L# ? D& ]2 a8 ]/ |3 C% ?; G N
使用 jQuery Mobile, 你可以再單個 HTML 檔案中建立多個不同的頁面。4 k7 Q* T- x6 H9 R" m0 t5 M) f& C
+ e( D) Q: [% `" h' S7 G$ Q你可以使用不同的href屬性來區分使用同一個唯一id的頁面：
& k( |( f3 U. T4 E( X& B: M v" C實例9 V' o. k, r8 k! Q
<div data-role="page" id="pageone">- L& [. a: c* ?) s4 l: ?( X- ^- G' p
<div data-role="main" class="ui-content">
. s; P3 ` p1 w <a href="#pagetwo">跳轉到第二個頁面</a>3 g; K5 q3 K9 n' f7 _& ~8 W$ f
</div>
. q$ l0 \! v' M. _; H* _</div>; f5 U) M8 {% F" w9 u
7 m/ h: ]8 R8 S- X( z
<div data-role="page" id="pagetwo">' ]* H2 C. o6 V, ^2 g; V
<div data-role="main" class="ui-content">
9 h. F! ~/ b% [% X, v <a href="#pageone">跳轉到第一個頁面</a>
' L) j. ?+ Q. v* v: d0 R </div>) t/ {8 ]4 I8 X& C, _
</div>' r- g c! R6 L G9 F
注意： 當web應用有大量的內容（文字，圖片，腳本等）將會嚴重影響加載時間。如果你不想使用內頁連結可以使用外部檔案：
1 i% ]6 ~' U% f" F# w7 g2 N; {. f R4 l. E9 p
<a href="externalfile.html">訪問外部檔案</a>- V5 v7 ?3 W; f1 o
% |5 a* q1 x# X頁面作為對話框使用$ C* r! P! t0 s5 O
6 ?5 i. w/ I; [" f3 y S: r- B
對話框是用於顯示頁面內容顯示或者表單內容的輸入。4 W# K5 J' p+ A# ~9 R
- d5 N& V+ f4 V" M在連結中增加data-rel="dialog"讓會員點閱連結時彈出對話框:
2 ?% H! _! `! j3 |. Z0 g實例
. e& I! p6 i0 r& z+ q9 ^( b- V<div data-role="page" id="pageone">
0 E1 V' _) z( o+ h) C% l <div data-role="main" class="ui-content">9 f5 L1 u# Y+ q
<a href="#pagetwo">跳轉到第二個頁面</a>
2 q4 z* p; E9 v2 [0 o </div>
( h2 w& K3 t& z, l</div>
; x9 U$ w/ u$ [% c3 J8 V# p/ a4 r
<div data-role="page" data-dialog="true" id="pagetwo">; H; M9 o: R3 j( W
<div data-role="main" class="ui-content">& H5 m. c& x6 W+ r
<a href="#pageone">跳轉到第一個頁面</a>: D6 h3 `3 E% [
</div>" k7 g! f/ ~+ c$ _5 @% A
</div> |
|
|Archiver|手機版|禁閉室|MyXNova (原 myxnova.com)
聲望
現金
存款
瀏覽推廣
註冊推廣
金幣
遊戲幣
鑽石
IP卡
狗仔卡
[資訊未更新]
發表於 2016-6-25 16:22:43
提升卡
置頂卡
沉默卡
喧囂卡
變色卡
千斤頂
顯身卡