等級：25 - 爐火純青 經驗值：0 / 245 魔法值：14246 / 14246 生命值：5%
升級
   100%
TA的每日心情 | 奮斗
22 小時前 |
|---|
簽到天數: 5734 天 [LV.Master]伴壇終老
|
馬上註冊，結交更多好友，享用更多功能，讓你輕鬆玩轉社群。
您需要 登入 才可以下載或檢視，沒有帳號？立即註冊
×
jQuery Mobile 是用於建立移動 Web 應用的前端開發框架。 + u1 n- X& X+ @# x# x& [1 Q5 K
jQuery Mobile 可以應用於智能手機與平板電腦。
$ l6 w9 T1 w% D/ D& R9 v/ cjQuery Mobile 使用 HTML5 & CSS3 最小的腳本來佈局網頁。) J2 Y5 S/ @ G9 V! |8 m
1 }6 x0 b% l0 [8 o8 n6 J! g
什麼是 jQuery Mobile? . A2 |! T0 t1 P: J4 ]) M+ h3 a) H: t
9 P; u; \1 b2 J5 a+ B( ^jQuery Mobile 是針對觸屏智能手機與平板電腦的網頁開發框架。 : I6 r& s: V {, b
" M& o& n% v+ q
jQuery Mobile 工作與所有主流的智能手機和平板電腦上： 5 h! U! x8 p% z, \8 P
) | k$ }! H) f! o9 Z% P& Q* `
jQuery Mobile 構建於 jQuery 以及 jQuery UI類庫之上，如果您瞭解 jQuery，您可以很容易的學習 jQuery Mobile。
0 I6 `% N& k! |1 i" o8 Q$ xjQuery Mobile 使用了極少的 HTML5、CSS3、JavaScript 和 AJAX 腳本代碼來完成頁面的佈局渲染。
7 i- ^3 y e! |% i$ n U+ Y5 s! @3 t
' ^. q/ D' X$ H& I; }7 y3 X! w% ?為什麼使用 jQuery Mobile?
9 ?3 J' p" \, W' H( ?
M K z) R3 z# N! y2 c6 Y通過使用jQuery Mobile 可以 "寫更少的代碼，做更多的事情" : 它可以通過一個靈活及簡單的方式來佈局網頁，且兼容所有移動設備。6 F# C1 D# F% R; c8 p
lamp 不同設備使用了不同開發語言，jQuery Mobile可以很好的兼容不容的設備或操作系統：
+ p' l/ q) Z( W9 ~2 T
- C5 A# c/ V4 ]6 I7 Q5 T: c: i Android 和 Blackberry（黑莓） 使用JAVA語言。: ?5 G* K5 c2 r7 _4 z
iOS 使用 Objective C 語言" w; l5 q5 N2 Y0 \1 f: ^! S: v' G
Windows Phone 使用 C# 和 .net, 等。
2 {7 p# A# k& ?8 K
0 Q+ X* W9 V+ Q" U, vjQuery Mobile 解決了不同設備兼容的問題，因為它只使用HTML，CSS和 JavaScript，這是所有移動網絡瀏覽器的標準！# Q1 ]( d. B8 x& _
* c: m8 X7 H4 O. y$ p" ~jQuery Mobile 安裝
0 }/ k& @+ @7 m& q+ u在你的網頁中增加 jQuery Mobile
+ w' S; F2 B0 T# P! I! X# ?# O* f+ N
你可以通過以下幾種方式將jQuery Mobile增加到你的網頁中：
. Y& j& c, a% Y$ ?4 x- D
& z1 ]& L+ S% \" t p 從 CDN 中加載 jQuery Mobile (推薦)% h0 c j0 u' A0 g
從jQuerymobile.com 下載 jQuery Mobile庫
$ u) b) ?1 R3 G. f7 q: \
% l" Y1 Q0 k( f- U* j4 ?" Q. p" D下載 jQuery Mobile
% e6 G7 o1 a5 f+ ^ ~0 p( \6 q' R) v; F
如果你想將 jQuery Mobile 放於你的主機中,你可以從 jQuerymobile.com下載該檔案。% o0 {5 P# X$ L! y* y
" Y) b3 B+ \( b# f$ S( r9 p
<head>
; r( F# s i4 m<meta name="viewport" content="width=device-width, initial-scale=1">
. h0 l* N/ ~ p. q2 T<link rel="stylesheet" href="jquery.mobile-1.4.5.css">
I$ C4 w! ?1 A, `/ m* G5 ^<script src="jquery.js"></script>* R8 |1 J3 x7 R
<script src="jquery.mobile-1.4.5.js"></script>
0 i% {" w1 u, ~" ~7 E</head>( \' A0 U! A) g; G8 l% M- p
" Y; x$ ~/ R8 T" k3 m! j S
提示： 將下載的檔案放置於與網頁同一目錄下。 i4 ?( p5 z7 X' O* y, F
lamp 你是否想知道為什麼在 <script> 標籤中 沒有插入 type="text/javascript" ?+ A$ y1 y; W# g6 R/ g/ o
' s0 U3 d4 e, L v
在 HTML5 已經不需要該屬性。 JavaScript 在所有現代瀏覽器中是 HTML5 的預設腳本語言！
( K% S1 N4 k, M5 a9 F, x7 l
V( `7 M7 q8 W2 I& E" `; MjQuery Mobile 頁面1 X! u# h8 G6 U. n
開始學習 jQuery Mobile
( q: m5 J# }- h7 f* ?$ K# m) {實例
, m8 T+ Y6 A& {9 j) K6 w<body>; D0 O) d- P( J2 [
<div data-role="page">
, C9 I/ r* u7 |/ U0 P# P6 X i- B7 d6 F& K2 i: V% t" Y
<div data-role="header">
0 ?/ L+ d1 B H9 R' a <h1>歡迎來到我的主頁</h1>
+ R, D! f( j/ d0 J </div> w' D, O: ~9 l
7 m2 X" c! e2 K7 ~4 S
<div data-role="main" class="ui-content">5 h3 V" O; x s$ \$ P7 _6 z: O
<p>我現在是一個移動端開發者!!</p>
& f3 ^2 {: D' }- b </div>
6 d8 T' E" V2 v3 [; A* b- U/ e. `* r+ w, D" G& a
<div data-role="footer"> s1 L9 t1 ?/ J4 ], ^: [. X' m
<h1>底部文字</h1>3 T( X) @! _% G4 z
</div>2 j' X# |* x& q u
6 N2 S- Z% D6 o" z</div>, S: C. \4 q! c+ ~
</body>' V0 X7 T8 K# F# M
實例解析：
( I; S9 d* H3 ^! E9 L. u
* q- `1 g) }5 t. \ data-role="page" 是在瀏覽器中顯示的頁面。
8 k; R9 `1 A T6 e6 e) N! Z data-role="header" 是在頁面頂部建立的工具條 (通常用於標題或者搜尋按鈕)9 M+ K/ b7 |! l3 Y" ~& N0 N
data-role="main" 定義了頁面的內容，比如文字， 圖片，表單，按鈕等。
% L" c! l3 \& Y/ ?, L "ui-content" 類用於在頁面增加內邊距和外邊距。
: M2 E5 Q, Z; l4 m8 e1 z data-role="footer" 用於建立頁面底部工具條。
- Q9 A3 f9 R1 W" D 在這些容器中你可以增加任何 HTML 元素 - 段落, 圖片, 標題, 列表等。. S& d% ^% K4 I5 c) ?/ [% t/ ^
: D% W# b8 O" A7 R# k2 G5 J7 xlamp jQuery Mobile 依賴 HTML5 data-* 屬性來支援各種 UI 元素、過渡和頁面結構。不支援它們的瀏覽器將以靜默方式棄用它們。
- |7 w8 N5 p3 d! z; X6 e2 W( e2 W; M- V& c" V
在頁面中增加 jQuery Mobile; K. ^0 X2 K* M) d+ `2 }( Q a; M
* ~7 s9 K2 [) k" q1 j
使用 jQuery Mobile, 你可以再單個 HTML 檔案中建立多個不同的頁面。0 _% d* B* F- ^- a2 j4 c) u5 z
* ^( ^7 Q( Q- n- L& ?# e* C3 X你可以使用不同的href屬性來區分使用同一個唯一id的頁面：
/ f, {7 o* L9 J" F實例3 }; Q' W6 v2 V& v z6 c
<div data-role="page" id="pageone">
. {- P5 {1 I7 h6 R8 r9 y8 I <div data-role="main" class="ui-content">
( D" ~6 s! q( C7 ?7 Y5 c <a href="#pagetwo">跳轉到第二個頁面</a>" g" l. n3 a" }- n3 M; Z
</div> [7 [' _5 @5 q) d
</div>4 y# F: N0 L: f& q0 m" E
; d5 }% g- r' j3 d- R
<div data-role="page" id="pagetwo">, a- @4 [. E8 r" w
<div data-role="main" class="ui-content"># A0 g3 w/ n+ J' B: g( f
<a href="#pageone">跳轉到第一個頁面</a>
/ z8 q/ l% S& ?! N9 I | </div>3 Z" U' j& T$ {
</div>( f S7 Y; x4 G/ h& I" q! c
注意： 當web應用有大量的內容（文字，圖片，腳本等）將會嚴重影響加載時間。如果你不想使用內頁連結可以使用外部檔案：& y% o# o* ` t' Y& y" X3 ~
/ z7 A( ~- M3 J0 U4 z6 p/ h<a href="externalfile.html">訪問外部檔案</a>
4 b6 O2 S4 G R: A! C' Y# }
% y1 @# H% M r- c$ b頁面作為對話框使用9 j& i- U: n0 b
4 G% R# h; f7 e* O8 O( g
對話框是用於顯示頁面內容顯示或者表單內容的輸入。
( J: z* }/ s+ ~% V4 Y1 l
$ y" ~3 T; @( E在連結中增加data-rel="dialog"讓會員點閱連結時彈出對話框:% N6 X5 |! A' @1 m2 i4 g' P& F
實例
* n; c5 h) `" O; v: w5 O<div data-role="page" id="pageone">5 ]1 B7 x4 o6 F3 }% c; Z/ w
<div data-role="main" class="ui-content">
; d% p6 ~2 ~3 g6 c <a href="#pagetwo">跳轉到第二個頁面</a>& _8 e) |2 B+ @4 \
</div>2 @. A6 Q* F: v5 \4 I( i
</div>: O/ I" ^1 c% u7 t
" S" o5 \7 W% T9 Q) {<div data-role="page" data-dialog="true" id="pagetwo">% [- R: s3 s! n+ _, X5 u
<div data-role="main" class="ui-content">6 K7 t3 W7 f) N$ A4 K4 n) s# d
<a href="#pageone">跳轉到第一個頁面</a>
c9 E% a% P( O# }8 g1 @7 ^6 y </div>
9 `+ B/ Z, b: J9 E: y8 D# H</div> |
|
|Archiver|手機版|禁閉室|MyXNova (原 myxnova.com)
聲望
現金
存款
瀏覽推廣
註冊推廣
金幣
遊戲幣
鑽石
IP卡
狗仔卡
[資訊未更新]
發表於 2016-6-25 16:22:43
提升卡
置頂卡
沉默卡
喧囂卡
變色卡
千斤頂
顯身卡