等級：25 - 爐火純青 經驗值：0 / 245 魔法值：14395 / 14395 生命值：5%
升級
   100%
TA的每日心情 | 奮斗
22 小時前 |
|---|
簽到天數: 5789 天 [LV.Master]伴壇終老
|
馬上註冊，結交更多好友，享用更多功能，讓你輕鬆玩轉社群。
您需要 登入 才可以下載或檢視，沒有帳號？立即註冊
×
jQuery Mobile 是用於建立移動 Web 應用的前端開發框架。
" O5 o b+ i+ G6 f$ ?jQuery Mobile 可以應用於智能手機與平板電腦。 ; J3 a+ i4 s, M7 D
jQuery Mobile 使用 HTML5 & CSS3 最小的腳本來佈局網頁。
: K0 A# D, Z) h5 [" o0 g/ q! F! c3 b- B [/ ^2 k8 c! @
什麼是 jQuery Mobile? & Q4 L" j, k1 v- O' ]3 O! y0 v
% L" ~1 h; {4 @" V5 ~6 }: @jQuery Mobile 是針對觸屏智能手機與平板電腦的網頁開發框架。 ; O1 i) [( ?" O: v$ R
+ g& d) f1 I5 f {/ ~jQuery Mobile 工作與所有主流的智能手機和平板電腦上： 4 c9 a9 \/ \2 R, a
( V2 c" q! g2 P0 q ]
jQuery Mobile 構建於 jQuery 以及 jQuery UI類庫之上，如果您瞭解 jQuery，您可以很容易的學習 jQuery Mobile。
1 v. `, X) P! M6 BjQuery Mobile 使用了極少的 HTML5、CSS3、JavaScript 和 AJAX 腳本代碼來完成頁面的佈局渲染。
* N/ F/ q8 O; X' g4 i; w/ G; o0 D# ~1 d; X$ t: ~
為什麼使用 jQuery Mobile?
o" M \8 R5 Z& t" p3 C# M& m. c
" V6 K- L t7 \通過使用jQuery Mobile 可以 "寫更少的代碼，做更多的事情" : 它可以通過一個靈活及簡單的方式來佈局網頁，且兼容所有移動設備。- j) m% v+ m$ d+ \5 l
lamp 不同設備使用了不同開發語言，jQuery Mobile可以很好的兼容不容的設備或操作系統：
7 _( b) e4 x5 X4 x) F
+ g3 F& {/ O9 C0 m( S3 @' ?% s4 |/ y Android 和 Blackberry（黑莓） 使用JAVA語言。
$ \3 _7 W, ~! N6 C1 \! W iOS 使用 Objective C 語言
) l( z( S7 | p Z5 q) |$ @ Windows Phone 使用 C# 和 .net, 等。7 C8 L* O. p2 k: B& b
6 R9 a0 {7 z. w4 | IjQuery Mobile 解決了不同設備兼容的問題，因為它只使用HTML，CSS和 JavaScript，這是所有移動網絡瀏覽器的標準！
( E4 {: H6 L: n7 Q. P* v$ d6 U
, y) B4 N2 s, }3 Q; J. b# ?jQuery Mobile 安裝
+ @, N" l. x5 h$ }; V在你的網頁中增加 jQuery Mobile
! e5 @( }% _$ Q1 \' g( k
+ G6 O+ _/ g* I, @) ~, `你可以通過以下幾種方式將jQuery Mobile增加到你的網頁中：9 [. P% h3 T+ t
7 h) }9 x1 N- l0 g5 H
從 CDN 中加載 jQuery Mobile (推薦)
7 j, H+ j' x( ]* D- R 從jQuerymobile.com 下載 jQuery Mobile庫
0 A" z$ b" a% [; s& v$ {7 V1 M* k m1 S3 J7 |+ L
下載 jQuery Mobile
5 n( l' F7 d! b) d% I% @
, |9 Q2 M* {- I4 e1 v. z3 C如果你想將 jQuery Mobile 放於你的主機中,你可以從 jQuerymobile.com下載該檔案。
; u. b5 g% j' |4 k' o) a7 u9 {7 _$ s& H. t$ i8 Y: }/ O- r' w( a
<head>
: J, `; U) h0 b9 D9 Q<meta name="viewport" content="width=device-width, initial-scale=1">9 d8 P! M- A( b9 }5 r5 Z9 t
<link rel="stylesheet" href="jquery.mobile-1.4.5.css">2 W8 ]0 A, y, ~
<script src="jquery.js"></script>2 _8 X$ z E$ g/ o Q$ ]+ K
<script src="jquery.mobile-1.4.5.js"></script>
6 _6 D: {9 r" A</head>8 a0 k& |% c# d
* W& y- x5 }' f提示： 將下載的檔案放置於與網頁同一目錄下。
, {0 D! p, Q) Q7 c4 _lamp 你是否想知道為什麼在 <script> 標籤中 沒有插入 type="text/javascript" ?3 z" H/ G8 p/ S" @) I7 z7 V( M$ `
! u1 Z. {2 s* D. i4 W2 D
在 HTML5 已經不需要該屬性。 JavaScript 在所有現代瀏覽器中是 HTML5 的預設腳本語言！
9 g$ e: h( s3 O) s3 |+ i; G
. T" L" H" o& P, i+ RjQuery Mobile 頁面3 G- |6 {2 i: ^5 T
開始學習 jQuery Mobile
* L& j) j% F6 W7 q實例* O7 d9 e" y, w5 A; ?! \8 q
<body>+ y! r/ H$ _. ]6 c1 e5 g( Z
<div data-role="page">
3 i* x3 E) i* N' D- q
2 i1 X) z2 C1 M% @ <div data-role="header">& |; d+ Q& t, {8 _( q h. ^+ _
<h1>歡迎來到我的主頁</h1># |5 u5 P6 \4 K5 u$ Q" P* U6 b. f
</div>
2 e" c+ x+ k7 J9 X/ a9 d" ~& [# d) H0 C$ h( `- o6 n: Y
<div data-role="main" class="ui-content">
: {8 q& ?# a/ l g$ f3 W <p>我現在是一個移動端開發者!!</p>* ]5 ^ O3 u( e. i2 s
</div>
. j; |* M; t. w- m5 l7 p \7 n& d4 ]
<div data-role="footer">. L: @2 {6 A) r4 O' H2 u
<h1>底部文字</h1>2 u) K9 H& b+ b, V6 c8 D6 |, `
</div>
2 w1 _3 j/ ^3 u- F5 g
9 y4 g J. w p</div>7 g- n, S |3 s" s5 x" m' J
</body>
8 g; v+ o) q1 i: R: K實例解析：
- H' ?* ?, x7 r: l% g' l J7 h9 H/ y2 i1 c' d( z3 x: R
data-role="page" 是在瀏覽器中顯示的頁面。) q" P3 _3 Y' X2 y0 |8 J
data-role="header" 是在頁面頂部建立的工具條 (通常用於標題或者搜尋按鈕)6 k0 C! B, J9 T# p3 d. H
data-role="main" 定義了頁面的內容，比如文字， 圖片，表單，按鈕等。( a9 {+ B5 D% T1 u3 g
"ui-content" 類用於在頁面增加內邊距和外邊距。
3 [9 _9 d R- _5 u: k data-role="footer" 用於建立頁面底部工具條。5 y' W- [, ]- `
在這些容器中你可以增加任何 HTML 元素 - 段落, 圖片, 標題, 列表等。, t' C A9 @; G2 o, i
$ `. `7 m+ k9 D& j0 ?/ qlamp jQuery Mobile 依賴 HTML5 data-* 屬性來支援各種 UI 元素、過渡和頁面結構。不支援它們的瀏覽器將以靜默方式棄用它們。( |; ]6 q- j& v8 W- ~8 M) e; O3 d; Y
/ z' z9 W \/ l" S在頁面中增加 jQuery Mobile; D @$ j4 H" J4 c5 D
# p8 x: m6 e' h0 `. Q' ]
使用 jQuery Mobile, 你可以再單個 HTML 檔案中建立多個不同的頁面。
( U4 b; m& w/ s+ O8 _8 C* r# X6 A1 L X. Q5 Q/ P0 x* g( y6 Z
你可以使用不同的href屬性來區分使用同一個唯一id的頁面：5 `/ Z" U+ e9 y$ C% W; j
實例0 y: V; z' L/ r4 s7 _
<div data-role="page" id="pageone">
$ T* ^: I, X: g Q: y- j. { <div data-role="main" class="ui-content">4 [3 W$ Y, T# Z; @9 G& u; a3 d( C C
<a href="#pagetwo">跳轉到第二個頁面</a>! X2 D0 w. a- x9 R* W7 o+ ?: [
</div>
' V. T( l, N- u; r7 f</div>( q W6 b% l1 N% `" _, }
- R+ s3 [9 S8 C: x( [% m<div data-role="page" id="pagetwo">. h. r: w% t0 K, `! P% K: `$ s
<div data-role="main" class="ui-content">' \" U8 g0 ?0 n3 B( j0 J3 s) u
<a href="#pageone">跳轉到第一個頁面</a> x8 o5 l* }9 {) c# s
</div>, @3 j) {" u& m# J; n7 D2 P
</div>
9 Z, F. }% F, a4 Y7 [# b Z- N4 m注意： 當web應用有大量的內容（文字，圖片，腳本等）將會嚴重影響加載時間。如果你不想使用內頁連結可以使用外部檔案：; h! i/ h1 D5 N z `& `9 |
" E- U8 y g4 i/ ?: O3 l<a href="externalfile.html">訪問外部檔案</a>
! y# v3 l ?1 u6 R U
; R. H( g- y3 v, Z s, z5 N頁面作為對話框使用+ D3 Y7 l( ~. r" C2 s4 O% j* [
* s: ?$ P Q( e; V
對話框是用於顯示頁面內容顯示或者表單內容的輸入。
5 ^. B* z# R& ~' `. w& A& O& s& ~2 D7 B. X# L
在連結中增加data-rel="dialog"讓會員點閱連結時彈出對話框:
& _3 ?/ r) D7 _( V. Y7 g0 a實例
4 x4 E5 @6 m* B: g1 y<div data-role="page" id="pageone">
* }7 @& q$ I% h( F <div data-role="main" class="ui-content">+ L r& t( v9 k5 g4 |
<a href="#pagetwo">跳轉到第二個頁面</a>0 U# R, {0 Q6 y2 j4 P- D
</div>
, o$ L& x9 S1 S/ ~</div> C& z& U! R$ n& P* G
- v4 C4 Z8 \& J- y: B<div data-role="page" data-dialog="true" id="pagetwo">+ d) D! p0 a/ Z* d+ g5 w3 |
<div data-role="main" class="ui-content">
+ ^$ h1 d$ a$ Z; [9 J <a href="#pageone">跳轉到第一個頁面</a>
" E; d& [6 d, G( ` </div>
8 ]; E8 H- }/ n' f0 I</div> |
|
|Archiver|手機版|禁閉室|MyXNova (原 myxnova.com)
聲望
現金
存款
瀏覽推廣
註冊推廣
金幣
遊戲幣
鑽石
IP卡
狗仔卡
[資訊未更新]
發表於 2016-6-25 16:22:43
提升卡
置頂卡
沉默卡
喧囂卡
變色卡
千斤頂
顯身卡