等級：25 - 爐火純青 經驗值：0 / 246 魔法值：14663 / 14663 生命值：6%
升級
   100%
TA的每日心情 | 擦汗
5 天前 |
|---|
簽到天數: 5854 天 [LV.Master]伴壇終老
|
馬上註冊，結交更多好友，享用更多功能，讓你輕鬆玩轉社群。
您需要 登入 才可以下載或檢視，沒有帳號？立即註冊
×
jQuery Mobile 是用於建立移動 Web 應用的前端開發框架。 5 ~ w7 G+ H7 p3 Z1 w x
jQuery Mobile 可以應用於智能手機與平板電腦。 1 f' f" n z& x2 s( r, a
jQuery Mobile 使用 HTML5 & CSS3 最小的腳本來佈局網頁。
1 H# T, ?, N$ V4 ~6 G W0 H* r& K$ h% w+ r8 ~2 a
什麼是 jQuery Mobile?
0 i# o) s4 X V0 b1 T* ?" g- ?8 a4 E( s& k! g/ d
jQuery Mobile 是針對觸屏智能手機與平板電腦的網頁開發框架。
9 m! G" \2 k, P) K5 I( p
! m, c: J, @9 d0 x3 z$ f! I9 WjQuery Mobile 工作與所有主流的智能手機和平板電腦上： ; ?4 [) m+ d; @+ B) c4 w) M
; {" G) c1 S L4 K7 t5 Y
jQuery Mobile 構建於 jQuery 以及 jQuery UI類庫之上，如果您瞭解 jQuery，您可以很容易的學習 jQuery Mobile。 ; J6 s& G$ K- z. o& B, ^$ ?0 b
jQuery Mobile 使用了極少的 HTML5、CSS3、JavaScript 和 AJAX 腳本代碼來完成頁面的佈局渲染。7 E' @& P) K: p* r5 j% P4 h
1 V, Z( `# K7 [: n為什麼使用 jQuery Mobile?
8 ?: | d i I( W( a% m* N' F9 T
' g! w; f8 S! H9 @; E: k8 C2 X通過使用jQuery Mobile 可以 "寫更少的代碼，做更多的事情" : 它可以通過一個靈活及簡單的方式來佈局網頁，且兼容所有移動設備。& A$ t+ O- D! ?0 o ^% o
lamp 不同設備使用了不同開發語言，jQuery Mobile可以很好的兼容不容的設備或操作系統：& B; }6 F9 ^) \9 Y
8 J. f( B6 }+ U: E3 Y0 t: S+ t' k Android 和 Blackberry（黑莓） 使用JAVA語言。3 }6 r& G. T h! c# x! p
iOS 使用 Objective C 語言9 Q& `& X! z# c& C: L+ U/ l
Windows Phone 使用 C# 和 .net, 等。5 Z, J4 {: y# G+ a3 b4 `# S
. ~% i* {% X$ VjQuery Mobile 解決了不同設備兼容的問題，因為它只使用HTML，CSS和 JavaScript，這是所有移動網絡瀏覽器的標準！' @+ C! F \( z) w" F
$ c) z- ^5 s) ~
jQuery Mobile 安裝
, F" T2 _0 j) C6 f/ h/ m2 b+ u5 R; B在你的網頁中增加 jQuery Mobile$ @2 w: j" S4 i
! A- `5 x- p) e. ]
你可以通過以下幾種方式將jQuery Mobile增加到你的網頁中：' {; y4 Z9 R H6 `9 T
$ q2 @! j% ^7 s" B, V 從 CDN 中加載 jQuery Mobile (推薦)
- T! \6 Q; j: |2 I7 n2 X: F 從jQuerymobile.com 下載 jQuery Mobile庫2 p1 A2 M' P, L; |" T& |4 D) x- l& i( a
$ o" s7 S8 O0 A
下載 jQuery Mobile- n; R3 i/ d* j% d0 e, b# e
5 y8 v; Q. S2 ]5 V a5 y6 J
如果你想將 jQuery Mobile 放於你的主機中,你可以從 jQuerymobile.com下載該檔案。 E2 s0 ]3 A0 M- W! ^0 r) D# l
0 s; }/ F" S+ e" P- T* R |<head>
/ w0 p. c6 R" B<meta name="viewport" content="width=device-width, initial-scale=1">4 M- z7 l6 R) D
<link rel="stylesheet" href="jquery.mobile-1.4.5.css">0 q _; H# {( [
<script src="jquery.js"></script>
( ?% R7 ]4 W. z0 @' q<script src="jquery.mobile-1.4.5.js"></script>' `/ ]% I9 h/ j( G- R
</head>
F* V' {# s+ w
$ S) P* H. }. `1 A5 w提示： 將下載的檔案放置於與網頁同一目錄下。
. _* C% \* p5 t1 @1 I& L8 ^lamp 你是否想知道為什麼在 <script> 標籤中 沒有插入 type="text/javascript" ?0 g' {1 K+ y z3 ~! y1 X c
0 b$ F& n2 d) b: C- ~2 m在 HTML5 已經不需要該屬性。 JavaScript 在所有現代瀏覽器中是 HTML5 的預設腳本語言！
+ N% U) k' P! M7 ~
( h: Z/ ] E4 o" L: W3 @" d( }jQuery Mobile 頁面8 z, G# f. i" k! F' A9 U/ I
開始學習 jQuery Mobile( k, E% w! H" z
實例8 N; v \, O9 C
<body>' [# i) _; g k% a' M- K
<div data-role="page">
* T% i/ I. n$ w; r1 E7 I$ a' s' B4 ]& v9 b* q
<div data-role="header">
2 T9 B7 R6 b- q' r% ^ <h1>歡迎來到我的主頁</h1>
) y" V% U7 A* o" S </div>- V- J. k; \8 @ B5 ?2 m1 W
1 z' @: @4 s: `; @. o <div data-role="main" class="ui-content">* d# }9 w) H3 Q, E: V
<p>我現在是一個移動端開發者!!</p>
( E( t0 o9 i6 ` </div>
9 j' Y; ^! n5 f# I; S' k/ [" a9 x6 y
% V, ]" e5 h, s$ z: d1 J/ I; \ <div data-role="footer">
; ] x% W! X. K9 s8 J$ \4 y <h1>底部文字</h1>
" R( J/ @1 m, G$ S6 N </div>
( ]; f* I& w# F2 M
8 L+ [3 p9 O& a</div>
9 W3 w: G2 r9 v' @% m</body>
) y0 ]4 T1 ^$ o% {# C實例解析：! _% ]4 R9 K2 y2 j
" @0 k; G0 A1 t3 N* Z: P
data-role="page" 是在瀏覽器中顯示的頁面。" p! O6 W+ F }4 ^* G0 S$ ~$ T3 c, s
data-role="header" 是在頁面頂部建立的工具條 (通常用於標題或者搜尋按鈕): ~# Z6 l- ?; U. z
data-role="main" 定義了頁面的內容，比如文字， 圖片，表單，按鈕等。1 z: W4 h1 n4 R" v8 G
"ui-content" 類用於在頁面增加內邊距和外邊距。/ y) ?( s" i4 v' ]8 D. O2 R4 M/ T
data-role="footer" 用於建立頁面底部工具條。) u% X7 a* f: X
在這些容器中你可以增加任何 HTML 元素 - 段落, 圖片, 標題, 列表等。* U! {! k4 ?0 q+ U+ u4 x1 s
. g# p, d6 m% \& d8 elamp jQuery Mobile 依賴 HTML5 data-* 屬性來支援各種 UI 元素、過渡和頁面結構。不支援它們的瀏覽器將以靜默方式棄用它們。
, I @4 m2 ], x( q [* @( S/ M: ^" Q
6 I) ]* ?" S3 Z! t! P在頁面中增加 jQuery Mobile" O+ N& ^* S* m( d8 N! ?
5 u4 C% |5 i7 @2 X2 I
使用 jQuery Mobile, 你可以再單個 HTML 檔案中建立多個不同的頁面。) z% G( F' X! o+ b! j% m4 ]3 A+ S
' l e8 x8 I- t8 r% ?- ]
你可以使用不同的href屬性來區分使用同一個唯一id的頁面：8 ~: n% Y. [6 a; k, o' S( [
實例. m3 I& b; ^5 y2 T( b1 J
<div data-role="page" id="pageone">
1 S% l6 s% Q) y6 _. U! h <div data-role="main" class="ui-content">& p7 B! l- O) B6 \' t4 K& T
<a href="#pagetwo">跳轉到第二個頁面</a>
# `; Y* ?0 K6 B# g% W) f$ _7 a </div>
; Z. Z3 O3 Y+ [. c</div>
8 F i, s% [- ^) [" b, m2 S7 a+ ?. x: c& f1 l$ o9 R
<div data-role="page" id="pagetwo">) R0 G+ y8 c, x8 h) P
<div data-role="main" class="ui-content">& @. K+ m- F0 A4 u0 R5 }; U
<a href="#pageone">跳轉到第一個頁面</a>
$ n) p; O- L, X9 W+ v </div>
! t& h. a6 ]5 h& a- N1 R, }; e6 h( F% J</div>
5 w. L, @4 f: q) u- o! f2 C注意： 當web應用有大量的內容（文字，圖片，腳本等）將會嚴重影響加載時間。如果你不想使用內頁連結可以使用外部檔案：
( y# @( }# P5 G( ]: i' f2 c- \; u1 V% H) C: L
<a href="externalfile.html">訪問外部檔案</a>7 N2 x5 b/ k- M
+ k$ E) Q7 y( H' [$ F頁面作為對話框使用- M! n- e5 Z7 n5 N. |: }9 O5 p
7 |$ a5 J# |/ p: u
對話框是用於顯示頁面內容顯示或者表單內容的輸入。
5 {* [# T+ h: a1 o' I/ T2 @- _. @: [ d: p
在連結中增加data-rel="dialog"讓會員點閱連結時彈出對話框:5 b F! d; M5 n" L0 C1 \8 S) e! a: T
實例" }% Z5 R8 ], X2 J, b# V% u
<div data-role="page" id="pageone">
( K1 U- ]+ c( P4 r <div data-role="main" class="ui-content">
. X, t9 J: H. V- [ <a href="#pagetwo">跳轉到第二個頁面</a>
& b E T4 P8 l6 x$ l3 G( U </div>% l: C2 I8 N% {0 R* r( p7 h+ T
</div>3 ~% V, T& f7 M8 D$ [& E
& Q; p$ @9 ?5 }+ r! C4 o<div data-role="page" data-dialog="true" id="pagetwo">
4 ^ n8 z( ]9 A* b/ K <div data-role="main" class="ui-content">
# c9 k6 S* _) s( ~# w c; y; R+ A <a href="#pageone">跳轉到第一個頁面</a>/ g4 ^9 T' f. j8 ^! Y
</div>
. H( f/ X. p8 X4 n7 e</div> |
|
|Archiver|手機版|禁閉室|MyXNova (原 myxnova.com)
聲望
現金
存款
瀏覽推廣
註冊推廣
金幣
遊戲幣
鑽石
IP卡
狗仔卡
[資訊未更新]
發表於 2016-6-25 16:22:43
提升卡
置頂卡
沉默卡
喧囂卡
變色卡
千斤頂
顯身卡