等級：25 - 爐火純青 經驗值：0 / 246 魔法值：14781 / 14781 生命值：6%
升級
   100%
TA的每日心情 | 奮斗
12 小時前 |
|---|
簽到天數: 5889 天 [LV.Master]伴壇終老
|
馬上註冊，結交更多好友，享用更多功能，讓你輕鬆玩轉社群。
您需要 登入 才可以下載或檢視，沒有帳號？立即註冊
×
jQuery Mobile 是用於建立移動 Web 應用的前端開發框架。
+ J& Z- g3 w+ y8 O- D- c6 c( rjQuery Mobile 可以應用於智能手機與平板電腦。 $ Q" k* g2 `3 r- [. W9 Y4 l
jQuery Mobile 使用 HTML5 & CSS3 最小的腳本來佈局網頁。
/ \% X& G; S0 ]3 q/ m$ R3 i2 c$ t! m, |& f$ }
什麼是 jQuery Mobile? ! J _0 ?6 d: a' ~5 m- |6 V
1 v, S, S, o( |9 ]3 JjQuery Mobile 是針對觸屏智能手機與平板電腦的網頁開發框架。 + e' ~* |* z- H5 d. R+ [
, b Z( I+ O i- v" o) s; @jQuery Mobile 工作與所有主流的智能手機和平板電腦上：
8 U& I0 Y" E1 D1 s( ]; l. m: D" G1 G
) M7 ^ ?" k4 w" o Y) w7 Z$ wjQuery Mobile 構建於 jQuery 以及 jQuery UI類庫之上，如果您瞭解 jQuery，您可以很容易的學習 jQuery Mobile。
" f- F4 Z2 [7 a) qjQuery Mobile 使用了極少的 HTML5、CSS3、JavaScript 和 AJAX 腳本代碼來完成頁面的佈局渲染。
V2 D* u( D- d7 G2 H; [* u% `5 H" c+ u5 I) K$ u
為什麼使用 jQuery Mobile?: a0 {9 B, x$ y4 J" b
% j$ D' V& s1 P2 B& s2 s' r# Q
通過使用jQuery Mobile 可以 "寫更少的代碼，做更多的事情" : 它可以通過一個靈活及簡單的方式來佈局網頁，且兼容所有移動設備。
' X- |9 i3 F; ~9 ?' z& tlamp 不同設備使用了不同開發語言，jQuery Mobile可以很好的兼容不容的設備或操作系統：0 }! o- ~( p: a( L$ u
\; g+ n; R5 w# ]+ e% Z5 r
Android 和 Blackberry（黑莓） 使用JAVA語言。
& o D# ]& g, E8 i6 k1 N# o+ Z iOS 使用 Objective C 語言4 j3 K6 v6 ^$ f r& k
Windows Phone 使用 C# 和 .net, 等。
3 J/ O# u. g# `' }
" e# B ^. C/ G" r+ i; sjQuery Mobile 解決了不同設備兼容的問題，因為它只使用HTML，CSS和 JavaScript，這是所有移動網絡瀏覽器的標準！
" t5 y7 k8 U$ ]; I, `6 e9 w' Q7 \1 b* C1 [- X& N, K8 y" f7 d
jQuery Mobile 安裝* S# M7 R _, q6 o2 v' O
在你的網頁中增加 jQuery Mobile" J* Z V1 c6 W: |" ?3 b
7 W1 J3 G% X( c. ?你可以通過以下幾種方式將jQuery Mobile增加到你的網頁中：& t- e* `8 t* W) ~+ k) M. [" h5 W
" b1 q1 h8 N9 t. M" ?, q6 m& J 從 CDN 中加載 jQuery Mobile (推薦)
- G6 V) G" ?3 I# ] @( q% o$ o% O 從jQuerymobile.com 下載 jQuery Mobile庫
% t; n8 M% [' N, X, v
: T l; h5 o. [. G8 k下載 jQuery Mobile
! t# k/ I& e. h" B* i9 l5 b" E2 }3 J/ i8 o" a! T2 B7 ^' U+ [! n K
如果你想將 jQuery Mobile 放於你的主機中,你可以從 jQuerymobile.com下載該檔案。" J2 q: o% n! `
3 i- }1 z, R$ j1 L8 _
<head>2 q4 @" H7 [4 \& v3 m
<meta name="viewport" content="width=device-width, initial-scale=1">
* }4 t" ~/ u' K<link rel="stylesheet" href="jquery.mobile-1.4.5.css">5 P, p/ d7 G/ o: v) r% M
<script src="jquery.js"></script>
1 p# B6 A$ ^6 j8 v/ |* H& x<script src="jquery.mobile-1.4.5.js"></script>9 B# x) D2 c4 ~1 D- p
</head>
E& f0 y& `: D6 P U% j+ y4 g) X' L1 k& ]7 E+ h' ~) o
提示： 將下載的檔案放置於與網頁同一目錄下。, s" ^& A$ G2 F& O7 H2 q0 S$ ~
lamp 你是否想知道為什麼在 <script> 標籤中 沒有插入 type="text/javascript" ?% p& y p/ Q' q* w
9 n$ A$ v! X( }+ ?" j8 t
在 HTML5 已經不需要該屬性。 JavaScript 在所有現代瀏覽器中是 HTML5 的預設腳本語言！
6 k- E4 a n- `# }2 i( E. S4 k/ n7 L& y8 e }2 m
jQuery Mobile 頁面- A7 S4 Z+ H$ E8 ^2 p8 Z1 Q
開始學習 jQuery Mobile
# v' {3 y. c( q$ X c實例
* F S, P9 O+ l$ v7 y( r3 d- l<body>- V4 j4 R- T8 u- s$ e" t5 p f
<div data-role="page">
W$ y J, N% `0 T& @, l7 v2 Z( J, Z4 E/ v
<div data-role="header">
- d1 F t0 f- G4 g# S. U6 ?$ R& Q <h1>歡迎來到我的主頁</h1>0 |8 v7 m4 Y1 v$ _9 ?, ^/ F
</div>
( \3 M* T# Z' l) F/ N* s+ ^8 K. g; e! Z6 L
<div data-role="main" class="ui-content">
4 k$ e8 w; @% R- i( J/ F <p>我現在是一個移動端開發者!!</p>
. }" r `9 z/ V- n& | </div>
; F! {& H' H8 A2 P) S
. x! k% `! f* p4 t8 |* c <div data-role="footer">
) }2 u6 l6 A" o$ w- r <h1>底部文字</h1>
" N( |# [( }8 G* r- @ </div>
( y! B( S# Q0 L
f- N) u2 B/ {8 j</div>/ R6 M3 n/ t0 x$ l
</body>% p* Y" h6 }; d
實例解析：
; \' @8 y8 t8 r! V: P* [. ^- Y+ w2 V+ p1 E! L
data-role="page" 是在瀏覽器中顯示的頁面。. z' S, |2 R: w0 r8 [! `
data-role="header" 是在頁面頂部建立的工具條 (通常用於標題或者搜尋按鈕)6 k& j- f6 U2 W7 i+ T
data-role="main" 定義了頁面的內容，比如文字， 圖片，表單，按鈕等。
8 {; E" |0 ~! U% q6 R "ui-content" 類用於在頁面增加內邊距和外邊距。( N" [; h/ b) B I
data-role="footer" 用於建立頁面底部工具條。' B- @5 p' D& S, k
在這些容器中你可以增加任何 HTML 元素 - 段落, 圖片, 標題, 列表等。/ F7 \+ k! p* ~% Z, S$ |/ {
7 h) `+ _. Q( Y/ \1 O8 olamp jQuery Mobile 依賴 HTML5 data-* 屬性來支援各種 UI 元素、過渡和頁面結構。不支援它們的瀏覽器將以靜默方式棄用它們。
' t" _ o: r3 j# t& m/ j5 Z/ F' b K; P6 r6 K
在頁面中增加 jQuery Mobile
( [8 g- p/ C3 b' O0 B
4 z4 N0 y7 ~5 G, E! @使用 jQuery Mobile, 你可以再單個 HTML 檔案中建立多個不同的頁面。$ V" t/ X4 k+ ~9 {; m
8 Z3 B# i( g0 N. d
你可以使用不同的href屬性來區分使用同一個唯一id的頁面：
/ o2 L0 K: B" z+ V2 K實例
; v$ h6 g- q. Q, S! |9 [' t<div data-role="page" id="pageone">
- ]3 F6 o7 V6 Y6 a1 U <div data-role="main" class="ui-content">3 |7 y# \4 ? M' T4 Y! P* o1 r
<a href="#pagetwo">跳轉到第二個頁面</a>
! h: l7 j& B, Q0 l- \: u </div>% p' v7 Z: I2 E! M2 c5 U
</div>
* \- w& O$ P2 T3 F, o0 p4 e/ F/ l- O
. M2 z: V* A G9 E7 _( y<div data-role="page" id="pagetwo"> h2 f$ S4 F% U2 D
<div data-role="main" class="ui-content">
0 j3 b- E3 d& @' h# W/ X- S <a href="#pageone">跳轉到第一個頁面</a>6 ^% r5 `( N& S. X3 E8 T% J# C/ D
</div>; ]- i5 K, {8 T+ w9 C. C3 X* n+ f
</div>
: p8 D5 |7 I- g5 N$ G# u注意： 當web應用有大量的內容（文字，圖片，腳本等）將會嚴重影響加載時間。如果你不想使用內頁連結可以使用外部檔案：* @# \& J, H. x
' h2 x/ L& F+ ~/ t+ }" a4 p<a href="externalfile.html">訪問外部檔案</a>& s1 c8 N8 [; H2 @% [- m2 h
' F& }- G! f6 q [4 e
頁面作為對話框使用
7 Q+ H5 g7 v. a' y8 g* f: s' M" ~; I( b4 I2 s' g
對話框是用於顯示頁面內容顯示或者表單內容的輸入。2 x( t. [* p; V' R
' _7 U7 q+ f/ E1 n3 J在連結中增加data-rel="dialog"讓會員點閱連結時彈出對話框:
. N" P8 Y( f1 y! y, S實例; h% }) ?. Y- D0 b7 ]3 h9 D" l: y
<div data-role="page" id="pageone">
/ W2 i- G# ~' r" m8 V* w/ l) i* Z: l <div data-role="main" class="ui-content">2 [ J% C% x1 K
<a href="#pagetwo">跳轉到第二個頁面</a>
% T9 i0 \5 n0 A( w* r9 }& |- m </div>
. }4 I% a1 ~8 T$ y</div>
+ Y# W6 _" y# z/ X! |& F) }6 q, l" t8 y: w! S
<div data-role="page" data-dialog="true" id="pagetwo">
) W+ {; c; f m$ Y <div data-role="main" class="ui-content">7 n6 b* F; ^, u" Z4 o) c" S6 s
<a href="#pageone">跳轉到第一個頁面</a>
) @0 ~4 {+ K3 X9 B </div>
, |6 ?; Y- ?: N9 l6 m/ @</div> |
|
|Archiver|手機版|禁閉室|MyXNova (原 myxnova.com)
聲望
現金
存款
瀏覽推廣
註冊推廣
金幣
遊戲幣
鑽石
IP卡
狗仔卡
[資訊未更新]
發表於 2016-6-25 16:22:43
提升卡
置頂卡
沉默卡
喧囂卡
變色卡
千斤頂
顯身卡