等級：25 - 爐火純青 經驗值：0 / 244 魔法值：12906 / 12906 生命值：4%
升級
   100%
TA的每日心情 | 奮斗
昨天 14:56 |
|---|
簽到天數: 5242 天 [LV.Master]伴壇終老
|
馬上註冊，結交更多好友，享用更多功能，讓你輕鬆玩轉社群。
您需要 登入 才可以下載或檢視，沒有帳號？立即註冊
×
jQuery Mobile 是用於建立移動 Web 應用的前端開發框架。
' P1 D* n( f [jQuery Mobile 可以應用於智能手機與平板電腦。
3 m# T4 K4 G+ L8 i' o* }( f% BjQuery Mobile 使用 HTML5 & CSS3 最小的腳本來佈局網頁。6 s) q* M% a4 E, K2 [1 J" d6 {
, w7 y2 X1 T* E4 y7 b6 L, a2 e! H什麼是 jQuery Mobile?
( z/ p+ u9 {, D2 n1 \. O+ p
/ M5 C8 ]4 T% W5 e, s) Z- FjQuery Mobile 是針對觸屏智能手機與平板電腦的網頁開發框架。 + P1 k7 `! s- m' |
/ w) l) @) \( L# t i2 o
jQuery Mobile 工作與所有主流的智能手機和平板電腦上：
+ b3 X' v0 R6 L( H; B7 I
9 x/ _7 |: J2 m3 D9 S' \" ZjQuery Mobile 構建於 jQuery 以及 jQuery UI類庫之上，如果您瞭解 jQuery，您可以很容易的學習 jQuery Mobile。
# d. g- y' t# N3 w: zjQuery Mobile 使用了極少的 HTML5、CSS3、JavaScript 和 AJAX 腳本代碼來完成頁面的佈局渲染。
" l2 {0 i7 }# d! d+ X: O1 F, ]3 O2 ?# T6 {
為什麼使用 jQuery Mobile?
7 h; N8 h# c1 E5 [( |9 ^6 p# V/ o" `9 v
通過使用jQuery Mobile 可以 "寫更少的代碼，做更多的事情" : 它可以通過一個靈活及簡單的方式來佈局網頁，且兼容所有移動設備。
2 q2 z4 _1 h7 Q& Olamp 不同設備使用了不同開發語言，jQuery Mobile可以很好的兼容不容的設備或操作系統：
& i/ L5 e. j$ x) m }4 b: I( t" I: ~! ]+ H# p
Android 和 Blackberry（黑莓） 使用JAVA語言。; o- k+ N. }. M) P/ c
iOS 使用 Objective C 語言
0 l* \7 b3 e" e0 ?' n8 i$ x! O Windows Phone 使用 C# 和 .net, 等。* @+ q; M, J9 y/ e" W
. T- v7 r5 j5 F `* u
jQuery Mobile 解決了不同設備兼容的問題，因為它只使用HTML，CSS和 JavaScript，這是所有移動網絡瀏覽器的標準！; |) u3 @% K ?" U6 f, S% U2 |/ q
' {+ f( x( H7 ^$ g# e6 e3 \
jQuery Mobile 安裝
: S1 E; r! v$ t" R8 T在你的網頁中增加 jQuery Mobile3 H5 X: u5 N8 ~. j8 E
( k! L. E/ p V* D# k4 R m! N你可以通過以下幾種方式將jQuery Mobile增加到你的網頁中：
4 D& t4 [$ {7 D) Q6 h- c5 Z) D9 k
0 w% [2 I0 ~( g" x5 g 從 CDN 中加載 jQuery Mobile (推薦)# s. h# u( V, E2 j0 q! \1 b n2 u
從jQuerymobile.com 下載 jQuery Mobile庫
O0 @' _3 l# E% v1 }* L- E! U9 g; e5 O a9 s
下載 jQuery Mobile
6 X' Z% f& N+ c, |( K2 A( C& Z/ b
- }# B' f$ w& z0 U4 ~如果你想將 jQuery Mobile 放於你的主機中,你可以從 jQuerymobile.com下載該檔案。- Y( P; g+ w1 y) q
2 b) N4 \' E3 v
<head>
* R0 e. C8 E' m2 V( g9 y: D: p<meta name="viewport" content="width=device-width, initial-scale=1">! g$ [6 j8 A/ d9 U* P
<link rel="stylesheet" href="jquery.mobile-1.4.5.css">+ i J1 o5 L" U
<script src="jquery.js"></script>
- k7 |% L8 `4 X+ v l! {<script src="jquery.mobile-1.4.5.js"></script> e+ ?; R* {) s* K( S
</head>. i8 n3 X1 F/ ~5 x' _# ~- I: M
+ G8 ~- G# X( I3 G
提示： 將下載的檔案放置於與網頁同一目錄下。. i$ x5 }1 G$ j: r; z. X4 C
lamp 你是否想知道為什麼在 <script> 標籤中 沒有插入 type="text/javascript" ?
' f+ N$ U5 q& q+ w. h7 i5 }. u2 H, c% u4 C. f/ f8 }$ J! h& r- H
在 HTML5 已經不需要該屬性。 JavaScript 在所有現代瀏覽器中是 HTML5 的預設腳本語言！
* A! A: i' V7 @; v O: v$ s5 _- R' S4 T& E* @2 m1 q
jQuery Mobile 頁面
1 z0 x% m2 m4 h) k開始學習 jQuery Mobile
& z+ O) y' F, v8 n8 T% g5 B! Q5 m實例1 [7 n0 a% D" Y9 w
<body>
4 d# S. R3 C/ G( G$ ?3 r<div data-role="page">0 K- `4 \* B5 m. ^
0 c- j) q7 H+ T! V4 h s% P
<div data-role="header">
* T" H+ j. t, u* H; O" B! }9 r O <h1>歡迎來到我的主頁</h1>2 }0 }% i3 P# q* [& z
</div>
9 } m! `3 v6 g6 b' s) A: h% e; f
. h$ h n7 Z6 z6 O1 d2 p4 ^( e8 O <div data-role="main" class="ui-content">: ^, E) P+ S5 k2 P/ A$ h0 l V
<p>我現在是一個移動端開發者!!</p>& x' d. g. H- H: E* O; L
</div>/ F* |% ~( p; g1 f, N
+ f# K& j( k$ h, H8 ^; F
<div data-role="footer">6 P! s" ~4 i2 {, m R! a
<h1>底部文字</h1>
- B; V" Z1 i8 v' c; e+ R R3 F- V7 Z </div>
% s ?/ h" S; ~9 A1 D
8 w, J7 i, r. @) @" g6 B* ^</div>
2 a _ ^- Q4 v& L4 _</body>
6 L* I0 a7 o/ ^8 z" m( |實例解析：4 ]9 f1 e$ ~ K/ y' T( J6 l
6 _8 w) M1 M* x" Y' G data-role="page" 是在瀏覽器中顯示的頁面。+ G5 H) P) B# f5 I1 n( p1 @( r+ s
data-role="header" 是在頁面頂部建立的工具條 (通常用於標題或者搜尋按鈕)
2 D5 o( k; F/ A6 w data-role="main" 定義了頁面的內容，比如文字， 圖片，表單，按鈕等。
8 R% Q6 M2 V" M n! A) P; f% o4 i "ui-content" 類用於在頁面增加內邊距和外邊距。# J$ ]3 ?) i0 x; ~
data-role="footer" 用於建立頁面底部工具條。2 t' e) Z% |1 h( u
在這些容器中你可以增加任何 HTML 元素 - 段落, 圖片, 標題, 列表等。/ s% {' u4 S! x
- k2 x3 x5 s9 Clamp jQuery Mobile 依賴 HTML5 data-* 屬性來支援各種 UI 元素、過渡和頁面結構。不支援它們的瀏覽器將以靜默方式棄用它們。
, B5 c$ c [2 { o2 i1 I) v1 m$ b9 q+ l% b
在頁面中增加 jQuery Mobile
7 v) ]" x; e6 n$ `8 E1 T9 w: e3 b; e9 }5 S7 L& D! A b G
使用 jQuery Mobile, 你可以再單個 HTML 檔案中建立多個不同的頁面。6 X5 L* b. j& v6 v2 v9 V
3 z3 d( B- D0 Y: s7 C你可以使用不同的href屬性來區分使用同一個唯一id的頁面：
2 B* F, z5 i4 S4 Q3 S實例+ O% `, R/ i# j3 \+ ~
<div data-role="page" id="pageone">% _$ {" r! u; A ~) |% h
<div data-role="main" class="ui-content">
% p6 `; ^7 N' R2 i" A5 d& g <a href="#pagetwo">跳轉到第二個頁面</a>8 \% ?3 e" E& b9 p* B
</div>+ Y7 T7 O" O- [1 j( Y( ?6 C
</div>* W- |4 \6 W% U& R5 B
( a! K" f$ K* b' {0 Z# V0 r- Y, Y<div data-role="page" id="pagetwo">5 G" D' J7 x: N$ D, z" i u
<div data-role="main" class="ui-content">
) S4 ~" g. b9 E7 a <a href="#pageone">跳轉到第一個頁面</a>
/ B: @: E6 z) Q% Z& B9 g </div>
: r, n& _+ P: c" r; B</div>
, e8 M6 T$ j. P+ v+ F g( J% ~ s注意： 當web應用有大量的內容（文字，圖片，腳本等）將會嚴重影響加載時間。如果你不想使用內頁連結可以使用外部檔案：& E5 {; g6 w$ u+ z! T: w9 v
# @6 W$ ?- N% p% e# ?* c6 P<a href="externalfile.html">訪問外部檔案</a>
) I' b/ w9 K6 d- L9 q
& z* s& |+ l3 P0 R) C( a% v頁面作為對話框使用2 D* u& d5 t* M! {: d5 @. P! i
) ~! Y' I' W9 K5 A5 `
對話框是用於顯示頁面內容顯示或者表單內容的輸入。
) G _* r5 G8 j4 n4 v8 H6 ~/ B6 |/ P4 i6 p; Z' A8 u( m8 h
在連結中增加data-rel="dialog"讓會員點閱連結時彈出對話框:: n2 g9 i! ?4 J L# N
實例8 T: F! ?, A8 N7 E
<div data-role="page" id="pageone">
( B6 f d; m& S- Q <div data-role="main" class="ui-content">: y) M5 {8 f2 I1 c" m- G
<a href="#pagetwo">跳轉到第二個頁面</a>
! v$ x" U+ h- N% H& n3 r$ \2 W </div>
$ L+ t; s+ r, u; `/ @</div>1 Q) G8 x, `8 v% [% Y
2 U3 F& F( }) J
<div data-role="page" data-dialog="true" id="pagetwo">
5 K; G* L% @$ i% s <div data-role="main" class="ui-content">
! U7 y8 b4 U. N! V <a href="#pageone">跳轉到第一個頁面</a>
, _: v- h/ W, L/ Y# ~9 v8 y </div>- D5 N; o U/ I
</div> |
|
|Archiver|手機版|禁閉室|MyXNova (原 myxnova.com)
聲望
現金
存款
瀏覽推廣
註冊推廣
金幣
遊戲幣
鑽石
IP卡
狗仔卡
[資訊未更新]
發表於 2016-6-25 16:22:43
提升卡
置頂卡
沉默卡
喧囂卡
變色卡
千斤頂
顯身卡