等級：25 - 爐火純青 經驗值：0 / 246 魔法值：14889 / 14889 生命值：6%
升級
   100%
TA的每日心情 | 奮斗
5 小時前 |
|---|
簽到天數: 5927 天 [LV.Master]伴壇終老
|
馬上註冊，結交更多好友，享用更多功能，讓你輕鬆玩轉社群。
您需要 登入 才可以下載或檢視，沒有帳號？立即註冊
×
jQuery Mobile 是用於建立移動 Web 應用的前端開發框架。 ! {. Z9 ~7 N" t1 Q5 o/ P. @ |6 C1 z" Q1 Y
jQuery Mobile 可以應用於智能手機與平板電腦。
+ V) Y6 ?, g: ~9 W2 W# JjQuery Mobile 使用 HTML5 & CSS3 最小的腳本來佈局網頁。
1 A$ T; l5 Y* E6 H- ? F) F- e; s
) B9 ?# ?* c8 J' f, ~# V, Y- C- h什麼是 jQuery Mobile? $ A; t G% G6 l# `* a7 X* G4 c
# ?7 C9 f0 v8 ?: j! v% k# V
jQuery Mobile 是針對觸屏智能手機與平板電腦的網頁開發框架。
6 B$ ?7 V( a8 Y! w- k5 B" G) P3 f3 s5 p0 e- ]% e. e- [# `- y
jQuery Mobile 工作與所有主流的智能手機和平板電腦上： , A# J1 h. B, m4 C' O
, N; j- ]6 }+ X" B' @jQuery Mobile 構建於 jQuery 以及 jQuery UI類庫之上，如果您瞭解 jQuery，您可以很容易的學習 jQuery Mobile。
$ A1 v( Y$ D8 e3 P) U- CjQuery Mobile 使用了極少的 HTML5、CSS3、JavaScript 和 AJAX 腳本代碼來完成頁面的佈局渲染。8 V# m+ L' Y* j* M6 Q5 @6 z
+ k: y- t7 ]' o+ S Y! R為什麼使用 jQuery Mobile?
1 A! L# r- K o1 V% q; t. \
. X" z4 N! g( x1 k3 n1 b通過使用jQuery Mobile 可以 "寫更少的代碼，做更多的事情" : 它可以通過一個靈活及簡單的方式來佈局網頁，且兼容所有移動設備。5 P- |1 f( ~9 L6 H: X$ A. ^
lamp 不同設備使用了不同開發語言，jQuery Mobile可以很好的兼容不容的設備或操作系統： M: G; r6 B; h3 r# W& A/ v
- H% X3 Z% ?2 A& C9 B* M
Android 和 Blackberry（黑莓） 使用JAVA語言。7 V2 ?$ |3 f: {1 O. M. K
iOS 使用 Objective C 語言
; M/ Z; g+ j8 M+ _ Windows Phone 使用 C# 和 .net, 等。
) {6 |, F0 d# `% M. K: i Y' j( }/ {* u0 f5 {/ l4 l& J
jQuery Mobile 解決了不同設備兼容的問題，因為它只使用HTML，CSS和 JavaScript，這是所有移動網絡瀏覽器的標準！
" Y5 W! I% r4 P+ R8 r2 [6 n2 A& W7 q- h& @
jQuery Mobile 安裝! y* G0 {' g, }/ B! K6 E
在你的網頁中增加 jQuery Mobile
1 U% t% h- F6 L# `) U7 t; G G4 c# c( b, H$ a3 I
你可以通過以下幾種方式將jQuery Mobile增加到你的網頁中：' ]4 |: h- G/ T2 V1 q/ Z
/ k# P9 Q9 `. P, y
從 CDN 中加載 jQuery Mobile (推薦); p* p- b' s- p# M2 R) t/ ]0 _; w
從jQuerymobile.com 下載 jQuery Mobile庫 V; D$ ~6 U1 z! l
$ S/ c. K. w! y9 O! |. W下載 jQuery Mobile
) Q; @- @: s! g7 W, g
9 ^% S% X( C7 L5 s" _如果你想將 jQuery Mobile 放於你的主機中,你可以從 jQuerymobile.com下載該檔案。- | ]- w( y0 B* p+ X* R: ]- J5 A$ u
$ T) ]1 H3 l p# l5 P9 I7 u/ S+ A<head>
; d+ [1 h4 b' t- [<meta name="viewport" content="width=device-width, initial-scale=1">! y* g+ A$ H2 h( ?9 i& G/ H X
<link rel="stylesheet" href="jquery.mobile-1.4.5.css">; \+ P/ r6 p5 O" R, [1 {
<script src="jquery.js"></script>
) e6 ~; q; T4 m1 i' @<script src="jquery.mobile-1.4.5.js"></script>$ j6 L( D" C+ S2 m: E$ Y
</head>+ s2 n U" X1 C2 b' F' t
; F. ^5 B4 s. a提示： 將下載的檔案放置於與網頁同一目錄下。
" ^' R7 @' F! w* X8 r, ?& klamp 你是否想知道為什麼在 <script> 標籤中 沒有插入 type="text/javascript" ?) [! F3 r" {# @1 u0 Y/ F0 B
+ s) d! B8 F _( g( a
在 HTML5 已經不需要該屬性。 JavaScript 在所有現代瀏覽器中是 HTML5 的預設腳本語言！
* z7 |: [2 B7 m6 A
5 p+ e, P! I9 U) ?7 TjQuery Mobile 頁面
- o; T6 M" T% U) | e5 c) N- l開始學習 jQuery Mobile
, w" B' ~% _, e7 Y實例# B/ E2 f& Z" U
<body>9 N( q2 w2 f% `7 n7 Z
<div data-role="page">1 M, V, S8 B, A' ~
8 M7 r e/ h* a; d
<div data-role="header">
( q' e9 u/ ], [5 e. r0 n* U <h1>歡迎來到我的主頁</h1>
! |+ d2 D) n V) {2 v+ O3 E </div>
8 f& M6 b5 m- ~" l6 v6 w7 z3 p; X$ t# \- f5 ~% v+ J
<div data-role="main" class="ui-content">
! u7 r9 _! ^# q, N: W# p8 i <p>我現在是一個移動端開發者!!</p>
% \% [) Y' b; N3 _/ r" @5 Q </div>
0 {! A' M% B* \" K7 I6 {! s- p7 k" L
<div data-role="footer">
# n6 k* Q5 N/ M <h1>底部文字</h1>7 |1 W- P2 A0 T
</div># G1 T. L7 t. V) g
6 B8 H9 Y5 z2 W6 x
</div>
5 u G! f" b1 ?1 p1 p</body>
" R- B5 i9 } d5 F1 R實例解析：7 {0 M0 I8 L2 I E3 D5 s( Y) {
* k+ A+ Q5 ^9 Z# A" q, E0 y# g data-role="page" 是在瀏覽器中顯示的頁面。" i- [( d. x# y& h" c; A: L
data-role="header" 是在頁面頂部建立的工具條 (通常用於標題或者搜尋按鈕)
: M* K( K _# R- ?/ a) @# `9 M z; { data-role="main" 定義了頁面的內容，比如文字， 圖片，表單，按鈕等。
' D0 E' q) I' b" Z5 ~1 J. C8 |6 K3 c "ui-content" 類用於在頁面增加內邊距和外邊距。
1 X. _9 B% w' A" @( n) s& e8 U data-role="footer" 用於建立頁面底部工具條。
j7 y7 C# U3 y/ L# Y, j 在這些容器中你可以增加任何 HTML 元素 - 段落, 圖片, 標題, 列表等。
, S$ c5 f0 e- l$ v5 |- F) _/ o: a+ K2 D( K" C; r& r
lamp jQuery Mobile 依賴 HTML5 data-* 屬性來支援各種 UI 元素、過渡和頁面結構。不支援它們的瀏覽器將以靜默方式棄用它們。& _+ s, V' V7 K2 G9 Z
1 H9 E0 [. O' f$ T在頁面中增加 jQuery Mobile
( k# U9 {8 c S( O! ^ \: v9 r; w5 m
使用 jQuery Mobile, 你可以再單個 HTML 檔案中建立多個不同的頁面。
5 b6 d8 {3 B8 z! E
- M/ o' g: S1 b. e9 c9 f/ V你可以使用不同的href屬性來區分使用同一個唯一id的頁面：/ N* P, \4 s/ c+ r
實例- a) j4 j5 f }( _4 a6 o
<div data-role="page" id="pageone">
0 u( Q9 v# [+ ? <div data-role="main" class="ui-content">
1 q; v3 @) [9 Y/ H! ]0 G <a href="#pagetwo">跳轉到第二個頁面</a>! R0 ?5 }* x F9 d9 I
</div>
8 Y' ]# H! O6 l3 P1 }* x- P7 c4 z7 v3 C</div>2 f$ F |7 Q# z$ o4 Y4 p
. C0 B5 q$ L2 G<div data-role="page" id="pagetwo">/ O( f, D- z1 W5 p
<div data-role="main" class="ui-content">
! `+ c5 ~% X0 \- K! X& e <a href="#pageone">跳轉到第一個頁面</a>
Q U, m) I/ b </div>: r8 | }' j9 ?" Z: q
</div>
8 r; z' v0 B& z C注意： 當web應用有大量的內容（文字，圖片，腳本等）將會嚴重影響加載時間。如果你不想使用內頁連結可以使用外部檔案：. \/ x3 r, a/ d. U* j0 B3 J
9 m* X* w. i5 B9 m8 y
<a href="externalfile.html">訪問外部檔案</a>' M1 `2 ~( E# T: [$ H1 ]: I; \
6 j# [! V0 ~: A6 ?: Y S. Q, P
頁面作為對話框使用$ n# A6 ~; o* y/ A
1 X# b% G" O2 e6 g
對話框是用於顯示頁面內容顯示或者表單內容的輸入。
! a% z; P$ Z' N1 x/ T2 n' h+ R' p* L; A, ?
在連結中增加data-rel="dialog"讓會員點閱連結時彈出對話框:$ ~5 ?( Y% g% W# P5 K/ i
實例
4 T6 [! S8 j0 @, y& P<div data-role="page" id="pageone">
) |! z/ `, _/ Z: \. o8 K) r <div data-role="main" class="ui-content">$ l8 r' U+ a4 T! v
<a href="#pagetwo">跳轉到第二個頁面</a>9 U6 P0 l$ r) M7 r
</div>
! @9 w6 V1 T& w Q% d; p3 k</div>
4 H7 Q3 G- ~ l7 L$ f: N2 r6 J- K: ~7 z1 D* G
<div data-role="page" data-dialog="true" id="pagetwo">5 z% r1 K+ X# `; U3 f* L4 G
<div data-role="main" class="ui-content">0 U. O, q' K5 g4 }# E1 C
<a href="#pageone">跳轉到第一個頁面</a> s+ P/ W$ m5 E( ~5 \# ?
</div>3 S' n) d& Q# n& V
</div> |
|
|Archiver|手機版|禁閉室|MyXNova (原 myxnova.com)
聲望
現金
存款
瀏覽推廣
註冊推廣
金幣
遊戲幣
鑽石
IP卡
狗仔卡
[資訊未更新]
發表於 2016-6-25 16:22:43
提升卡
置頂卡
沉默卡
喧囂卡
變色卡
千斤頂
顯身卡