等級：25 - 爐火純青 經驗值：0 / 244 魔法值：13400 / 13400 生命值：4%
升級
   100%
TA的每日心情 | 擦汗
19 小時前 |
|---|
簽到天數: 5427 天 [LV.Master]伴壇終老
|
馬上註冊，結交更多好友，享用更多功能，讓你輕鬆玩轉社群。
您需要 登入 才可以下載或檢視，沒有帳號？立即註冊
×
jQuery Mobile 是用於建立移動 Web 應用的前端開發框架。
" F* o$ t" z- k x2 p6 W$ X zjQuery Mobile 可以應用於智能手機與平板電腦。 5 ?9 b' `# `# g% u
jQuery Mobile 使用 HTML5 & CSS3 最小的腳本來佈局網頁。; \, @8 u+ E4 X* E: {
7 Z. I1 R7 S' \# L什麼是 jQuery Mobile?
9 w" u8 X1 s B- B
* F( t- d& `9 f; r( q* l- VjQuery Mobile 是針對觸屏智能手機與平板電腦的網頁開發框架。
3 C+ g8 k1 o. O1 }$ m5 D* ?( N
+ A6 O; ]: Q4 jjQuery Mobile 工作與所有主流的智能手機和平板電腦上： 4 a' R0 _' ?& G8 | F. J
3 C5 _' e2 P5 U0 `' |4 L0 m2 D+ K8 ljQuery Mobile 構建於 jQuery 以及 jQuery UI類庫之上，如果您瞭解 jQuery，您可以很容易的學習 jQuery Mobile。 8 U$ Q; T$ W3 e- v
jQuery Mobile 使用了極少的 HTML5、CSS3、JavaScript 和 AJAX 腳本代碼來完成頁面的佈局渲染。2 N7 D" B- W. X
% A( @3 {& u6 Z( T3 o4 A" O& N為什麼使用 jQuery Mobile?% E8 Y" Y: U) R, y. k) V- x
$ J* f" D' _" d$ X/ X通過使用jQuery Mobile 可以 "寫更少的代碼，做更多的事情" : 它可以通過一個靈活及簡單的方式來佈局網頁，且兼容所有移動設備。7 H0 `7 A3 p; y* K7 V7 x F2 ?
lamp 不同設備使用了不同開發語言，jQuery Mobile可以很好的兼容不容的設備或操作系統：9 K; }7 y3 |/ O2 f( C* ?
; D' W( C7 [" Z# z8 x
Android 和 Blackberry（黑莓） 使用JAVA語言。
, i/ M6 C5 c" E2 q5 z7 y5 T7 \* R! c iOS 使用 Objective C 語言/ X6 \7 d! n5 V: b
Windows Phone 使用 C# 和 .net, 等。
7 @1 B- S$ h! G0 E2 e- j. b& Y
9 g+ z6 ^* b ajQuery Mobile 解決了不同設備兼容的問題，因為它只使用HTML，CSS和 JavaScript，這是所有移動網絡瀏覽器的標準！0 F7 g4 y( t$ j- c7 X
: L9 I' M+ n' g2 O5 A, [ [
jQuery Mobile 安裝
7 H5 R" ^, v0 ]' [在你的網頁中增加 jQuery Mobile
" |6 E0 O$ A$ u% o9 ] @) S6 Y4 z: R3 x; ~, S" f: | \6 Q
你可以通過以下幾種方式將jQuery Mobile增加到你的網頁中：4 f, V" {2 z* x: X+ p
( g) F, ^$ _! Q$ j0 o5 J9 W 從 CDN 中加載 jQuery Mobile (推薦)
( u9 p3 s! F0 R7 I# v2 m4 | 從jQuerymobile.com 下載 jQuery Mobile庫+ T. A6 R0 R- x' ~
5 ^- B% a$ u8 V. a+ @6 U下載 jQuery Mobile
d/ |6 q7 g( D2 r8 e: k' J1 G( G5 F/ T$ q- L) d& b
如果你想將 jQuery Mobile 放於你的主機中,你可以從 jQuerymobile.com下載該檔案。7 d3 D6 y, j0 ?8 b3 a r O( t
. d. |* y# J' F& g: }' H3 X<head>
0 L* D/ l" P- q: x- {8 F5 h3 H<meta name="viewport" content="width=device-width, initial-scale=1">( @6 ]; x/ P$ c9 k& v
<link rel="stylesheet" href="jquery.mobile-1.4.5.css">( Y% e4 B$ Q9 D, j% V, {2 t4 K
<script src="jquery.js"></script>
. T+ {1 [' l+ ?& ^6 d7 j<script src="jquery.mobile-1.4.5.js"></script>
; g/ n6 I6 A, V8 b% g& X</head>
) q/ _8 b) \ H
- w& h: \) ? P. k" m! u提示： 將下載的檔案放置於與網頁同一目錄下。+ O: b* G3 d$ y A4 }4 g
lamp 你是否想知道為什麼在 <script> 標籤中 沒有插入 type="text/javascript" ?
! L4 q8 X- W( U( f6 f8 W0 e9 d4 } b6 h" d8 g
在 HTML5 已經不需要該屬性。 JavaScript 在所有現代瀏覽器中是 HTML5 的預設腳本語言！
1 {& J3 M8 s- }, O2 Z" O- Y g: W( \
4 r2 L: [! A) p+ f% O2 OjQuery Mobile 頁面
: t% t8 C! w7 m4 J# E開始學習 jQuery Mobile
' ]; O2 R: q( P8 Z5 {實例
# e5 S/ G9 g( h/ I8 Y<body>. v& k# w$ F7 w8 t
<div data-role="page">, |+ D5 S/ ?- [: d) Z) @* m5 F
: e/ \; s) o. k2 `# c
<div data-role="header">
! e: Y' ]0 h; a4 D" B x <h1>歡迎來到我的主頁</h1>/ J* m1 z. _& D, \! r) _
</div>
& Y+ M3 }+ g5 R
- i2 A+ c7 i( V1 j <div data-role="main" class="ui-content">' R3 g2 c! z/ D1 n
<p>我現在是一個移動端開發者!!</p>5 b5 I" I! n/ o$ x* S( Q2 _5 o
</div> W# q# K7 j, i( u$ P# p* ]
/ H1 M% U6 Q4 ~0 [ <div data-role="footer">
# E: `& H% f8 |- r9 O+ h5 U <h1>底部文字</h1>
! h }+ s, L) b& M* w, _; h </div>9 G) } s" B' F z/ {
% e, K) [0 Y4 V- e1 r! b/ k, r</div>2 a# e" K8 [5 S8 {2 {) F( A
</body>
9 M5 h9 }/ p1 C+ p! f, L實例解析：! ?7 N! {/ p* P
" x' H8 c% u* ` data-role="page" 是在瀏覽器中顯示的頁面。
& h) `* E* X- f data-role="header" 是在頁面頂部建立的工具條 (通常用於標題或者搜尋按鈕)
" g* X5 \3 |0 H% P- B4 c; X' L data-role="main" 定義了頁面的內容，比如文字， 圖片，表單，按鈕等。0 p N/ C+ c" p/ c9 p
"ui-content" 類用於在頁面增加內邊距和外邊距。
0 ? X/ S7 A* t( I3 o3 _' B# b data-role="footer" 用於建立頁面底部工具條。
" S9 i: T- Z1 |5 ?, m 在這些容器中你可以增加任何 HTML 元素 - 段落, 圖片, 標題, 列表等。
4 ]) y0 c2 h. M( d( ]+ V; B4 ~) D( |* W+ e
lamp jQuery Mobile 依賴 HTML5 data-* 屬性來支援各種 UI 元素、過渡和頁面結構。不支援它們的瀏覽器將以靜默方式棄用它們。9 b5 c5 d: `+ g/ j" j
, z D' O4 c# ?6 b! `' p在頁面中增加 jQuery Mobile8 v \+ b7 N: I) B! d) c
5 R2 A: J* i& i; B# |1 e
使用 jQuery Mobile, 你可以再單個 HTML 檔案中建立多個不同的頁面。! X: ]3 X& p% Q8 e: ~
# ^% e0 w2 `1 ?
你可以使用不同的href屬性來區分使用同一個唯一id的頁面：
& v1 u, b! A. ^) |# J實例) m) [. Q- Q3 w, E1 Z2 T* x
<div data-role="page" id="pageone">
3 {9 U" t! C0 a/ M7 j- b <div data-role="main" class="ui-content">8 F+ C# B3 U$ [
<a href="#pagetwo">跳轉到第二個頁面</a>
# d1 ]: l& k0 K: ^ </div>
& o% Q, D6 @% t2 R& X, T</div>
: {& s8 v2 W7 X1 ^: R
7 q- v' B# T- o ~ p+ ]( z<div data-role="page" id="pagetwo"> F; L6 P; R& Z; u- r' V4 C& {
<div data-role="main" class="ui-content">3 X0 w! Q* h3 m! O
<a href="#pageone">跳轉到第一個頁面</a>
. `' N3 N8 _7 } </div>
. ?8 H3 b$ X9 F1 r; z</div>0 p4 v2 g0 ]$ P7 v! u% b7 N
注意： 當web應用有大量的內容（文字，圖片，腳本等）將會嚴重影響加載時間。如果你不想使用內頁連結可以使用外部檔案： ^2 |3 j. Z0 @- E; Q( E- W
1 R! P' G& z* m3 S" q) ~* R
<a href="externalfile.html">訪問外部檔案</a>
3 f% O y& N# ]- W t1 [) G( T; R, d6 [
頁面作為對話框使用
) ]# d0 r0 Q7 W" j4 k" D0 E B+ G- W- y5 @! P, b
對話框是用於顯示頁面內容顯示或者表單內容的輸入。
1 F0 y- ]4 z) C% v& u4 C
; p9 x0 @8 t( w3 R+ Q' y3 b- o( J在連結中增加data-rel="dialog"讓會員點閱連結時彈出對話框: ?# v# k5 z4 k6 \3 P
實例
1 @+ Q! [7 M6 k% w4 ~ X<div data-role="page" id="pageone">2 }5 G( G, \1 s, h
<div data-role="main" class="ui-content">9 R/ X. S' N9 H; {* g+ t4 |
<a href="#pagetwo">跳轉到第二個頁面</a>
2 g- _, ~0 g7 U, O ?+ u6 I" ? </div>/ ~; }: G ]5 A8 U
</div>( G, |( S/ r" \8 t
' t" Y- V+ d- w q8 d+ f/ X3 ]& S<div data-role="page" data-dialog="true" id="pagetwo">
' ?: L3 T F6 }% T' f1 Y7 y h <div data-role="main" class="ui-content">9 d- x1 @1 x8 W
<a href="#pageone">跳轉到第一個頁面</a>
8 b+ ~$ c3 s, M! O- b$ |4 ^ </div>0 T" U' Y- e- M- d8 p& P
</div> |
|
|Archiver|手機版|禁閉室|MyXNova (原 myxnova.com)
聲望
現金
存款
瀏覽推廣
註冊推廣
金幣
遊戲幣
鑽石
IP卡
狗仔卡
[資訊未更新]
發表於 2016-6-25 16:22:43
提升卡
置頂卡
沉默卡
喧囂卡
變色卡
千斤頂
顯身卡