等級：25 - 爐火純青 經驗值：0 / 245 魔法值：14180 / 14180 生命值：5%
升級
   100%
TA的每日心情 | 奮斗
1 小時前 |
|---|
簽到天數: 5710 天 [LV.Master]伴壇終老
|
馬上註冊，結交更多好友，享用更多功能，讓你輕鬆玩轉社群。
您需要 登入 才可以下載或檢視，沒有帳號？立即註冊
×
jQuery Mobile 是用於建立移動 Web 應用的前端開發框架。 7 B c7 s3 T. [: F0 x' }
jQuery Mobile 可以應用於智能手機與平板電腦。 2 }- V9 E% F. _
jQuery Mobile 使用 HTML5 & CSS3 最小的腳本來佈局網頁。
# f" @ Q- D7 i8 b/ r
0 M. w7 n" M- p+ Z# f; ?什麼是 jQuery Mobile? / D5 [3 W$ H+ l
$ t& g. t* e3 M# Q- NjQuery Mobile 是針對觸屏智能手機與平板電腦的網頁開發框架。 ! N7 m1 v! R: v/ \3 `
$ [- L, D9 c- c; S7 {! h+ z: n
jQuery Mobile 工作與所有主流的智能手機和平板電腦上： 2 a/ A8 C% e% d/ n; Y$ z! x% `( D8 r$ u
8 `, G; y8 A; M- OjQuery Mobile 構建於 jQuery 以及 jQuery UI類庫之上，如果您瞭解 jQuery，您可以很容易的學習 jQuery Mobile。 " _( g+ d% W2 E; W
jQuery Mobile 使用了極少的 HTML5、CSS3、JavaScript 和 AJAX 腳本代碼來完成頁面的佈局渲染。
, y% ^( K1 S- v
5 h5 C# n2 m0 h8 _0 C' ?為什麼使用 jQuery Mobile?
& G$ Q" }6 x$ R& J( m1 E* J" A. X6 g& c2 z' K
通過使用jQuery Mobile 可以 "寫更少的代碼，做更多的事情" : 它可以通過一個靈活及簡單的方式來佈局網頁，且兼容所有移動設備。
5 x" f A* F6 M" Plamp 不同設備使用了不同開發語言，jQuery Mobile可以很好的兼容不容的設備或操作系統：
8 K! h6 a1 b) m$ D7 j
% P; j5 x4 w2 V* r Android 和 Blackberry（黑莓） 使用JAVA語言。
; Q, ]; F3 C" b2 G/ ]! a iOS 使用 Objective C 語言. p% |( A( O, X, l& [" B! K4 {
Windows Phone 使用 C# 和 .net, 等。- C( s6 F6 r+ J7 V8 b& v, B2 O# f
( f9 i2 K' [/ n( a
jQuery Mobile 解決了不同設備兼容的問題，因為它只使用HTML，CSS和 JavaScript，這是所有移動網絡瀏覽器的標準！
" R- D) D0 l8 x4 D' R3 |/ B: d9 g0 p9 {
* j7 {9 n, d& ]" rjQuery Mobile 安裝: i- L8 t V9 ]. {
在你的網頁中增加 jQuery Mobile
* ?9 c, P# y) ?8 Q6 P! K2 ]/ K
J6 B" c+ `0 F+ q7 K7 s; q你可以通過以下幾種方式將jQuery Mobile增加到你的網頁中：2 [( i3 n: l3 s6 b# l
0 R3 E( p4 S% J4 C; K6 K9 @ 從 CDN 中加載 jQuery Mobile (推薦)
$ ]/ a% i# r( \. a/ c" h+ a; o 從jQuerymobile.com 下載 jQuery Mobile庫. V H9 i9 Q- u0 x2 Q9 |
4 ^+ w# ^3 W8 U( T3 c下載 jQuery Mobile. n/ s9 Q1 d2 a5 [# v
9 M9 I/ r) P) h/ @* k; Z
如果你想將 jQuery Mobile 放於你的主機中,你可以從 jQuerymobile.com下載該檔案。. l- D% O5 B, o" j
( P) a0 V, F% e) J0 e, r
<head>5 j4 k# J, q: O0 k$ T$ B
<meta name="viewport" content="width=device-width, initial-scale=1">7 M: |# c) i1 H* o L6 Z+ ?
<link rel="stylesheet" href="jquery.mobile-1.4.5.css">
+ N! p0 S. H- B<script src="jquery.js"></script> b( q) {8 ?' t
<script src="jquery.mobile-1.4.5.js"></script>0 Y8 t3 d" [. P
</head>
& y) {0 q1 v: n5 x6 p; f% E3 ^' i. _- g. z( i7 X5 F. _5 m* h( v
提示： 將下載的檔案放置於與網頁同一目錄下。 L; s; [3 i9 E9 R3 s" ]+ a" }6 Q
lamp 你是否想知道為什麼在 <script> 標籤中 沒有插入 type="text/javascript" ?
; @' k) R8 d1 w
' ^. W& t. V: ^$ K/ L9 o- v在 HTML5 已經不需要該屬性。 JavaScript 在所有現代瀏覽器中是 HTML5 的預設腳本語言！
h: ^0 D4 H% }5 M, N
0 T+ w+ @2 y& [( m/ {jQuery Mobile 頁面
, D/ q) @( d2 z8 K! C開始學習 jQuery Mobile; a/ R. e3 m$ A; c
實例 U2 h3 Y# Q. j. d. C- B9 p; L
<body>
, ^$ M0 s1 `0 e7 R<div data-role="page">
% |1 }. f$ m+ R* p- f7 f! t) w- @: y/ a: X/ A3 _& o7 S9 q
<div data-role="header">5 C" J! F9 f5 A, M9 J2 v, x
<h1>歡迎來到我的主頁</h1>$ w0 ^! {! J9 @2 Y' ^ z
</div>
& @+ r/ O X4 G3 W7 T$ L# j" E/ B. b/ z$ Q- U" Y1 K
<div data-role="main" class="ui-content">' b& F9 {( A& K D# ?2 A& y* R
<p>我現在是一個移動端開發者!!</p>, ?8 W, { u7 t% v' G" f
</div>. c" m+ M, d, z j1 V# m8 d
$ _# N$ h+ j% u. P% V8 y6 F/ f( V& ] <div data-role="footer">3 l9 c9 k4 Q# U. Z
<h1>底部文字</h1>
- z; o5 e; U& E* [- z) ]1 S </div>! ?8 K' q; x# i6 D
- e1 }! C3 b1 j( R6 t; h</div>
9 ~& U6 x( |5 {( H M+ S2 v9 V# v</body>
8 W) c4 I; W/ d2 ]: Q" W Y實例解析：9 k% H' W$ m) F5 ?5 u0 Z
* @1 I) @# Q- y( W( J5 i
data-role="page" 是在瀏覽器中顯示的頁面。9 ^, ^$ e8 K' s: m2 R% u5 a3 [- F
data-role="header" 是在頁面頂部建立的工具條 (通常用於標題或者搜尋按鈕)9 v8 n+ \' R+ T/ o
data-role="main" 定義了頁面的內容，比如文字， 圖片，表單，按鈕等。
0 P: Z! C, [0 \ H "ui-content" 類用於在頁面增加內邊距和外邊距。2 @9 \! [& ]' h
data-role="footer" 用於建立頁面底部工具條。
8 a5 d5 F% N& \& c7 ]* a5 d 在這些容器中你可以增加任何 HTML 元素 - 段落, 圖片, 標題, 列表等。
4 f' e" E* R5 \5 |0 B3 e
0 z. G' u( ?5 p6 K& U2 |lamp jQuery Mobile 依賴 HTML5 data-* 屬性來支援各種 UI 元素、過渡和頁面結構。不支援它們的瀏覽器將以靜默方式棄用它們。
4 e& J' g. d4 o* S
z+ [" l( W# _% J( p3 N9 t6 v在頁面中增加 jQuery Mobile
( N4 f% {' }* x+ \: V" ]6 g8 L; X+ ^# V' z& j7 V; q0 L% \
使用 jQuery Mobile, 你可以再單個 HTML 檔案中建立多個不同的頁面。
! m6 s: R3 q$ y2 A1 r7 ]" b" z2 H5 |) B* h9 O0 c; z
你可以使用不同的href屬性來區分使用同一個唯一id的頁面：! L0 A2 M; o8 ]' Q8 |7 b
實例, z# q! \0 _0 G2 }0 l
<div data-role="page" id="pageone">
. S3 N6 H) i: w: b2 Y N <div data-role="main" class="ui-content">' A2 T/ l0 C& I9 {8 b$ H
<a href="#pagetwo">跳轉到第二個頁面</a>
" Y+ y& i6 Q# Z* y* V9 ]0 Q, w. u* ] </div>) ]2 P5 c! u% }2 I5 I
</div>0 `, T% k4 t1 ~; s8 K
' n' c3 V8 S! |
<div data-role="page" id="pagetwo">
9 | B$ l" t; b$ w4 x/ Q9 p <div data-role="main" class="ui-content">& F' e2 | b) |8 Q
<a href="#pageone">跳轉到第一個頁面</a>9 u2 W# _/ @7 L2 v
</div>, |! B8 b3 R% w
</div>
0 D$ r3 P" W% {0 I( o6 s$ C9 X6 L( L注意： 當web應用有大量的內容（文字，圖片，腳本等）將會嚴重影響加載時間。如果你不想使用內頁連結可以使用外部檔案：
! |0 i: N c! _' E+ p6 K# s: k# p9 f5 n# ^1 A% k& ?( \& D! p
<a href="externalfile.html">訪問外部檔案</a>
+ ?$ K6 g+ j% J" Y8 m
5 V( o7 N8 G& y/ x4 o) H1 c- h頁面作為對話框使用
8 {3 I9 [" N5 q5 s' U' _) I! v1 f: c4 |& r# D( S9 B
對話框是用於顯示頁面內容顯示或者表單內容的輸入。+ T9 B, J: a% k% L
. u8 S1 @( `) r8 w在連結中增加data-rel="dialog"讓會員點閱連結時彈出對話框:
3 Q' g7 ]+ Q5 p% {' a3 N% k實例
# g% t- l( b7 ?3 V h0 \% f<div data-role="page" id="pageone">- E- r. g5 z! e) {
<div data-role="main" class="ui-content">
% J7 [( k! j. U) a1 A <a href="#pagetwo">跳轉到第二個頁面</a>
7 _' Y/ p$ Q' T' y. t- \5 X </div>
U0 i% @" Q3 t</div>1 M" c! H% T* P% v3 X9 i0 {( P" i0 A
4 p+ f3 E& |+ V0 J<div data-role="page" data-dialog="true" id="pagetwo">& J" S3 w: F, o; b7 }8 D9 @$ F! C
<div data-role="main" class="ui-content">
Y: E0 V9 T, o) n. ] Y l <a href="#pageone">跳轉到第一個頁面</a>
2 o3 A! E& B+ X* {7 @/ e </div>4 O8 W" V# h) d9 I$ W* S: O8 ?8 K
</div> |
|
|Archiver|手機版|禁閉室|MyXNova (原 myxnova.com)
聲望
現金
存款
瀏覽推廣
註冊推廣
金幣
遊戲幣
鑽石
IP卡
狗仔卡
[資訊未更新]
發表於 2016-6-25 16:22:43
提升卡
置頂卡
沉默卡
喧囂卡
變色卡
千斤頂
顯身卡