等級：25 - 爐火純青 經驗值：0 / 246 魔法值：14759 / 14759 生命值：6%
升級
   100%
TA的每日心情 | 奮斗
昨天 00:44 |
|---|
簽到天數: 5883 天 [LV.Master]伴壇終老
|
馬上註冊，結交更多好友，享用更多功能，讓你輕鬆玩轉社群。
您需要 登入 才可以下載或檢視，沒有帳號？立即註冊
×
jQuery Mobile 是用於建立移動 Web 應用的前端開發框架。 , \, ^" D0 Q5 Q9 b3 d
jQuery Mobile 可以應用於智能手機與平板電腦。 ; B: x- z( D/ p9 e- ^: ]3 `3 O
jQuery Mobile 使用 HTML5 & CSS3 最小的腳本來佈局網頁。4 C5 [/ ?" A: \. u+ X3 \
% U5 T, P2 m2 z+ M0 d' h* B [) e1 A
什麼是 jQuery Mobile?
% O4 |. W% u; H; i$ m& N5 a0 K) q) p$ {& b1 G9 k, X
jQuery Mobile 是針對觸屏智能手機與平板電腦的網頁開發框架。 % }( m9 ?4 A& X( S% P" g G- Z. g
- z6 S6 A* O, c- t9 j; P
jQuery Mobile 工作與所有主流的智能手機和平板電腦上： & C f2 h% k5 o, [. ]" H
7 m% F i+ R; I
jQuery Mobile 構建於 jQuery 以及 jQuery UI類庫之上，如果您瞭解 jQuery，您可以很容易的學習 jQuery Mobile。 5 O6 h3 O: K* G5 d y
jQuery Mobile 使用了極少的 HTML5、CSS3、JavaScript 和 AJAX 腳本代碼來完成頁面的佈局渲染。- ?4 X0 w& W! z' x
E4 [7 {. U U# I) _1 e4 V6 m) Y
為什麼使用 jQuery Mobile?
P8 `/ r; T8 D/ D$ R) b% G. M
* r1 Y9 n7 Q7 C# ]通過使用jQuery Mobile 可以 "寫更少的代碼，做更多的事情" : 它可以通過一個靈活及簡單的方式來佈局網頁，且兼容所有移動設備。" z3 e) L4 n( U
lamp 不同設備使用了不同開發語言，jQuery Mobile可以很好的兼容不容的設備或操作系統：, |. n( m* Z& l5 n+ v" f
- H% p1 h( j" K8 n
Android 和 Blackberry（黑莓） 使用JAVA語言。. V: q b# b$ E, H3 L. {
iOS 使用 Objective C 語言
j6 n! {$ T! ]1 [- S, `2 v$ u Windows Phone 使用 C# 和 .net, 等。
8 C9 e* z6 a4 q6 Y3 \- V
3 _* V) v, j3 P( ZjQuery Mobile 解決了不同設備兼容的問題，因為它只使用HTML，CSS和 JavaScript，這是所有移動網絡瀏覽器的標準！3 q4 Q8 E$ B& t- P+ u; p
5 Y, }3 o2 V+ Q2 Y- z
jQuery Mobile 安裝
s2 ^" u; v8 f `; l) Q5 n- q在你的網頁中增加 jQuery Mobile
! ]4 ^, ]( Y ^3 B+ K4 L$ ?& I9 n; s; M X4 j/ ^5 q
你可以通過以下幾種方式將jQuery Mobile增加到你的網頁中：
1 e* ?4 S' Z7 O# |3 o2 q- s: p. M, E8 i
從 CDN 中加載 jQuery Mobile (推薦)7 q$ i' k% d2 [5 o* W
從jQuerymobile.com 下載 jQuery Mobile庫# p g! [8 b0 R. t |/ q
4 P% g2 ~1 F/ M7 t: Q" `下載 jQuery Mobile. _2 {" k! j5 u( q' E
3 c: d n6 Q! l9 r6 T5 x如果你想將 jQuery Mobile 放於你的主機中,你可以從 jQuerymobile.com下載該檔案。
3 Y9 k) S$ ^% ] O3 e( b: C! n7 F
<head>
- K6 P- b2 r! ?& n* c* _3 o<meta name="viewport" content="width=device-width, initial-scale=1">; D8 V( k9 p5 }- F n+ q( f( e
<link rel="stylesheet" href="jquery.mobile-1.4.5.css">3 u# f2 w: Z! }
<script src="jquery.js"></script>
( j' v$ V9 p, |9 K c. `0 C+ ]<script src="jquery.mobile-1.4.5.js"></script>
+ t7 S% R# H2 j. U</head>0 q* B5 _$ ?1 S& G% ~( ^
% T' {1 z# Q8 ]3 X提示： 將下載的檔案放置於與網頁同一目錄下。( `9 q/ D8 F! \2 f. g
lamp 你是否想知道為什麼在 <script> 標籤中 沒有插入 type="text/javascript" ?
8 k7 O* L* ]8 d. l$ L$ E; ^ O Q2 j# r Y; |1 `
在 HTML5 已經不需要該屬性。 JavaScript 在所有現代瀏覽器中是 HTML5 的預設腳本語言！. T" U" M- N' J2 K
- n3 R( @! ?( IjQuery Mobile 頁面( S* [ T3 T' P
開始學習 jQuery Mobile1 _7 J z( Z( h& J% v
實例9 ~% V3 r2 m+ b( f
<body>
* X% A" v S. G4 ^/ U<div data-role="page">
* w, z1 c9 z; M0 @9 w4 I& T5 e$ H- j. u" j2 r& F# r
<div data-role="header">" ]3 i4 Z4 R7 `3 J* m
<h1>歡迎來到我的主頁</h1>. ~) i/ g% S2 o1 I
</div>
, g# V/ y2 n; j$ e. {$ J3 t: l/ r% @3 F1 L Z4 [; y1 t$ J' c4 j
<div data-role="main" class="ui-content">
+ L) j6 j) p# o% q ^ <p>我現在是一個移動端開發者!!</p>/ Y2 @9 h0 n; i. @% R* P" }0 h
</div>6 L, K8 {5 |3 C, {, p; X' ]
: i1 ?( Z, k* u
<div data-role="footer">
# _% ~ E$ m& @/ i% L* ~6 c$ K <h1>底部文字</h1>
! Q; \* f/ ~; ^2 Z% X8 w4 ?; m: @ </div>: j9 q4 T' d/ g& [" _
& f; s1 @: c5 a7 s9 A- g</div>9 o Q! z2 _: b/ R2 \; U
</body>" i5 W/ d. b5 E9 x% ^; g
實例解析：
l e5 ?- D. ~0 H1 J! |/ o7 E k
, Z" ~: c' h. t3 u. ? data-role="page" 是在瀏覽器中顯示的頁面。# |; }8 g* p8 _5 [
data-role="header" 是在頁面頂部建立的工具條 (通常用於標題或者搜尋按鈕)
! E) z+ X0 o; m. a- S A data-role="main" 定義了頁面的內容，比如文字， 圖片，表單，按鈕等。# H. L) I9 c, l
"ui-content" 類用於在頁面增加內邊距和外邊距。
2 S5 A/ d% @) g data-role="footer" 用於建立頁面底部工具條。: d! X. z: Z7 Q3 S% r5 w
在這些容器中你可以增加任何 HTML 元素 - 段落, 圖片, 標題, 列表等。
6 _$ g3 c* e z) H5 e9 j5 c5 c9 H# T1 [" N
lamp jQuery Mobile 依賴 HTML5 data-* 屬性來支援各種 UI 元素、過渡和頁面結構。不支援它們的瀏覽器將以靜默方式棄用它們。& [; `; x: _4 \
# P0 L9 l9 G J+ c& h, a8 ^
在頁面中增加 jQuery Mobile
2 V- m* q0 V0 Z' ?* i" r9 Y0 [8 U9 C4 ^: I4 k. g
使用 jQuery Mobile, 你可以再單個 HTML 檔案中建立多個不同的頁面。- X8 p: J9 m6 i! }' X* |
9 k z+ k& n- P
你可以使用不同的href屬性來區分使用同一個唯一id的頁面：
5 l7 b( X+ h0 M/ |& X實例% \0 l0 O2 h0 P: A1 ~
<div data-role="page" id="pageone">) O2 Q: Y! c+ |8 u
<div data-role="main" class="ui-content">, s0 Y( M+ e" `9 e3 J7 \# ~4 h
<a href="#pagetwo">跳轉到第二個頁面</a>! T* z% d: Y! u( z
</div>
6 E6 w9 w2 G4 I5 h1 X6 y# S</div>
4 a( P9 C, w4 n; v0 _. Q
. j$ }0 A" F6 h* N: A' i<div data-role="page" id="pagetwo">
! T5 z/ z/ ^& ?* ?0 R, o <div data-role="main" class="ui-content">; m7 c* B6 C! T
<a href="#pageone">跳轉到第一個頁面</a>
; w/ _/ J4 V& W2 A9 W v/ j" y </div>
) h4 l, i! [9 s/ I</div>0 ~ x- [, T c0 z& M3 n; s
注意： 當web應用有大量的內容（文字，圖片，腳本等）將會嚴重影響加載時間。如果你不想使用內頁連結可以使用外部檔案：# [( l4 d8 B0 m: n3 N' r/ H& X
/ {# q K/ W4 O/ Q<a href="externalfile.html">訪問外部檔案</a>
0 K% c% L: K0 U" r
z$ Y }( z8 N頁面作為對話框使用
3 G# l. O; ]1 C& z- x/ a
8 D& p5 T+ I+ a對話框是用於顯示頁面內容顯示或者表單內容的輸入。) `( \& w1 R5 M( Z t* t5 y# l- l
% a% ?0 T7 R% ]' r% l/ e; C& {在連結中增加data-rel="dialog"讓會員點閱連結時彈出對話框:* q6 r3 Y0 t) u7 ]& I4 p r
實例7 R: E; k3 d$ ^7 p5 X* T2 \! P
<div data-role="page" id="pageone">- _3 j I8 l) L; \
<div data-role="main" class="ui-content">+ d0 f% y9 \4 @( Q+ h
<a href="#pagetwo">跳轉到第二個頁面</a>
* ^$ h" Y( B8 T& |. P8 e& ` </div>0 G( {/ v6 _+ l4 X
</div>: ~' C, W+ r- Q! S! n t# ]
$ x: ?$ Q+ W6 m* W% \
<div data-role="page" data-dialog="true" id="pagetwo">; I6 w4 J/ k. X: e) S9 |( |
<div data-role="main" class="ui-content">9 t* E; J9 \+ O, ?( D
<a href="#pageone">跳轉到第一個頁面</a>+ K$ A/ c! n6 ?. i8 [2 [( l/ Z v
</div>
/ Q- S8 R6 j; u2 A</div> |
|
|Archiver|手機版|禁閉室|MyXNova (原 myxnova.com)
聲望
現金
存款
瀏覽推廣
註冊推廣
金幣
遊戲幣
鑽石
IP卡
狗仔卡
[資訊未更新]
發表於 2016-6-25 16:22:43
提升卡
置頂卡
沉默卡
喧囂卡
變色卡
千斤頂
顯身卡