等級：25 - 爐火純青 經驗值：0 / 245 魔法值：14320 / 14320 生命值：5%
升級
   100%
TA的每日心情 | 奮斗
昨天 00:52 |
|---|
簽到天數: 5761 天 [LV.Master]伴壇終老
|
馬上註冊，結交更多好友，享用更多功能，讓你輕鬆玩轉社群。
您需要 登入 才可以下載或檢視，沒有帳號？立即註冊
×
jQuery Mobile 是用於建立移動 Web 應用的前端開發框架。 & s7 `- l; A7 t$ L
jQuery Mobile 可以應用於智能手機與平板電腦。 - L' W2 c3 {7 L' y* a+ R4 I
jQuery Mobile 使用 HTML5 & CSS3 最小的腳本來佈局網頁。- p& ?% @2 g. R2 z. P" p9 A4 l; e( T0 U
2 Q+ k( V$ W' n9 L6 \什麼是 jQuery Mobile?
) _ _+ Y+ W6 c# `, j2 m# V6 N& W/ R
jQuery Mobile 是針對觸屏智能手機與平板電腦的網頁開發框架。 9 j2 `/ Z" Q8 J2 x! F' F& F
8 Y9 |0 i! e' V5 O6 G& X! v3 ]" [jQuery Mobile 工作與所有主流的智能手機和平板電腦上：
: f8 z7 V( Y1 K/ v, ?/ r* }* \: e( r! C9 i
jQuery Mobile 構建於 jQuery 以及 jQuery UI類庫之上，如果您瞭解 jQuery，您可以很容易的學習 jQuery Mobile。 % u( O# {6 ~5 f
jQuery Mobile 使用了極少的 HTML5、CSS3、JavaScript 和 AJAX 腳本代碼來完成頁面的佈局渲染。, K* g+ L5 w1 M+ M2 V
2 U g* \$ S/ \9 _$ C$ V* w N
為什麼使用 jQuery Mobile?* B1 D Y8 F( o5 ~7 p; J/ c) B
- [6 {, T$ A" _, N+ \# P/ {通過使用jQuery Mobile 可以 "寫更少的代碼，做更多的事情" : 它可以通過一個靈活及簡單的方式來佈局網頁，且兼容所有移動設備。; q. q) t, H/ m* ]8 t) a, o
lamp 不同設備使用了不同開發語言，jQuery Mobile可以很好的兼容不容的設備或操作系統：
! m, S. |4 r' h8 F9 N3 }
9 Z4 o: \& N: `& Z4 @ Android 和 Blackberry（黑莓） 使用JAVA語言。
1 k$ o/ S$ w% o. ^$ [+ T$ | iOS 使用 Objective C 語言- ]' X( F* S( I0 q& [9 h& R6 d5 k
Windows Phone 使用 C# 和 .net, 等。3 f4 I- T3 ]6 T% @
: S4 A9 |- |5 [( G- U, L) U
jQuery Mobile 解決了不同設備兼容的問題，因為它只使用HTML，CSS和 JavaScript，這是所有移動網絡瀏覽器的標準！
( U# R/ s/ ?% [& r9 @: k0 \" J" c1 a
jQuery Mobile 安裝
2 P8 `" [( c2 G E+ e在你的網頁中增加 jQuery Mobile- }" k, V& v5 p* r0 v
# @/ n4 j9 X4 x! y/ y( w
你可以通過以下幾種方式將jQuery Mobile增加到你的網頁中：, e; b5 ^( I& |& K5 I# k$ q
# O! [# V+ _ m7 N2 [3 s 從 CDN 中加載 jQuery Mobile (推薦)
1 [( [! I. X: v& |3 \ T1 y 從jQuerymobile.com 下載 jQuery Mobile庫$ I/ P9 K) i* D' C8 D) m0 d6 }
8 y; D3 Q! E$ i' T6 o) F
下載 jQuery Mobile
" G( G2 V$ v3 s7 s: i
& w P8 _& i9 D+ x如果你想將 jQuery Mobile 放於你的主機中,你可以從 jQuerymobile.com下載該檔案。
7 [1 b8 h/ t2 a8 l) R: y: M
* k c& o' Z& ?/ I- e<head>
" Z8 R6 r$ i2 S& D* i! k; j y<meta name="viewport" content="width=device-width, initial-scale=1">
4 r8 [' c) O9 J<link rel="stylesheet" href="jquery.mobile-1.4.5.css">" n1 p4 {4 o8 u1 a. r$ L8 c, Z; R
<script src="jquery.js"></script>: @# c2 I) f5 l7 I7 B* q' S
<script src="jquery.mobile-1.4.5.js"></script>
( F" x6 f) ]4 Y2 R2 M5 j</head>
; t4 x* ?, \. ^& F6 j3 f- b% H9 J, o2 N k
提示： 將下載的檔案放置於與網頁同一目錄下。1 M# U1 D- h$ k! g! M3 g5 U' ]
lamp 你是否想知道為什麼在 <script> 標籤中 沒有插入 type="text/javascript" ?# M d) r6 V& r% G7 T$ `) j
5 s8 z9 p* z, O5 j7 a* Y
在 HTML5 已經不需要該屬性。 JavaScript 在所有現代瀏覽器中是 HTML5 的預設腳本語言！% i7 l+ W$ m% G, i
! g/ ]0 _# N" V
jQuery Mobile 頁面
8 D8 b. ?0 r% E開始學習 jQuery Mobile
- n2 j4 ^' b; D實例, l; u! E T$ X8 |3 ~
<body>
' S! z5 U! @# D. ~/ t' w# @<div data-role="page">4 M; n9 n! z m8 _+ ~: Q' k/ l! x
6 {( v6 q% ?& i9 P <div data-role="header">- [( p _4 a. H g& Y0 H# {
<h1>歡迎來到我的主頁</h1>
/ U) ?% x& i1 a! C$ U+ y </div>2 I% j/ n( x3 B% E" y
; g% z b; P( @3 n' R9 { <div data-role="main" class="ui-content">
. _ T+ I3 x7 T, }" k/ ~) k- X: j <p>我現在是一個移動端開發者!!</p>- O3 r9 W$ [+ _+ A" M a
</div>
/ D( c- A0 D8 } j" n7 W7 J5 e
. Y& y3 [+ I, G$ D2 r! e <div data-role="footer">
. I$ H4 ~+ b2 Q; z3 O. g2 S/ L <h1>底部文字</h1>
' E! Q+ ^7 B+ w. O </div>/ u+ X) H$ N3 n5 N% S
& a+ G1 R8 b- w3 o: i</div>: i' D5 X2 H, P# B
</body>
. x5 H6 m# C; E( d4 O實例解析：( f- P8 j! H5 C8 ~% E" m: E
! G0 u% i3 [. U$ ~4 g0 j
data-role="page" 是在瀏覽器中顯示的頁面。5 P$ z0 {3 z5 T" N% K8 ]; ?1 E
data-role="header" 是在頁面頂部建立的工具條 (通常用於標題或者搜尋按鈕)
" r/ m O8 J% V6 N' B9 @1 Z data-role="main" 定義了頁面的內容，比如文字， 圖片，表單，按鈕等。
9 ^8 {! d4 g& E4 q "ui-content" 類用於在頁面增加內邊距和外邊距。
: Y1 w' {1 u+ T% m$ _! g4 F data-role="footer" 用於建立頁面底部工具條。% |$ b5 ]: E! C: o
在這些容器中你可以增加任何 HTML 元素 - 段落, 圖片, 標題, 列表等。
+ R$ Q9 y: F* G. K8 b+ G5 c4 Q+ d9 \
lamp jQuery Mobile 依賴 HTML5 data-* 屬性來支援各種 UI 元素、過渡和頁面結構。不支援它們的瀏覽器將以靜默方式棄用它們。3 j& c! i6 N; |
* q5 } D4 ]# Q) N, L
在頁面中增加 jQuery Mobile- B Q& w" g5 W: {1 N2 L7 A
( x5 W% e0 U. J! b: @: A
使用 jQuery Mobile, 你可以再單個 HTML 檔案中建立多個不同的頁面。6 e: D7 Z# }9 g- G
6 k3 Z4 a6 h0 ~, x. W5 j9 ]你可以使用不同的href屬性來區分使用同一個唯一id的頁面：
) h% U: V% Z5 ?* y: c* P實例4 w" h6 \8 n& ^0 l- C
<div data-role="page" id="pageone">: E: r! l/ c6 |: o
<div data-role="main" class="ui-content">) O7 `' D" J9 J) J& E7 E& `4 g( r
<a href="#pagetwo">跳轉到第二個頁面</a>
$ y6 I, w! y5 \ </div>
4 s m9 f' z/ H/ E0 W- J</div>
2 ^0 Z1 w1 P/ l. l# E" n0 }* h7 G& x# w4 t! w$ b$ {( Z
<div data-role="page" id="pagetwo">
* p! k' x X) X$ F <div data-role="main" class="ui-content">
5 ~( G" i [) a <a href="#pageone">跳轉到第一個頁面</a>2 U8 }- e' T; R/ ~
</div>
3 W) M5 v3 B Y7 |. ~</div>
* k, z8 J1 c) N注意： 當web應用有大量的內容（文字，圖片，腳本等）將會嚴重影響加載時間。如果你不想使用內頁連結可以使用外部檔案：. ]! u: l3 W2 ?
3 ? E& E. @6 v0 l3 o
<a href="externalfile.html">訪問外部檔案</a>2 U4 N" t6 r. Z7 v% x: Z
4 Q& C- U9 \2 L) K頁面作為對話框使用4 S0 W4 H* Q+ q, h. O
. p, k0 `: N4 J1 J* c$ V對話框是用於顯示頁面內容顯示或者表單內容的輸入。# P, j2 I6 p G G
" x5 D, \( s! P在連結中增加data-rel="dialog"讓會員點閱連結時彈出對話框:( v1 F' ^+ ]* V; S+ ^
實例# V( d) a( q; [8 K, t; ?
<div data-role="page" id="pageone">7 g. w' o7 e) P/ R& ?3 i* w
<div data-role="main" class="ui-content">$ E' v* ]6 S( [! w' ~0 C* G/ W1 l
<a href="#pagetwo">跳轉到第二個頁面</a>
$ L7 K6 Z0 p T$ ^- t! x </div>
2 B! I, o7 b/ Z1 z* O; x</div>$ V% |) u! ?; g. T9 }3 r) y. |
2 Y7 u- X: P) Z9 D- t* b6 ?$ S<div data-role="page" data-dialog="true" id="pagetwo">
7 a5 l" z6 H% Q3 j# ~4 o <div data-role="main" class="ui-content">: ^6 p( B C! \" j; S5 }+ |
<a href="#pageone">跳轉到第一個頁面</a>* d0 s$ D9 |& ?" T+ K: F" A+ N
</div>
/ z9 a z+ H* y& E( g</div> |
|
|Archiver|手機版|禁閉室|MyXNova (原 myxnova.com)
聲望
現金
存款
瀏覽推廣
註冊推廣
金幣
遊戲幣
鑽石
IP卡
狗仔卡
[資訊未更新]
發表於 2016-6-25 16:22:43
提升卡
置頂卡
沉默卡
喧囂卡
變色卡
千斤頂
顯身卡