等級：25 - 爐火純青 經驗值：0 / 246 魔法值：14759 / 14759 生命值：6%
升級
   100%
TA的每日心情 | 奮斗
昨天 00:44 |
|---|
簽到天數: 5883 天 [LV.Master]伴壇終老
|
馬上註冊，結交更多好友，享用更多功能，讓你輕鬆玩轉社群。
您需要 登入 才可以下載或檢視，沒有帳號？立即註冊
×
jQuery Mobile 是用於建立移動 Web 應用的前端開發框架。
$ X+ _: _; B2 l5 e v' `/ rjQuery Mobile 可以應用於智能手機與平板電腦。 . l2 l+ g# L6 o+ V' D9 X7 T
jQuery Mobile 使用 HTML5 & CSS3 最小的腳本來佈局網頁。1 z7 y$ v* I7 r5 q8 D" {
1 [1 E7 l; v! d3 c8 y什麼是 jQuery Mobile?
; ]' N1 r; M( R1 e7 a" g% e& j2 ?+ \4 m
jQuery Mobile 是針對觸屏智能手機與平板電腦的網頁開發框架。
+ w7 h5 o2 f4 Z* d- q
3 r$ _( f& w3 C# z/ jjQuery Mobile 工作與所有主流的智能手機和平板電腦上：
7 ]: R8 f& @* ~: m# R. o6 [4 Z$ `- p! _9 P- `1 b! k
jQuery Mobile 構建於 jQuery 以及 jQuery UI類庫之上，如果您瞭解 jQuery，您可以很容易的學習 jQuery Mobile。
+ I( v& S2 L5 k' h7 b+ q& j& cjQuery Mobile 使用了極少的 HTML5、CSS3、JavaScript 和 AJAX 腳本代碼來完成頁面的佈局渲染。2 x7 b9 h) s5 }1 d7 O* P, u
: M" j9 }+ y- V3 O/ I' o為什麼使用 jQuery Mobile?
4 Z2 c& C3 }7 G3 o9 X. `, J
4 \ D0 l0 o/ t8 _% r' a通過使用jQuery Mobile 可以 "寫更少的代碼，做更多的事情" : 它可以通過一個靈活及簡單的方式來佈局網頁，且兼容所有移動設備。% r: S/ ~( Q5 E* q* w) q0 `; G! D4 Z
lamp 不同設備使用了不同開發語言，jQuery Mobile可以很好的兼容不容的設備或操作系統：: l/ r: c8 I% f
a; [: P. S( f2 b$ _ Android 和 Blackberry（黑莓） 使用JAVA語言。5 E; M% E+ v* `8 v* l, S
iOS 使用 Objective C 語言3 [5 [2 ~4 y; ~5 I8 S; j/ q1 r- U
Windows Phone 使用 C# 和 .net, 等。) ?2 r y: ~0 J8 S; Z, p4 y
( s* X( Z' c' p
jQuery Mobile 解決了不同設備兼容的問題，因為它只使用HTML，CSS和 JavaScript，這是所有移動網絡瀏覽器的標準！
5 t- g1 P! }% S$ f1 W) M
/ _5 l3 O8 V @% P1 c0 z" H, F4 rjQuery Mobile 安裝: r* |2 ~8 M6 N' s; D5 i- y) Z; o
在你的網頁中增加 jQuery Mobile6 H! q3 a/ i, y& d8 v
, j6 c5 l( g9 H3 P8 @
你可以通過以下幾種方式將jQuery Mobile增加到你的網頁中：3 r" Y' w/ L* O2 e! Y0 F
6 x% I$ j4 S) e; }2 @
從 CDN 中加載 jQuery Mobile (推薦). W( c! ~7 @1 @0 c0 ?- P- u
從jQuerymobile.com 下載 jQuery Mobile庫5 D6 Y0 E0 u9 L3 k% g B
3 Z; Y5 p; h! @" l+ H
下載 jQuery Mobile& B/ r3 _/ f& i5 I2 u5 U# _
; ]; j) T0 w8 r- G4 j! U- `8 w) L如果你想將 jQuery Mobile 放於你的主機中,你可以從 jQuerymobile.com下載該檔案。
0 D" X2 @2 w, }3 g8 A. W2 l. h% ] S; E( N/ W8 b
<head>
* ^& t' ~( d" K+ o<meta name="viewport" content="width=device-width, initial-scale=1">
; E" a* n3 q0 ~5 P, \<link rel="stylesheet" href="jquery.mobile-1.4.5.css">* A: s: `# w! t
<script src="jquery.js"></script>- w0 o2 U. }6 t) }, i6 D
<script src="jquery.mobile-1.4.5.js"></script>
- I7 x W5 b/ N</head>
$ H5 B7 P& u4 u5 F3 k( C! |
+ o$ ?2 Q/ a3 a0 F提示： 將下載的檔案放置於與網頁同一目錄下。
6 B9 W+ D3 J$ r$ \lamp 你是否想知道為什麼在 <script> 標籤中 沒有插入 type="text/javascript" ?
2 R5 L, B! q# {- t' n& x9 r% {, m/ d1 ^9 g, x X
在 HTML5 已經不需要該屬性。 JavaScript 在所有現代瀏覽器中是 HTML5 的預設腳本語言！1 ?5 j* _ O5 O7 I* Q7 W* d
% R9 O; S3 J6 D3 l( j- QjQuery Mobile 頁面
% ]; u& ^1 Z, ] X. C# b開始學習 jQuery Mobile
: |( U% k% b2 g實例
1 {/ [& w6 Q& F$ |5 D+ y: N, c<body>; M0 d- k( K7 A& a: a' N
<div data-role="page">
$ z0 Q: {6 z' _' w) K+ l% v6 T( {/ ]; z) k& F& t
<div data-role="header">
9 x3 q* e7 ?- O; M <h1>歡迎來到我的主頁</h1>0 s1 g4 \! I3 N: ], V5 E) }
</div>" u. W/ B+ U& Q& Y
8 S; N4 }: `9 s/ e: L4 e <div data-role="main" class="ui-content">6 w9 V b; X& K9 y; N: c
<p>我現在是一個移動端開發者!!</p>
! O% `9 h' t( O4 U$ N. |: r$ J& V+ H </div>* d0 i3 Z( Q) u
, w% E$ h. K6 y- k' L% w! ^ <div data-role="footer">, c; Q6 ^1 S: E5 @0 Y; z* `$ @
<h1>底部文字</h1>
8 l0 Y& e5 M$ j1 j# y! w: v% J </div>
8 R4 u4 s+ l! f" e! t: y( |$ a! {+ I
</div>
4 c3 u; \; ]# T1 s/ J</body>
+ B8 D9 B0 I7 R3 ?實例解析：& X8 P7 h- Q; Z3 W7 ^1 t
& a' w3 Z+ ?4 ~8 v- | data-role="page" 是在瀏覽器中顯示的頁面。
: @! G2 |$ A. {" k7 D8 c data-role="header" 是在頁面頂部建立的工具條 (通常用於標題或者搜尋按鈕)
% r, p, w3 U4 Y" t5 B$ w data-role="main" 定義了頁面的內容，比如文字， 圖片，表單，按鈕等。
( `5 N0 ^8 q n4 i6 ?" ^ "ui-content" 類用於在頁面增加內邊距和外邊距。
, a) {4 d) @$ V( g2 d0 y data-role="footer" 用於建立頁面底部工具條。
# c; c F& t/ C9 ?( n+ d1 Q 在這些容器中你可以增加任何 HTML 元素 - 段落, 圖片, 標題, 列表等。
. H' z3 [$ K- l, Z5 W1 N6 v
% A3 i& l% `( L# s4 K! D* ]& u4 glamp jQuery Mobile 依賴 HTML5 data-* 屬性來支援各種 UI 元素、過渡和頁面結構。不支援它們的瀏覽器將以靜默方式棄用它們。
# F" J$ b$ u# n+ G+ U$ P6 Q, r1 }& p$ S7 P4 b0 r2 k/ d
在頁面中增加 jQuery Mobile
7 k: f. y' `- t
% Q+ o9 m: o) q+ Z8 b2 ]/ ]使用 jQuery Mobile, 你可以再單個 HTML 檔案中建立多個不同的頁面。
* k! M5 u1 F' w' T) y1 h8 y; o0 E" U) H8 [# L
你可以使用不同的href屬性來區分使用同一個唯一id的頁面：
: V: ?% ?4 X5 o實例! l/ g* G2 m9 A4 |
<div data-role="page" id="pageone">% `" R2 A! b/ m2 C
<div data-role="main" class="ui-content">' H4 v; ~2 k# D" D
<a href="#pagetwo">跳轉到第二個頁面</a>4 O( q% T! s0 G" m3 O0 |( Z3 @
</div>
" Z' r% i( _, }, e8 H) o; K</div>6 c N) K/ r. `, Z. N! s: t; `
* S* F2 W- q/ w3 x! [" f0 D
<div data-role="page" id="pagetwo">) Y3 X5 Z! Y% y/ D9 K$ l7 B
<div data-role="main" class="ui-content">! d Q# [7 g- V3 H3 ]* t# J" {
<a href="#pageone">跳轉到第一個頁面</a>4 x$ h' P$ ?& `5 G
</div>
7 a- N6 a6 Q0 p8 Y7 J</div>
/ X% `; v$ I* U8 @% u0 R0 ?注意： 當web應用有大量的內容（文字，圖片，腳本等）將會嚴重影響加載時間。如果你不想使用內頁連結可以使用外部檔案：2 d) v+ h* f; W: X b* P5 s
( D. Y+ `( }7 e0 \" A, m2 {9 |" S<a href="externalfile.html">訪問外部檔案</a>0 h; {7 w4 u% ^
, A4 k( Q" I8 S2 h1 I
頁面作為對話框使用; o% j, @9 F8 E7 b: T2 f" e# L. p( e
; i6 t) ^5 y! o6 s0 @對話框是用於顯示頁面內容顯示或者表單內容的輸入。* v, Q1 v$ U1 l$ U; o; i8 d
* {+ l. C. S7 }9 ]& c; {在連結中增加data-rel="dialog"讓會員點閱連結時彈出對話框:" w! C& D; g% K: X* ~5 p2 G6 t
實例; s( ?1 j* G, ^/ u
<div data-role="page" id="pageone">$ M# X4 n/ v$ L" l5 N
<div data-role="main" class="ui-content">
& v8 i; I# i: m <a href="#pagetwo">跳轉到第二個頁面</a>
7 H$ l- B) F: O5 \2 c9 @) @ </div>
6 y+ R6 @7 `4 S) _) \' a</div>6 r" a* m+ ^+ y7 y
3 J5 x5 P. B1 c3 m<div data-role="page" data-dialog="true" id="pagetwo">
1 n4 W% N4 g- f) T8 l <div data-role="main" class="ui-content">
7 X" d) C. I# E |+ O+ v <a href="#pageone">跳轉到第一個頁面</a>
$ X% u8 t. \; g: ]0 z </div>2 d* L+ W+ Z- W5 g
</div> |
|
|Archiver|手機版|禁閉室|MyXNova (原 myxnova.com)
聲望
現金
存款
瀏覽推廣
註冊推廣
金幣
遊戲幣
鑽石
IP卡
狗仔卡
[資訊未更新]
發表於 2016-6-25 16:22:43
提升卡
置頂卡
沉默卡
喧囂卡
變色卡
千斤頂
顯身卡