等級：25 - 爐火純青 經驗值：0 / 245 魔法值：13743 / 13743 生命值：5%
升級
   100%
TA的每日心情 | 擦汗
昨天 00:24 |
|---|
簽到天數: 5556 天 [LV.Master]伴壇終老
|
馬上註冊，結交更多好友，享用更多功能，讓你輕鬆玩轉社群。
您需要 登入 才可以下載或檢視，沒有帳號？立即註冊
×
jQuery Mobile 是用於建立移動 Web 應用的前端開發框架。
, v8 O7 W8 l9 T+ y- }jQuery Mobile 可以應用於智能手機與平板電腦。 * D7 U- W4 I/ F
jQuery Mobile 使用 HTML5 & CSS3 最小的腳本來佈局網頁。
1 k/ v( i+ C! E- [
3 T- _7 E. O3 k: U* p2 t, U什麼是 jQuery Mobile? 2 _) g- J* }1 C+ K% W# W" A1 f
' o) C4 `1 J0 x O+ R: O) W
jQuery Mobile 是針對觸屏智能手機與平板電腦的網頁開發框架。
! f! H' z, W1 ^9 G( z/ H1 z7 M
! N0 M: h6 s6 l1 O6 A0 h' L0 ?jQuery Mobile 工作與所有主流的智能手機和平板電腦上： . [0 e7 _) v% n* O; O2 J) ]3 x
% O9 X# w, K$ r7 f0 z0 T$ h
jQuery Mobile 構建於 jQuery 以及 jQuery UI類庫之上，如果您瞭解 jQuery，您可以很容易的學習 jQuery Mobile。
2 b' m( q) M! T$ yjQuery Mobile 使用了極少的 HTML5、CSS3、JavaScript 和 AJAX 腳本代碼來完成頁面的佈局渲染。
7 E5 t, Q- _. t: b; ]9 I9 W8 N( ]6 A6 d7 M8 r3 \, o5 G
為什麼使用 jQuery Mobile?; g. K7 g& ~2 w% L O+ k
' L7 A1 ?! \$ p
通過使用jQuery Mobile 可以 "寫更少的代碼，做更多的事情" : 它可以通過一個靈活及簡單的方式來佈局網頁，且兼容所有移動設備。, ?+ b: P8 O+ I2 n+ r
lamp 不同設備使用了不同開發語言，jQuery Mobile可以很好的兼容不容的設備或操作系統：
$ U, j( `1 ]7 g- y% `* w i3 e: T! G% }- g+ f
Android 和 Blackberry（黑莓） 使用JAVA語言。
& n4 ?8 m* a) | iOS 使用 Objective C 語言
5 y7 u5 s/ V$ F& ]+ t, e$ v Windows Phone 使用 C# 和 .net, 等。
, _6 f2 [4 a" Y# @: f2 A/ D$ h) m( a+ S
jQuery Mobile 解決了不同設備兼容的問題，因為它只使用HTML，CSS和 JavaScript，這是所有移動網絡瀏覽器的標準！1 B* R" B; o( Y
3 [ _% z0 `% s1 v; |! YjQuery Mobile 安裝
9 z6 p6 p+ b% z3 L+ N( S9 {. L: ~& Q在你的網頁中增加 jQuery Mobile
# m7 A' y7 o2 R' h1 H: [, m3 j" f: v u0 i# _3 J7 L/ U
你可以通過以下幾種方式將jQuery Mobile增加到你的網頁中：
! y/ I5 e1 S5 |/ P$ u. l4 d8 s; @4 l
( x: W( @4 J# c- ~ 從 CDN 中加載 jQuery Mobile (推薦)% t' v' t6 m' c. Z( X' |
從jQuerymobile.com 下載 jQuery Mobile庫
4 D$ V+ b; w' G3 B0 B% u) g0 |6 v' k; y, y+ }9 D
下載 jQuery Mobile
. M0 o/ N. A/ i
9 o% [- ~! C" b7 a+ `如果你想將 jQuery Mobile 放於你的主機中,你可以從 jQuerymobile.com下載該檔案。
( b3 Z y, Y I* r) Q! @
' t2 Q% B4 X! Y0 r$ E4 F<head>/ W0 p9 z0 t" Q. I, A6 Q- J
<meta name="viewport" content="width=device-width, initial-scale=1">& X; R( w2 r( e4 b
<link rel="stylesheet" href="jquery.mobile-1.4.5.css">
! `! U& A- @7 v; J<script src="jquery.js"></script>
& r! d/ ^/ q F$ Q<script src="jquery.mobile-1.4.5.js"></script>, A$ a1 A+ y6 ~1 h6 ~5 f
</head>( c0 |$ z6 _9 f" x. ~9 I! u7 a7 E
* \6 E" W( B6 c; D' G; M& l/ z
提示： 將下載的檔案放置於與網頁同一目錄下。
" p* J" j/ m0 v) D( S( blamp 你是否想知道為什麼在 <script> 標籤中 沒有插入 type="text/javascript" ?
# N$ o& a0 ]# t9 ^& B! b8 m. u- J! v1 s7 \5 z- g% Y8 F
在 HTML5 已經不需要該屬性。 JavaScript 在所有現代瀏覽器中是 HTML5 的預設腳本語言！& I2 z1 {7 v) H1 Y ~* |
& T' S- J' ^: R( y: g# m' HjQuery Mobile 頁面
6 C* M2 N2 l3 q1 `, S開始學習 jQuery Mobile
9 S) n& m* g8 u2 M" v4 l* n實例
; B8 y( ?1 b$ |<body>
& `4 L+ h$ x) L1 c9 x% [8 a) R& i<div data-role="page">
( R5 p0 R; S8 {* N$ f* W) |
. P1 T/ f, s7 Z8 W2 h* P <div data-role="header">5 \) U0 H: ?- t! j& ]
<h1>歡迎來到我的主頁</h1># T5 S: z% g4 n3 y
</div>6 w) K% d- s9 v7 [
% b% h( z6 j( x1 l- ]3 [5 k <div data-role="main" class="ui-content">& `4 o- O5 W! q1 C4 [$ p6 F
<p>我現在是一個移動端開發者!!</p>
% |3 J2 ^, Q- g2 { </div>
$ Z- j9 z' m9 E u8 E" M& o5 X- z g
<div data-role="footer">
! |% p8 I8 t# e! o/ l) n; C <h1>底部文字</h1>
/ c; t. f2 Z V* C+ l </div>" w9 d! B8 s& I% o6 V
8 Z o e/ _3 o0 D
</div>
T/ M2 \+ x2 N3 R2 o' J' ?2 D# y; x</body>
) ?1 K6 e$ R: }- p, v2 g. a5 l5 p實例解析：$ z( ^/ L7 w; R+ Y7 M
. j b# V7 S+ K. }1 M
data-role="page" 是在瀏覽器中顯示的頁面。: Q8 g8 `6 M( A! i+ R9 f5 a
data-role="header" 是在頁面頂部建立的工具條 (通常用於標題或者搜尋按鈕)! g3 K9 s: F& n# j$ [" D( f6 V. X
data-role="main" 定義了頁面的內容，比如文字， 圖片，表單，按鈕等。2 y/ K! ^3 r7 [' l* E! z
"ui-content" 類用於在頁面增加內邊距和外邊距。
" |! W g; H W' h) [+ k data-role="footer" 用於建立頁面底部工具條。
9 @9 Q+ E( n% S% s- ^5 T3 m* w+ z 在這些容器中你可以增加任何 HTML 元素 - 段落, 圖片, 標題, 列表等。
' ?- g9 o/ Z w6 N F
5 t2 M, Z# b9 {; H) @ J& tlamp jQuery Mobile 依賴 HTML5 data-* 屬性來支援各種 UI 元素、過渡和頁面結構。不支援它們的瀏覽器將以靜默方式棄用它們。
: S) S3 S9 n. V; F9 z
3 ^; P3 w% `7 b在頁面中增加 jQuery Mobile9 [1 P) G+ Y: l$ k. c
8 y, ?5 j' b3 d( a/ l5 M6 }& d+ h使用 jQuery Mobile, 你可以再單個 HTML 檔案中建立多個不同的頁面。8 |% j/ u$ J! r3 z1 K& Z" W8 d
4 C, R6 s8 `2 e e
你可以使用不同的href屬性來區分使用同一個唯一id的頁面：3 e) m3 C: H* \! `
實例
7 q; ~$ k% g1 }1 f( M+ L: f4 j1 n' P<div data-role="page" id="pageone">* p5 J* w2 B7 ^) ^
<div data-role="main" class="ui-content">3 V1 k4 @. V% ~( u( m
<a href="#pagetwo">跳轉到第二個頁面</a>
7 @& r5 p0 @7 r- M+ P- @ </div>) f7 H" p6 w0 @% J2 v5 V& O$ x
</div>
( ^$ Y1 L, x F& X; O6 A/ G
8 J, F5 Z: M' i<div data-role="page" id="pagetwo">+ I1 [$ w5 x& R2 Q, y7 z
<div data-role="main" class="ui-content">/ Q$ l- n& R" ?; _# V0 b
<a href="#pageone">跳轉到第一個頁面</a>
: ]0 G1 p M% }& W' {& n* t </div>! i9 b0 q" j+ i1 ~+ D5 y7 T
</div>
z O5 I+ ]; R! H! [. ~注意： 當web應用有大量的內容（文字，圖片，腳本等）將會嚴重影響加載時間。如果你不想使用內頁連結可以使用外部檔案：
9 `/ Y/ s( S/ R, x5 P( B& o1 \( `$ l& Z7 [- H& {# W
<a href="externalfile.html">訪問外部檔案</a>( o B* v; O' H% T; Z
# W3 X$ t" [' @
頁面作為對話框使用
7 M* O( @/ {0 j0 L0 H) J5 `9 h" ~0 {& s5 f2 u% X' j) s2 O
對話框是用於顯示頁面內容顯示或者表單內容的輸入。
; y* h3 N. P* K2 q/ {, X% R% m: Y
9 I* v2 L4 ~" x4 s0 A" T2 r在連結中增加data-rel="dialog"讓會員點閱連結時彈出對話框:
4 s! Q! @' f8 u; X `實例4 c1 N/ H2 U+ ?
<div data-role="page" id="pageone">. w$ X6 \; F% d! }
<div data-role="main" class="ui-content">' ]+ d: u9 r4 Q3 ~: D# W
<a href="#pagetwo">跳轉到第二個頁面</a>
0 x% N. }/ ~& F5 O. \9 [1 t% m. n </div>7 ?8 ]/ }5 r3 g. k J4 y; J
</div>; y# n; r& R H) M0 B2 z3 g% j9 S& M- l
6 w: t% U( P2 \! u
<div data-role="page" data-dialog="true" id="pagetwo">
/ G+ {0 y: m6 ^! f* t3 M <div data-role="main" class="ui-content">
5 u6 p& ?! s7 j% D+ y- D$ p2 P3 d <a href="#pageone">跳轉到第一個頁面</a>
( z, y: U' ~9 C* p+ G" P/ j! j2 K5 L </div>
4 Z. d: _; ~ z* w+ B1 n</div> |
|
|Archiver|手機版|禁閉室|MyXNova (原 myxnova.com)
聲望
現金
存款
瀏覽推廣
註冊推廣
金幣
遊戲幣
鑽石
IP卡
狗仔卡
[資訊未更新]
發表於 2016-6-25 16:22:43
提升卡
置頂卡
沉默卡
喧囂卡
變色卡
千斤頂
顯身卡