等級：25 - 爐火純青 經驗值：0 / 246 魔法值：14759 / 14759 生命值：6%
升級
   100%
TA的每日心情 | 奮斗
前天 00:44 |
|---|
簽到天數: 5883 天 [LV.Master]伴壇終老
|
馬上註冊，結交更多好友，享用更多功能，讓你輕鬆玩轉社群。
您需要 登入 才可以下載或檢視，沒有帳號？立即註冊
×
jQuery Mobile 是用於建立移動 Web 應用的前端開發框架。 3 [, _2 b$ T O! x
jQuery Mobile 可以應用於智能手機與平板電腦。
4 [; Y: D9 Q* H: `4 x' k5 W9 L% qjQuery Mobile 使用 HTML5 & CSS3 最小的腳本來佈局網頁。
3 E. ]+ Q7 y3 ~$ Y$ P' F+ X9 J6 [! ?: R
什麼是 jQuery Mobile? ) H& x; O; a8 l8 N
) y' |& o! x; T `( n" s; D
jQuery Mobile 是針對觸屏智能手機與平板電腦的網頁開發框架。
; E) W8 j5 b3 j: n
5 W) g; |& M5 \4 ?/ ?, Z9 M9 FjQuery Mobile 工作與所有主流的智能手機和平板電腦上：
3 G( a. r d+ I" j- m7 x: Z8 g7 x9 I O( U4 ]; g. R8 J5 W) y) |
jQuery Mobile 構建於 jQuery 以及 jQuery UI類庫之上，如果您瞭解 jQuery，您可以很容易的學習 jQuery Mobile。 3 ] G2 E, ]3 w* N# f
jQuery Mobile 使用了極少的 HTML5、CSS3、JavaScript 和 AJAX 腳本代碼來完成頁面的佈局渲染。
4 k% F) v3 p! s6 V( n! S- R# @3 j4 ?# s- b, _$ [
為什麼使用 jQuery Mobile?
6 C+ w; k, S+ d; }1 i& w- J( G4 a1 D" `5 q0 V! {( N8 J3 ^4 x
通過使用jQuery Mobile 可以 "寫更少的代碼，做更多的事情" : 它可以通過一個靈活及簡單的方式來佈局網頁，且兼容所有移動設備。
* ~4 ~; j) I O% g" f5 glamp 不同設備使用了不同開發語言，jQuery Mobile可以很好的兼容不容的設備或操作系統：
4 |/ y* s' Q, x+ z" l3 W y
0 m# V" V# ?& C+ k Android 和 Blackberry（黑莓） 使用JAVA語言。
# ~0 c7 g0 D( W4 l/ t+ a iOS 使用 Objective C 語言
' }: C2 |+ } B& ~* S5 w* h g Windows Phone 使用 C# 和 .net, 等。
, e" e8 {$ S8 k( d6 C3 x9 y9 O
' ?; K* u8 \# P$ l) M# zjQuery Mobile 解決了不同設備兼容的問題，因為它只使用HTML，CSS和 JavaScript，這是所有移動網絡瀏覽器的標準！
. p$ X" \: E' N. X. v2 k9 C1 T+ }% o' I$ [7 a, E2 q# Q9 G! L' M3 ]1 q, e
jQuery Mobile 安裝7 `& V6 a$ K3 G; K( f' u2 c( i9 g n
在你的網頁中增加 jQuery Mobile
3 T0 r& N. Q. l4 N2 k0 K7 C7 U0 X. u. H% b; ~, Q+ A6 E" s
你可以通過以下幾種方式將jQuery Mobile增加到你的網頁中：1 V& C/ `# X) I% z0 h
2 p; P% C* g! N4 n' t2 r 從 CDN 中加載 jQuery Mobile (推薦)
* Y% ]0 J" K9 M" d% S 從jQuerymobile.com 下載 jQuery Mobile庫6 @, _$ |& T/ c- S- a# ~' @
" |2 n; N5 {! a) u" M/ }( L
下載 jQuery Mobile5 s ^7 L- W! H8 F, h6 K
/ C+ b* i/ L* Z$ x$ s如果你想將 jQuery Mobile 放於你的主機中,你可以從 jQuerymobile.com下載該檔案。
3 T, l$ C: q6 a- ^8 x. ~
2 A! } B/ o, ~% B2 q ^<head>( e( p1 [3 h" }
<meta name="viewport" content="width=device-width, initial-scale=1">" a1 x& W% \+ m: v# L* o
<link rel="stylesheet" href="jquery.mobile-1.4.5.css">( ]6 f, X7 h: K* F c& P
<script src="jquery.js"></script>
( R# l8 y4 o$ I6 n* p<script src="jquery.mobile-1.4.5.js"></script>2 V# i7 X! ?. w& g
</head>
" w3 d0 U; G; G+ l7 Q5 w
, E6 y% @5 r# L7 }$ ?9 v提示： 將下載的檔案放置於與網頁同一目錄下。
5 I+ I$ k, Y5 e- {2 _lamp 你是否想知道為什麼在 <script> 標籤中 沒有插入 type="text/javascript" ?6 P3 K! g, }( Y: L4 v
6 `& q+ x9 O0 Y% X2 p# S" o7 J在 HTML5 已經不需要該屬性。 JavaScript 在所有現代瀏覽器中是 HTML5 的預設腳本語言！
# N8 q9 K1 Y M: u& a2 `/ B e! ~' `! t- y( j/ B; b' {
jQuery Mobile 頁面
) w: K$ N0 x7 W6 ]# k0 M開始學習 jQuery Mobile
: t; L4 O6 a7 v實例+ t6 o2 x0 o2 z% D0 }/ w1 ~6 r
<body>2 O9 z) D: @3 W$ L
<div data-role="page">, x7 u8 B% ^6 n2 n
7 {4 Q9 O) ~3 o9 K. `
<div data-role="header">
: x5 S7 u5 x# C( Q6 G <h1>歡迎來到我的主頁</h1>
+ o9 Y/ d- u- V, _. C$ G </div>
* [8 \! T$ l. b8 D, `
; q: p, m4 Y" J) x$ w; u" f% m0 w <div data-role="main" class="ui-content">4 \4 H2 U, _' K8 M3 ]
<p>我現在是一個移動端開發者!!</p>3 P: {. V- D1 u+ p5 e! O. b8 |* [
</div>
: Q3 `4 R0 K, z V4 q3 E7 L9 g, E
<div data-role="footer">, l. e. ^$ b/ U+ x3 n
<h1>底部文字</h1>
& b/ a3 }2 S) o9 p8 |8 b </div>, {; t; S% [7 R! A- b# U
g. Z, K- ?( c" A$ B1 A% C' ]</div>* `! z. N3 ? b; C2 r
</body>
3 x8 i5 A% Z N0 _& X& P0 f1 T實例解析：# s3 u! x# p- s: v5 o
( ?! z' g+ `/ M( q. ?* E5 ]
data-role="page" 是在瀏覽器中顯示的頁面。
0 V) H+ R5 p0 q6 P% P data-role="header" 是在頁面頂部建立的工具條 (通常用於標題或者搜尋按鈕)4 x& F7 Q# @1 M# S3 J3 {
data-role="main" 定義了頁面的內容，比如文字， 圖片，表單，按鈕等。
( W; h( q/ U; U) n "ui-content" 類用於在頁面增加內邊距和外邊距。
9 E7 E b: X. j1 n4 \7 P R data-role="footer" 用於建立頁面底部工具條。
3 y$ s! r g% f$ F+ }& x" h% ] 在這些容器中你可以增加任何 HTML 元素 - 段落, 圖片, 標題, 列表等。
! i+ ^- x3 y( H+ l" P" A; \. P9 t' N0 W4 h. \+ M* p1 C
lamp jQuery Mobile 依賴 HTML5 data-* 屬性來支援各種 UI 元素、過渡和頁面結構。不支援它們的瀏覽器將以靜默方式棄用它們。3 A2 E/ H6 x0 {5 q* ?
9 G5 `0 o2 v; r$ G在頁面中增加 jQuery Mobile
. m' H* ?7 w1 w6 v. l) C6 A# b7 e( g6 m; f8 G |& {
使用 jQuery Mobile, 你可以再單個 HTML 檔案中建立多個不同的頁面。
8 h' [6 L6 [2 o S8 i. \$ x
& D( ^ j) a: P6 w9 U0 P- H8 \你可以使用不同的href屬性來區分使用同一個唯一id的頁面：6 d7 I- Y. Z/ o0 G, ^; b% S/ v
實例
! x: W- c7 g3 n0 z<div data-role="page" id="pageone">
) E5 X1 @2 ]# P2 h5 X! @ <div data-role="main" class="ui-content">
8 |3 j) }- j: j: l( X <a href="#pagetwo">跳轉到第二個頁面</a>
, |# R4 C+ T7 \1 V: A, v" s </div> T( C9 V8 d, W
</div>
+ T p. {0 X T+ G. ]* V. O
' e. v; _" b) p! n# B<div data-role="page" id="pagetwo">" P# \' g/ K0 s3 p
<div data-role="main" class="ui-content">
p M$ D+ q% b; i* A& K+ w( q9 I8 L1 k <a href="#pageone">跳轉到第一個頁面</a>
, {: J; W( D# l/ f& Y$ F </div>8 l/ x6 F7 u6 v4 z
</div>5 p+ k4 K9 |1 F
注意： 當web應用有大量的內容（文字，圖片，腳本等）將會嚴重影響加載時間。如果你不想使用內頁連結可以使用外部檔案：
4 _2 ?. M/ I% F! |% P- o* a: a R6 ~% G: @
<a href="externalfile.html">訪問外部檔案</a>; r" u8 G2 L4 l
7 q$ X& C( L: A, n& S6 X
頁面作為對話框使用0 o2 s6 @( h4 |
: b' {1 q- E: Y5 r對話框是用於顯示頁面內容顯示或者表單內容的輸入。
6 L- ~6 ~9 H. R! C; ?* a d( E
) M \ g: E6 P, ^) n& ?( B% s# {在連結中增加data-rel="dialog"讓會員點閱連結時彈出對話框:9 ~9 w' J+ I- o r6 b
實例 _& C- ^2 m4 ?6 b& k
<div data-role="page" id="pageone">; t j5 ^, }3 e% H( Q: U/ k: t8 p
<div data-role="main" class="ui-content">, k. q% W' Y( m2 [
<a href="#pagetwo">跳轉到第二個頁面</a>1 ~+ q0 p, X% {
</div>7 V6 @! C' u( P' @4 O& I0 G; i4 g
</div>) n4 R: D5 E- j" w; W7 B, ~# y. o' u4 G
) d2 F) k: m! \% N( H0 t% J
<div data-role="page" data-dialog="true" id="pagetwo">- f1 U5 U1 n. Z5 u# d; x1 H( G$ e
<div data-role="main" class="ui-content">/ ~2 E2 x( E6 j
<a href="#pageone">跳轉到第一個頁面</a>" N# E: H8 ~1 K
</div>
1 @; N; _, ~# [0 W5 \* B</div> |
|
|Archiver|手機版|禁閉室|MyXNova (原 myxnova.com)
聲望
現金
存款
瀏覽推廣
註冊推廣
金幣
遊戲幣
鑽石
IP卡
狗仔卡
[資訊未更新]
發表於 2016-6-25 16:22:43
提升卡
置頂卡
沉默卡
喧囂卡
變色卡
千斤頂
顯身卡