等級：25 - 爐火純青 經驗值：0 / 245 魔法值：13645 / 13645 生命值：5%
升級
   100%
TA的每日心情 | 開心
13 小時前 |
|---|
簽到天數: 5520 天 [LV.Master]伴壇終老
|
馬上註冊，結交更多好友，享用更多功能，讓你輕鬆玩轉社群。
您需要 登入 才可以下載或檢視，沒有帳號？立即註冊
×
jQuery Mobile 是用於建立移動 Web 應用的前端開發框架。 ( e- _7 V3 C% u4 o) k( b2 l6 ~+ H
jQuery Mobile 可以應用於智能手機與平板電腦。 0 \7 j4 K& A5 I" K
jQuery Mobile 使用 HTML5 & CSS3 最小的腳本來佈局網頁。
* q1 ?" c9 o: O3 I# a
, a! e5 m5 R3 Q8 r什麼是 jQuery Mobile?
; v1 K) x8 A8 e
3 H0 R! I f0 F. P% vjQuery Mobile 是針對觸屏智能手機與平板電腦的網頁開發框架。
+ Y4 p H7 I( H, `% |) l+ S1 {, l! O& p! d* k
jQuery Mobile 工作與所有主流的智能手機和平板電腦上： 5 N6 J8 D5 a3 _3 n* @
6 @& J3 {, h2 ]! ?
jQuery Mobile 構建於 jQuery 以及 jQuery UI類庫之上，如果您瞭解 jQuery，您可以很容易的學習 jQuery Mobile。
3 c K v8 M0 x) \& {1 d. X; gjQuery Mobile 使用了極少的 HTML5、CSS3、JavaScript 和 AJAX 腳本代碼來完成頁面的佈局渲染。6 A; V# ^& n8 F8 Z3 \! ^
1 M) f9 X" i- w! G% |8 X2 B
為什麼使用 jQuery Mobile?
* k- f- s6 R; q- p$ S0 X7 z! Y5 X4 @; k
通過使用jQuery Mobile 可以 "寫更少的代碼，做更多的事情" : 它可以通過一個靈活及簡單的方式來佈局網頁，且兼容所有移動設備。* p- U w) L/ j d# M
lamp 不同設備使用了不同開發語言，jQuery Mobile可以很好的兼容不容的設備或操作系統：
) `& ^) T- w; H: L, U6 D2 K' [& y% [& _0 s
Android 和 Blackberry（黑莓） 使用JAVA語言。, o/ W' A3 \2 k
iOS 使用 Objective C 語言1 v+ {3 z# z0 X$ v5 U3 O
Windows Phone 使用 C# 和 .net, 等。' d) K! B v Z% q4 X
# d: A- S: e0 w3 }% W" C" gjQuery Mobile 解決了不同設備兼容的問題，因為它只使用HTML，CSS和 JavaScript，這是所有移動網絡瀏覽器的標準！
5 ~% a0 s/ s5 y9 Y( p/ `9 r. d. Z# g4 o
jQuery Mobile 安裝
1 i, I2 C' I) }4 U- u在你的網頁中增加 jQuery Mobile! L! c/ L7 |4 u! D% H# j) p" z9 \
6 m6 G! u3 \4 f+ ]4 i# j
你可以通過以下幾種方式將jQuery Mobile增加到你的網頁中：! |6 g$ f! P. W, o; P
# x/ R, U3 [, `0 y7 ]$ b
從 CDN 中加載 jQuery Mobile (推薦), t" w" s$ w& s* T) L1 }
從jQuerymobile.com 下載 jQuery Mobile庫# h& r( B$ G6 r& @: m5 r# r. L
8 i1 o( |: X0 C2 D: R( G, I下載 jQuery Mobile. {0 K/ z0 B& l- O! Y) V* w0 U
/ ]0 x q) Z/ A4 B! H如果你想將 jQuery Mobile 放於你的主機中,你可以從 jQuerymobile.com下載該檔案。) ~6 p7 P, b( f6 A
4 s% H* Q3 H) R( s
<head>+ N/ ^9 q6 \+ m
<meta name="viewport" content="width=device-width, initial-scale=1">
1 w3 c$ z7 F8 \. @9 h+ y* S9 q<link rel="stylesheet" href="jquery.mobile-1.4.5.css">
. U; G$ n4 u ]/ r* O7 |( h' }8 C+ J<script src="jquery.js"></script>8 H' C$ X; L8 I; Y4 w+ `- W
<script src="jquery.mobile-1.4.5.js"></script>0 X. e* K, Z1 s1 f& b0 b9 E: e C
</head>( a1 ]9 P/ X9 n7 ]$ ` P
( _& f; c8 ^# ?/ C6 k
提示： 將下載的檔案放置於與網頁同一目錄下。2 H$ r3 q& ^3 e! C: y, L
lamp 你是否想知道為什麼在 <script> 標籤中 沒有插入 type="text/javascript" ?6 h- g$ m( p; U( v3 Z% b
8 E0 l T) {, f: e }6 m
在 HTML5 已經不需要該屬性。 JavaScript 在所有現代瀏覽器中是 HTML5 的預設腳本語言！
( {9 V( t9 B7 Y
4 o/ r+ l" H7 Q+ n' ijQuery Mobile 頁面
' Z# E* X+ W- R- j2 y. i$ }開始學習 jQuery Mobile
: Z! Q- {! b( s1 ~7 g3 i實例6 O8 r' k* f" \ X2 G
<body>% i+ V8 g8 Y0 X
<div data-role="page">/ {! i0 f9 k& t/ p
! K* K$ ^) G- \# d$ {2 m& i4 r' j" G <div data-role="header">
% x( X: ]: U9 F: n& Y( B <h1>歡迎來到我的主頁</h1>" y3 I" ~ V; Y4 e" r$ w4 C
</div>
2 O2 b& d3 A( h, c- v# i0 j2 h& R
<div data-role="main" class="ui-content">
" q; O! F3 q7 y+ m0 @7 t+ G <p>我現在是一個移動端開發者!!</p>. ]6 b9 g2 P' \8 a
</div>
% @1 T* ^2 L" A {) t& y2 D* g# x- i
) X- W! f. C L; \1 v6 [ <div data-role="footer">
% ^! Z2 o& w9 U, _ <h1>底部文字</h1>
. ~2 I* F# y* \$ b$ G- O </div>! J# J: ]$ @( k& l1 C
" h1 i3 o/ q, d5 k
</div>! {6 m4 k3 w* T. o: a
</body>$ ]/ K4 \. W) Y( s, \# v
實例解析：/ K9 E% T3 y" H# W( o, ]
9 v# ?. T1 ~! ^
data-role="page" 是在瀏覽器中顯示的頁面。7 c! w" f: {4 y! I
data-role="header" 是在頁面頂部建立的工具條 (通常用於標題或者搜尋按鈕)
* r! q, z. I: d% m% F) E data-role="main" 定義了頁面的內容，比如文字， 圖片，表單，按鈕等。1 R2 Y5 y& V/ ~4 E9 H: Z
"ui-content" 類用於在頁面增加內邊距和外邊距。* q. i% @8 M0 `% J6 j/ k# o+ g0 N
data-role="footer" 用於建立頁面底部工具條。% e- { N, w) z
在這些容器中你可以增加任何 HTML 元素 - 段落, 圖片, 標題, 列表等。8 o! E' B+ W& A |/ i
6 ^5 K1 o% i6 e2 \, B
lamp jQuery Mobile 依賴 HTML5 data-* 屬性來支援各種 UI 元素、過渡和頁面結構。不支援它們的瀏覽器將以靜默方式棄用它們。
j m: W' |( s% F+ M) D9 M' F( x- Z
在頁面中增加 jQuery Mobile1 _6 x( a- j1 w% Q$ v
3 N) c: G1 \# r- [使用 jQuery Mobile, 你可以再單個 HTML 檔案中建立多個不同的頁面。
+ L/ {, O, M: z* i( {1 T I4 \" J, m" _6 [) u
你可以使用不同的href屬性來區分使用同一個唯一id的頁面：
: v. B0 N3 P$ v" X& W實例# X3 j) t" K0 H$ q6 t" w2 n
<div data-role="page" id="pageone">' S8 s2 s" C1 O( a1 `* U
<div data-role="main" class="ui-content">
: ^/ g B# c& N' p `: q <a href="#pagetwo">跳轉到第二個頁面</a>% ~# ?2 Q- V& L5 w. U2 S6 d
</div>
' o L W) D8 ^% f</div>' Y6 ~+ l8 \( m" _. u- ~- C
" R+ s" N; \9 j7 ^4 ]: |<div data-role="page" id="pagetwo">
' G, k6 [0 _( R <div data-role="main" class="ui-content">' N* Y* z- F% i& k: {) g
<a href="#pageone">跳轉到第一個頁面</a>
& f0 ]' D/ P) J6 _& }, f& c+ E </div>
% _7 `; h+ {$ N; R x2 x- w</div>2 B' Q( X1 C3 F# u$ f
注意： 當web應用有大量的內容（文字，圖片，腳本等）將會嚴重影響加載時間。如果你不想使用內頁連結可以使用外部檔案：* }# A0 M: C! q8 a6 Z+ z
; S; w) H: c, p3 c<a href="externalfile.html">訪問外部檔案</a>
: ?7 S0 g7 l6 O3 A* S; b; \! E1 D: o5 @) F" Z4 C5 I: r+ s2 Y h
頁面作為對話框使用' J: a' a: m y- E
' r% v5 [: M! g. i: o
對話框是用於顯示頁面內容顯示或者表單內容的輸入。; Y7 A% h4 _0 f4 B+ J4 [
$ ]+ l% `/ E) q; ?
在連結中增加data-rel="dialog"讓會員點閱連結時彈出對話框:. \( m: ^& J. B. ~! c$ ^
實例
G" @9 _' {" }3 R' j1 p<div data-role="page" id="pageone">
_! y' Z$ n/ o& u- {4 @ <div data-role="main" class="ui-content">3 y! p g8 l/ V# m J! v
<a href="#pagetwo">跳轉到第二個頁面</a>. r. M+ X5 R5 @: h
</div>/ Z8 @& q' Y: E9 n
</div>
Q8 a! R' l8 z
3 r" K- W7 P E2 k<div data-role="page" data-dialog="true" id="pagetwo">& v$ }* i/ k" E' G( }8 F m
<div data-role="main" class="ui-content">
7 z7 R) D2 y& m; b <a href="#pageone">跳轉到第一個頁面</a>
& @- u( ~/ Z' {$ S* J+ ^/ @ </div>
* B5 F/ k1 F' v- t' C</div> |
|
|Archiver|手機版|禁閉室|MyXNova (原 myxnova.com)
聲望
現金
存款
瀏覽推廣
註冊推廣
金幣
遊戲幣
鑽石
IP卡
狗仔卡
[資訊未更新]
發表於 2016-6-25 16:22:43
提升卡
置頂卡
沉默卡
喧囂卡
變色卡
千斤頂
顯身卡