等級：25 - 爐火純青 經驗值：0 / 244 魔法值：12864 / 12864 生命值：4%
升級
   100%
TA的每日心情 | 奮斗
6 小時前 |
|---|
簽到天數: 5229 天 [LV.Master]伴壇終老
|
馬上註冊，結交更多好友，享用更多功能，讓你輕鬆玩轉社群。
您需要 登入 才可以下載或檢視，沒有帳號？立即註冊
×
jQuery Mobile 是用於建立移動 Web 應用的前端開發框架。 9 e) ^ T2 _6 ]3 R9 v! ?( G
jQuery Mobile 可以應用於智能手機與平板電腦。
. W4 B6 O$ R9 d5 ?( YjQuery Mobile 使用 HTML5 & CSS3 最小的腳本來佈局網頁。
, W R) x9 s$ E" f+ A# o! K. m l$ G5 h' {# c/ H
什麼是 jQuery Mobile? : a `6 w) Z) l% E
- y" A4 E9 n; l; z( i: E+ F! I
jQuery Mobile 是針對觸屏智能手機與平板電腦的網頁開發框架。 5 l' {& G) F7 K4 x
$ L( H3 ]( x* D6 U5 R: n8 Q: D
jQuery Mobile 工作與所有主流的智能手機和平板電腦上： 2 n9 g$ F( W9 M7 K y
: _3 ^5 v/ j J$ p- T
jQuery Mobile 構建於 jQuery 以及 jQuery UI類庫之上，如果您瞭解 jQuery，您可以很容易的學習 jQuery Mobile。 - B& \7 K4 |3 i2 x
jQuery Mobile 使用了極少的 HTML5、CSS3、JavaScript 和 AJAX 腳本代碼來完成頁面的佈局渲染。
0 l. ~9 r0 D% w! C6 R$ X: ~ j! T2 C$ l$ M7 d$ s' b x4 i3 j
為什麼使用 jQuery Mobile?; I0 L( G# K& [ e/ n8 l" f/ F
1 q- ~# p" K" ?) |5 @通過使用jQuery Mobile 可以 "寫更少的代碼，做更多的事情" : 它可以通過一個靈活及簡單的方式來佈局網頁，且兼容所有移動設備。4 \ ]& j$ ]' o, Z* j
lamp 不同設備使用了不同開發語言，jQuery Mobile可以很好的兼容不容的設備或操作系統：! b: [8 r% l* ]
; f0 Y4 {- @: J. K Android 和 Blackberry（黑莓） 使用JAVA語言。 V! {3 ^; s* Z' C1 Z k# ]+ \" Z
iOS 使用 Objective C 語言
1 C4 b" a: H G0 |( R: i$ H7 x, ` Windows Phone 使用 C# 和 .net, 等。
+ |* o! l# w% G7 W6 S$ r1 f e
jQuery Mobile 解決了不同設備兼容的問題，因為它只使用HTML，CSS和 JavaScript，這是所有移動網絡瀏覽器的標準！2 \$ F$ r9 b+ v5 u1 K) \3 h3 @- p' S
7 F" K, K6 Y2 H' ?jQuery Mobile 安裝5 A% u3 ]) T* J( k% L. h; O) z
在你的網頁中增加 jQuery Mobile
: ?5 h! n$ ^ k2 u d6 G* l& B5 J; C5 A) l, g2 N
你可以通過以下幾種方式將jQuery Mobile增加到你的網頁中：
4 [& j; `$ \+ n5 a/ [( E6 ]" ?6 }/ c% q+ W- |
從 CDN 中加載 jQuery Mobile (推薦) g' c8 u* Z" ]0 H, q5 E4 l
從jQuerymobile.com 下載 jQuery Mobile庫
2 H& x2 c$ Z! i. m5 u) L+ I P! H/ l
下載 jQuery Mobile) {4 i! R0 Y$ i. O
4 I5 h% Q3 A! t0 c2 G+ }3 d
如果你想將 jQuery Mobile 放於你的主機中,你可以從 jQuerymobile.com下載該檔案。
' h( q& T+ d. _/ L) V8 C
3 D/ z$ w: A5 [, P; T2 L<head>
6 g3 }/ l! ^; M# w1 O/ L [9 F<meta name="viewport" content="width=device-width, initial-scale=1">
0 y/ S/ e7 Q* n& t+ X |0 z<link rel="stylesheet" href="jquery.mobile-1.4.5.css">
k5 b( E% E1 z' ^. N3 g( _<script src="jquery.js"></script>
3 U6 K6 X3 ~, E! d! `/ [& a0 I5 f<script src="jquery.mobile-1.4.5.js"></script>. L) h8 `0 c" Y* j
</head>
/ e0 L$ j5 `; h5 c3 j4 {% C' w" c5 p& l& e0 I2 ?6 `
提示： 將下載的檔案放置於與網頁同一目錄下。
& m2 ]# _6 \' M1 X; Mlamp 你是否想知道為什麼在 <script> 標籤中 沒有插入 type="text/javascript" ?
$ P) v6 I7 W6 }5 o" ^- Q! {% ]1 {2 q/ ]) f, ^
在 HTML5 已經不需要該屬性。 JavaScript 在所有現代瀏覽器中是 HTML5 的預設腳本語言！3 C: A3 [0 k$ K
( z, [- A( {! @- p" }& xjQuery Mobile 頁面
: S1 w! X P3 e1 m% j0 C7 x6 t開始學習 jQuery Mobile
" z) |" c/ x2 W* Q- w9 R% u實例
8 j. O) y% o$ ]% S9 T- N* V<body>1 K) w# B% F: `# g3 g6 z# \ b
<div data-role="page">$ u4 ]# a8 i' |$ b8 J- m" f) A
) d. J3 [' \" }$ w
<div data-role="header">
' B Y) |. O& m z <h1>歡迎來到我的主頁</h1>
* O9 e& C- H& S: k) r </div>. F% `1 u d! Z& W3 ~; ?! g
) {8 l& y5 i. S' K
<div data-role="main" class="ui-content">
! [! r- l& N- B( f6 H% F9 l& Q <p>我現在是一個移動端開發者!!</p>
8 @3 B) r' u5 b+ b </div>" p0 l, T+ P9 o( Y# p* r! I
' e6 |" M4 C% t. X# ] <div data-role="footer"> U; L1 c! `" K1 m! q
<h1>底部文字</h1>( ?- G0 B) p, S( r$ Y1 C5 R# _
</div>7 s7 f: Z P: D4 i1 C
# `& E. {( v! n1 p4 F# W" s' r
</div>
' o; r6 i6 r0 V: u</body>4 {0 x# P) Z+ e7 S9 ]4 p" A: P2 n
實例解析：
O$ x8 k2 Y5 M: i( V r H) P
# x9 R6 {; o4 P: J) w data-role="page" 是在瀏覽器中顯示的頁面。
0 q6 h9 z6 H9 N7 X. B1 X2 v data-role="header" 是在頁面頂部建立的工具條 (通常用於標題或者搜尋按鈕)
8 E/ m5 t& m( q data-role="main" 定義了頁面的內容，比如文字， 圖片，表單，按鈕等。; b6 X6 `- r+ d4 a) n
"ui-content" 類用於在頁面增加內邊距和外邊距。" m f% V# e1 Z* I1 z( u3 o
data-role="footer" 用於建立頁面底部工具條。) c4 e. u# |/ `% P0 Q/ \8 \) J
在這些容器中你可以增加任何 HTML 元素 - 段落, 圖片, 標題, 列表等。" S; D) k( ?6 O( W$ x
) D( }$ K: G! T0 Slamp jQuery Mobile 依賴 HTML5 data-* 屬性來支援各種 UI 元素、過渡和頁面結構。不支援它們的瀏覽器將以靜默方式棄用它們。4 v; Z) f/ \# ^6 [1 A
/ ^+ X; i# G; B. H0 u% a( \
在頁面中增加 jQuery Mobile
& Y5 Z! ]( j+ s' l$ N& J6 z" _5 n5 a$ I/ E% l
使用 jQuery Mobile, 你可以再單個 HTML 檔案中建立多個不同的頁面。
8 ]7 A* ^7 Q' }0 Y" w
* R( H/ t4 y4 ?/ q$ y1 a你可以使用不同的href屬性來區分使用同一個唯一id的頁面：
, e, G$ k, G' I! u2 {5 M$ Z( U實例
" }/ y" {. r) @8 G1 \' N<div data-role="page" id="pageone">1 W6 H- c, c0 }0 z( J
<div data-role="main" class="ui-content">
$ u; o: f3 i5 d0 q( S" U9 Q <a href="#pagetwo">跳轉到第二個頁面</a>" q/ A8 R" y. Z0 `
</div>
8 ^! X6 j" O" }2 H: n8 z1 v' |</div>
0 S6 q! l3 C. n% n- o& ^
* i3 F! [* \, }3 i8 w<div data-role="page" id="pagetwo">6 y4 _) }2 z: p& J |
<div data-role="main" class="ui-content">
% ?" l5 e4 W0 n6 @8 q# H* V, g <a href="#pageone">跳轉到第一個頁面</a>
1 }2 V, _9 h3 [$ n$ \4 Z- X& S </div>
$ V# H$ U- {0 J; g, C* X' k</div>
|( U% k [) i# S5 j( W注意： 當web應用有大量的內容（文字，圖片，腳本等）將會嚴重影響加載時間。如果你不想使用內頁連結可以使用外部檔案：
9 c( u2 l% {9 X6 {/ h4 E$ v, d" b2 b" C3 X3 z7 U+ H( i
<a href="externalfile.html">訪問外部檔案</a>
8 _7 v/ G- a7 f l7 J {
# i; L- N, @: k, h; p& j6 e% s8 c頁面作為對話框使用
3 y; ^7 h4 Z% E4 y. d; o7 ]' S
9 E3 T, g' J- O. D! n對話框是用於顯示頁面內容顯示或者表單內容的輸入。3 F. H0 R# d# y3 b Y
) W' R- Y' J" l. g) |
在連結中增加data-rel="dialog"讓會員點閱連結時彈出對話框:
2 N, _5 B5 Z% s+ r% {實例0 e1 i$ x2 O& g; a! W, S, j6 W' X. V
<div data-role="page" id="pageone">
8 ]6 ]! M! H' r: ~) j <div data-role="main" class="ui-content">! d# T: V1 }3 A4 K4 n0 J* f2 f+ Y
<a href="#pagetwo">跳轉到第二個頁面</a>
6 c. K- @9 q. }0 k9 N </div>
1 `, d3 P8 S) X A</div>
! H: c8 e7 k& j( l; d* f
( I H- s; A' m, }- L( B" x9 Z<div data-role="page" data-dialog="true" id="pagetwo">3 r6 u7 R$ j; }; v* F
<div data-role="main" class="ui-content">
% L1 v% a, b8 t1 _8 e <a href="#pageone">跳轉到第一個頁面</a>
- B( m9 a' e) _. G& v X/ S0 |# G </div>
& `1 C. e" b- w7 G' L' A! ~1 R6 y</div> |
|
|Archiver|手機版|禁閉室|MyXNova (原 myxnova.com)
聲望
現金
存款
瀏覽推廣
註冊推廣
金幣
遊戲幣
鑽石
IP卡
狗仔卡
[資訊未更新]
發表於 2016-6-25 16:22:43
提升卡
置頂卡
沉默卡
喧囂卡
變色卡
千斤頂
顯身卡