SCMLife.com

 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,访问微社区

查看: 5450|回复: 3

[推荐] jQuery Mobile 入门简介

[复制链接]
发表于 2013-2-17 20:03:28 | 显示全部楼层 |阅读模式
本帖最后由 技术狂人 于 2013-2-17 20:19 编辑 $ D+ o7 E" ?' K

# Y- p8 v& `' P: J7 y5 \- `  U" B简介$ X7 {2 \7 h# y4 n  T* J# Y
jQuery Mobile 是一个极好的框架,用于编写移动 Web 应用程序。jQuery Mobile 构建于流行的 jQuery 和用户界面 (UI) 之上,是一个有效的统一框架,可为您编写移动 Web 应用程序。有了 jQuery Mobile,就可以确保外观、感觉和行为在不同移动平台上的一致性。jQuery Mobile 基本特性包括:
& @1 }8 x$ k3 j  t
  • 一般简单性和灵活性
    1 f3 U- w8 @. ]/ Z9 _, Z- \1 T该框架易于使用。您可以:
    0 r( W: \4 n2 g6 ^) [
    • 主要使用标记驱开发动页面,无需或仅需很少 JavaScript。
    • 使用高级 JavaScript 和事件。
    • 使用一个 HTML 文件和多个嵌入页面。
    • 将应用程序分解成多个页面。5 d& x& t& U- c" |
  • 逐步强化和全面兼容
    3 L- Y5 ?5 _) y% ?1 m尽管 jQuery Mobile 利用最新的 HTML5、CSS3 和 JavaScript,但并非所有移动设备都提供这样的支持。jQuery Mobile 的理念是同时支持高端和低端设备,比如那些不支持 JavaScript 的设备,尽量提供最好的体验。
  • 支持触摸屏输入和其他输入方法。
    : I) [1 N$ \9 F: j6 `! F: ]$ X* G1 RjQuery Mobile 为不同输入方法和事件提供支持:触摸屏、鼠标和基于光标焦点的用户输入。
  • 可访问性
    3 r0 J/ F. K- b% m6 b$ Y& Q; }jQuery Mobile 在设计时考虑了访问能力,它支持 Accessible Rich Internet Applications (WAI-ARIA),以帮助使用辅助技术的残障人士访问 Web 页面。
  • 轻量级和模块化
    / u7 y% \2 @( d' h6 n0 }+ Z该框架属于轻量级,拥有一个大小(版本 1.0.1 进行了缩小和压缩)为 24KB 的 JavaScript 库,7KB 的 CSS 以及一些图标。
  • 主题
    8 V+ K9 e/ P/ y' a& W, Z该框架还提供一个主题系统,允许您定义自己的应用程序样式。有了这个新的 ThemeRoller 应用程序,您就可以轻松地创建您自己的主题。7 c( E* w* s( t0 T. J! U$ g- K
jQuery Mobile 框架包括构建完整移动 Web 应用程序和网站所需的所有 UI 组件。页面、对话框、工具栏、不同类型的列表视图,各种表单元素和按钮等。jQuery Mobile 构建于 jQuery 内核之上,因此您可以访问关键设备,包括 HTML 和 XML 文档对象模型 (DOM) 的遍历操作;事件处理;使用 Ajax 服务器通信;以及 Web 页面的动画和图像效果。% L+ R$ v7 X$ c: [+ t
有了 jQuery Mobile,您就可以轻而易举地编写基础 Web 应用程序。由于 jQuery Mobile 是一个非常全面的基础架构,提供了一些高级事件和 API,所以您还可以编写高级移动 Web 应用程序和网站。
) j; Q2 q( m' ?! P" t本文将介绍 jQuery Mobile 最新版本(版本 1.0.1)的基本原理。了解浏览器支持、UI 组件和 API。要跟随本文学习,您需要:* k8 W$ z; n3 _  C+ m
  • 之前接触过 HTML
  • 理解 JavaScript 基本原理
  • 了解 jQuery 基本知识2 i) q) `. m! p6 W8 m
您可以 下载 本文所用的 jQuery Mobile 源代码示例。参考资料 提供了部分有关 jQuery Mobile、jQuery、JavaScript、DOM 和 HTML5  的信息。 9 c6 S3 @! Z3 t: g

1 X- D. p) N1 @7 C

8 }7 ]6 J0 g$ A; W  d浏览器支持
$ E: W+ }. C8 x2 N) G/ A: ~1 q移动设备浏览器经历了漫长的发展,但并非所有移动设备都支持 HTML5、CSS 3 和 JavaScript。这个领域是 jQuery Mobile 持续增强和支持全面兼容发挥作用的地方。
# i; a' D; W0 JjQuery Mobile 同时支持高端和低端设备,包括那些不支持 JavaScript 的设备。持续增强是一个设计理念,包含以下核心原则(来源:Wikipedia):# c: O1 l0 l; v/ P& b) x- [1 N' A
  • 所有浏览器都应该能够访问全部基础内容。
  • 所有浏览器都应该能够访问全部基础功能。
  • 增强的布局由外部链接的 CSS 提供。
  • 增强的行为由外部链接的 CSS 提供。
  • 终端用户浏览器偏好应受到重视。4 u1 T4 x1 @, K; I" ?9 X
所有基本内容应该(按照设计)在基础设备上进行渲染,而更高级的平台和浏览器将使用额外的、外部链接的 JavaScript 和 CSS 持续增强。# }* w9 I6 N/ t  q, ^
jQuery Mobile 为大量移动设备提供支持。jQuery Mobile 将设备支持根据其支持级别分类或分组成 3 个类别:9 [5 \: p. k+ u% j' ^- Z  ?
  • A 级:设备支持一个充分增强的用户体验和基于 Ajax 的动画页面过渡。jQuery Mobile 支持超过 20 个不同设备,其中包括:iOS 3.2-5.0、Android 2.1-2.3 与 3.0、BlackBerry 6-7 与 Playbook、Skyfire 4.1、Opera Mobile;还支持桌面浏览器 Chrome、Firefox、Internet Explorer 和 Opera。
  • B 级:设备支持一个增强体验,但是没有 Ajax 导航特性。支持的设备包括:BlackBerry 5.0、Opera Mini 5.0-6.5 和 Nokia Symbian ^3。
  • C 级:设备支持一个基本的、非增强的 HTML 体验。支持的设备包括:上一代智能手机,包括 BlackBerry 4.x、Windows Mobile 和其他设备。" D4 |' E; [, X6 m: Q
参阅 参考资料 获取一个完整的 jQuery Mobile 支持平台列表。7 f9 Z  ~; S" Q/ [
本文其余部分将描述 jQuery Mobile 页面构造、HTML5 数据属性和 UI 组件。
5 a) o: m* B2 T# H7 @" b! e& F8 c! [3 ]1 ]0 |0 O+ i9 h
6 y  w/ K4 y, w* @6 m
一个 jQuery Mobile 页面构造
, l+ S+ ]( W) @" _$ T! K1 h清单 1 所示,一个典型的 jQuery Mobile 页面有 3 部分:页眉、内容和页脚部分。
% O" d8 M/ |( ~' e' H9 }
5 x: p2 {9 A! A  {: r; P6 P清单 1. 典型的 jQuery Mobile 页面
$ I9 j, Y4 M0 J/ S
    <div data-role="page" id="page1">; [& u4 ~9 f+ t# I
    <div data-role="header">
5 l# G/ @* h1 C" `1 r8 i       <h1>HEADER</h1>7 d$ v; Z9 m% y( y# I
    </div+ E6 B' s0 [6 b' a$ J5 M
    <div data-role="content">
0 s2 d3 l( q( l! f* a" J       <p>6 L# J7 d0 r6 s& d; \
       CONTENT AREA* Z- H5 \' ?3 v4 ?- C$ `$ [  t& f
       </p>$ b0 l8 }8 A+ i; L. t7 m
    </div>
! b2 n8 N# I' f. ]: m6 b; J    <div data-role="footer">8 ~& q: l; z7 p% `- V; J+ k, O
       <h1>FOOTER</h1>' P: }$ D0 s3 X$ A  w2 p' I
    </div>
7 L* |3 p7 A* F  N
图 1 显示了 清单 1 结构。# |5 w" g2 \9 G
8 Q' b1 d" |6 P4 _, Y! G: D
图 1.  一个 HTML5 jQuery Mobile 页面结构
+ _% H( M! ~! Z3 l6 ?' n' v
( E7 I! e5 G6 T% {! R0 M' V! _页眉部分通常放置页面标题和 logo 等信息。内容部分放置特定 Web 应用程序和各种小部件。页脚部分很适合导航。) _) n- }$ ], G& G+ o$ G
要利用 jQuery Mobile 高级功能和 HTML 语法,jQuery Mobile HTML 文档必须定义 HTML5 文档类型。HTML 文档其余部分包括:; q4 r! M9 p# L
  • <head> 和 <body> 部分,其中 <head> 包含 jQuery Mobile 引用和 CSS 移动主题
  • <body> 部分包含 jQuery Mobile 内容
    9 K" h1 v5 }& v: v' W  K( m
清单 2 显示 HTML5 jQuery Mobile 文档的一个示例。
0 X7 h% Z% G% W; E+ g( `
7 y' |1 R* r8 V" W) E清单 2. jQuery Mobile HTML5 页面结构
" b* J" r4 Z" K- e5 ~9 R( _0 V, g7 H
  //Define the HTML5 doctype:/ w, N. U' J9 S& S8 d4 Z9 x& b' }8 Q
0 D  }, V$ ~9 T3 R0 {
<!DOCTYPE html> ' @# W( p3 F' B$ Q4 P
  {7 T7 j. i( P  X; n' m2 N
// Define the HTML5 <head> with references to jQuery, jQuery Mobile and CSS mobile themes:9 u- p6 Y% n. z. G% @, d

1 e4 [/ `+ h% ?$ D- Q/ u7 F<html>
  h' h' Q# i$ @+ [0 k9 q- ]
' n! n; T# h7 U<head> 7 a% q  I/ U0 g# F7 [
    <title>Page Title</title> / @4 l: ]! S& k% f1 ~$ Q! j8 u5 b
       
8 X4 ~& X0 y9 j: [& t( m    <meta name="viewport" content="width=device-width, initial-scale=1">
: G6 `6 M5 E! h0 S7 p
" ^5 r/ F) c5 I/ d1 L& Z    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0-rc.1/
% J8 k$ |" R7 K& }2 I- d- F) h: xjquery.mobile-1.1.0-rc.1.min.css" />4 ?$ [& {. N( l/ H% P: n" i) `" T
    <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
# O6 p) t; z$ w) G2 i8 S6 J8 J! Z    <script src="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.- r$ j  d: w* K( O/ c
min.js"></script>& ]4 b- j  T( F  u/ ?5 Y/ I; r7 z" c
</head> ) F0 j) B# [) S4 i0 |" W  ^" w

5 U" ^1 @& ^$ F& d; Y3 V& B1 X( x1 |// Define the HTML document <body> that includes the jQuery Mobile elements:
4 g" @8 D2 r- L+ w2 h# ~, c. b4 ^3 o- v/ ~* G& Z- @6 r* O2 O
<body> & T0 s) h; p3 T  ?- |+ d  W* b
! _* `" q9 I% f% w% v
<div data-role="page" id="page1">$ ]3 P( R6 l4 t7 L0 P( |/ b7 @
4 ^: l* X, _  q9 L: ^" }, U
    <div data-role="header">
5 q& K, }& |! M       <h1>HEADER</h1>7 j% G& Q. c4 _! W% x9 V. X% P+ q  t
    </div>
& d+ }8 |0 c8 i' ^$ E2 V; Y* B; i4 t6 ~8 s! t# l: s* T
    <div data-role="content">7 x5 V3 i( D( R- O9 [! Q  ~2 l# @; J
       <p>
& [  S: ~  [3 J1 I3 j4 k0 s- o       CONTENT AREA
- }% Q7 U% t' [3 d) ^7 o       </p>6 |: s9 H; O2 E6 l) f( s7 L
9 _2 {7 {* |" Q3 b
    </div>) |/ v5 t, t1 \9 b# g' ^. {6 _9 g

' ^' ^* |( q1 P" e# _  T    <div data-role="footer">4 C# r% M9 k8 r$ V; _
       <h1>FOOTER</h1>
- r- H6 r( r7 Q" P/ I! h6 j    </div>
+ [$ X& R* E1 {( l7 `- W) m0 U</div>
& V3 \( o& g0 f
, [$ b( d: }9 q1 u: f8 T6 [<div data-role="page" id="page2">
  r1 A  V# A, d+ z' t+ e6 H' R:
/ v" \6 a# H4 G:1 f1 y# v  D/ ~) l6 W) G' T
</div>3 d8 a# i" X! S" D* P
- w/ B6 P1 N+ @. r9 I
</body>
( {; D0 D  E$ q. f</html>0 u$ ]8 m! ?3 N# q. d% k

- z( K- J' K; r// The footer can be turned into a navigation bar very easily, as follows:. \0 G& R% [# `3 d1 ]' f' H

! L7 \. d' D9 e# i& T8 v5 O<center>
1 z. h% u! M! e' N<div data-role="footer" class="ui-bar">  f/ H$ F; I3 Z: ~- h" {
<div data-role="controlgroup" data-type="horizontal">
* F# x8 I3 u$ S8 s* e9 S<a href="index.html" data-role="button">One</a>
$ U- y+ L4 F' X- z<a href="index.html" data-role="button">Two</a>& A: @# C& S9 u( ]
<a href="index.html" data-role="button">Three</a>
: B# f9 P7 c7 G+ E8 L<a href="index.html" data-role="button">None</a>2 E' D. ^: `5 R, _
</div>            
' g- k$ R+ D* x) ~" v. L) ]</div>6 P% `8 J9 V/ q+ \- t+ ~% A, {
</center>
9 S, ~+ a4 \. X& v' c: F
图 2 显示了在 清单 2 中创建的页脚。
3 J" [" C- F6 W4 c
- V6 W$ N% ^3 T& Z, ]图 2. 页脚1 {4 ?4 Q* h" i

# ]& |5 u+ l0 a: P8 N尽管页面、页眉、内容和页脚属性是可选的,但是推荐您使用它们,它们可以使页面更加清晰,有利于遵循 jQuery Mobile。
0 R7 s7 `+ j) p5 t+ g$ A单个页面、多个页面和页面链接( V. j1 l. N4 A9 M
单个 HTML 文档可以有一个或多个 jQuery Mobile 页面,正如 data-role="page" 属性所显示的。如果有多个页面,您必须为 id 属性指定一个惟一的页面 ID,用于链接外部页面。加载一个多页面 HTML 文档时,仅显示第一个页面。 , x' X* A, S% r4 J- z, m
jQuery Mobile 使用 Ajax 进行页面加载,此过程中显示加载进度条。如果加载成功,会增强该 UI 小部件,将页面添加到 DOM,并且应用于页面动画或过渡。
" P8 G: c0 k! u" C  k- J无需 Ajax 进行链接和 HTTP 加载。您不能使用这种方法或者动画过渡。无需 Ajax,就可以在链接上使用 rel="external"、data-ajax="false" 或 target 进行加载。
. z+ L5 }! S3 t- B8 O9 W6 A

& e1 Q2 F% a) I0 s6 f. V
5 s5 r8 x3 G6 e受支持的事件和方法
0 j  H# q) [4 F3 p/ Z5 u5 v在 JavaScript 中,使用 jQuery 时可以将 jQuery object 对象本身作为 $ 引用,同时获得 jQuery 设备访问权限。可扩展 jQuery 内核的 jQuery Mobile 框架可以通过使用 $.mobile 来访问,同时还可以提供特定于 jQuery Mobile 事件和方法的访问。$.mobile 公开的事件和方法,如下所述。' z+ x6 G# N! j9 {( x# i  n
事件
0 B% s- F( P+ U* h与其他 jQuery 事件一样,您可以将 live() 和 bind() 函数绑定到 jQuery Mobile 事件。例如,触摸事件包括 tap、taphold 和各种滑动 (swipe) 和虚拟鼠标事件。您可以绑定定向更改和滚动事件,比如 scrollstart 和 scrollstop。页面事件允许在以下时候接收通知:" u) l$ Q- I4 r9 j3 g6 s, q
  • 页面创建之前
  • 页面创建时
  • 仅在页面显示或隐藏时
  • 页面显示或隐藏时
    ; X8 }9 G& ]1 E. U7 S7 K' c* G
初始化 jQuery Mobile; g$ o4 V' p7 V
如果您对 jQuery 比较熟悉,可能还记得 DOM 一加载就会开始执行代码,您需要在 $(document).ready() 函数中进行初始化。有了 jQuery Mobile,就可以将初始化绑定到 pageinit 事件,如 清单 3 所示。
% K/ H* b* W1 N2 e0 X
; G' E5 q: N; r) H清单 3. 绑定到 pageint 事件$ @9 _- {! B& _% B5 Y+ F& u6 L% P
                             $( '#welcomePage' ).live( 'pageinit',function(event){ ... });

2 k# W" K: }0 j, @' v. B; @0 g初始化页面之后,可以触发 pageinit 事件作为引用页面。不管以何种方式加载页面(直接加载或使用 Ajax 加载),页面都是有效的。* u( H+ P1 }( e$ o0 P  K- v
覆盖 jQuery Mobile 默认值
3 K6 U. d6 s  |/ D8 W如果已绑定到 mobileinit 事件,当执行 jQuery Mobile 时会触发该事件,您可以重写一些 jQuery Mobile 的默认值。清单 4 显示一个示例。您可以覆盖默认页面过渡、默认页面加载文本、默认页面加载主题,以及其他。/ Q0 o/ _% f5 Q$ \3 w2 O

' Y/ u' x' |/ a6 b- N' [清单 4. 初始化 jQuery Mobile
' |0 f+ M1 W% g. H! q$ [2 T
$(document).bind("mobileinit", function(){   //apply overrides here });
& W' X+ X. G9 x
访问 jQuery Mobile 全局配置页面(参阅 参考资料),了解有关 jQuery 默认值的更多信息。
3 t" b, q4 M8 p. P方法# V$ ]- y$ h/ U6 @1 W9 b1 C
jQuery Mobile 还提供很多具有 $.mobile 对象的方法。表 1 显示了其中一些可用的方法。
" H; t& C/ w2 J' U4 z3 A
& T4 q4 L( }( g6 e表 1. jQuery Mobile 方法
3 ^8 `: ~2 T1 e6 D6 @. V3 v
方法使用
$.mobile.changePage以编程的方式从一个页面转到另一个页面。例如,通过滑块过渡转到 weblog.php 页面,使用 $.mobile.changePage("weblog.php", "slide")。
$.mobile.loadPage要加载一个外部页面,用 jQuery Mobile 对其进行增强,然后将其插入到 DOM。
$.mobile.showPageLoadingMsg显示页面加载消息。
$.mobile.hidePageLoadingMsg隐藏页面加载消息。
$.mobile.path.isSameDomain一个用于比较两个 URL 域的实用工具方法。
$.mobile.activePage当前视图中的一个页面引用
2 u7 `$ K  k& r. [# ?
jQuery Mobile 方法页面有很多方法和实用工具(参阅 参考资料)。
, ?, y5 o5 S6 O
. E3 ]; B! k/ ~5 Q2 g8 b6 X/ K
! m+ E8 K: M! M& z8 B- }
Widgets 和 HTML5 data-* 属性! e, a2 ~: w. S" i3 C
jQuery Mobile 依赖 HTML5 data-* 属性来支持各种 UI 元素、过渡效果和页面构造。这些 HTML5 属性是 jQuery Mobile 简单性的关键。不支持 HTML5 的浏览器将会默默丢弃 HTML5 属性。( {) Q: _9 K- C' O  K, P
下列列表将显示这些代码以及不同 UI 组件和 data-* 属性的渲染,以及如何使用它们来创建 UI 组件。% Z/ v+ u, b) F8 B
  • 页面、页眉、内容和页脚
    5 `0 y' u, U' D% T0 b, R3 w/ t
    " k4 E  M7 V# v清单 5. 页面、页眉、内容和页脚
  •   <div data-role="page" id="page1">
    * z0 j& M. E3 _9 h1 b8 S    <div data-role="header">
    + Y$ F$ x# J: q4 b' J; J& ?       <h1>HEADER</h1>
      o' Z/ R" a! ~: ?$ H. }7 b# A. k    </div
    " p8 F, H4 v9 f) n8 D9 }    <div data-role="content">  N5 h* X9 b3 w
           <p>
    ' j, z4 T0 N* F' e2 |       CONTENT AREA. h# [! x# @; [/ U$ a7 t4 y3 Z: a
           </p>: `1 M; O" o* J
        </div>9 D# ^) v' c) [$ m
        <div data-role="footer">
      i! u+ J, R# C+ J5 A       <h1>FOOTER</h1>, x2 v" }* g2 v0 g
        </div>& V/ Y7 _' g2 @( U/ k4 d8 p
    </div>

    : H' V$ D7 m2 H
    " R: J# y' A8 @3 i
    % E2 [0 v3 U# ^# [
    图 3. 页面、页眉、内容和页脚
    ( Y6 u# q$ ~/ E  e
  • 基础按钮7 }2 \2 {  N/ g3 v

    , `! S/ N- p* D, h
      U) |9 P# {3 q5 M7 P  F4 I清单 6. 基础按钮
  • <a href="index.html" data-role="button" data-icon="info">Button</a>

    8 c; N3 G5 x  d0 c: V% h4 i7 ~$ D

    1 l- j* b  x. C- {' ~9 r$ D+ G/ g) m6 |+ G  R8 J
    * H7 k8 \+ F9 w
    图 4. 基础按钮+ B- |/ T6 @: ~8 v5 K# ^
  • 复选框
      r) s' F7 F# d' S0 W" H
    2 n  o1 H2 W$ u0 l+ J清单 7. 复选框
  • <input type="checkbox" name="checkbox-1" id="checkbox-0" class="custom" />
    . p1 }2 [! L4 U9 t0 `% x<label for="checkbox-0">Checkbox</label>
    : f2 `) F& H) t; f1 c; j& [. ?

    5 {1 j6 Y8 i9 `6 t9 a
    6 W4 A4 A4 h7 f2 N- Q: l图 5. 复选框
    , d  O  K; q) t+ V" c
  • 可折叠内容 4 B% o" T0 X% Z4 k2 ?! y5 j3 n; |
    * O6 J: t, C2 J9 w/ j. w
    清单 8. 可折叠内容
  • <div data-role="collapsible">
    # D7 d1 E1 A2 l0 V7 P. T0 ^7 |9 N   <h3>Header</h3>
    - s% }- `% T$ K1 Y( g( f1 s   <p>Paragraph...</p>5 I* x9 ?, Z- d! K& q! R
    8 _3 n- o5 v) Y6 d4 \
    </div>

    , M8 o' R4 {. \. ~$ i
    : {: M& ?$ x+ h+ ?( K  J# F8 D
    5 H/ P4 ?( B" X. e
    图 6. 可折叠内容  N: f  j$ s/ l' i- Y3 j1 x1 y5 s
  • 使用过渡
      Y# K2 _! O: [6 J% R) N! ^: |- z  q2 W1 r. H9 Q
    清单 9.  打开一个对话框
  • <a href="dialog.html" data-rel="dialog" data-transition="pop">Open dialog</a>
    5 Q, }" [: q- H3 S8 E# F% V' [1 e
    清单 9 中的代码是一个超链接,将使用一个 “弹出” 类型的过渡打开对话框小部件。图 7 举例说明一个对话框小部件示例。 ; P' {* P4 r2 p0 @: M

    4 M& t. s* z+ |& h. s' f/ T! P* N( e9 S4 `0 e" x
    图 7. 打开一个对话框
    4 Y4 S6 x1 h+ h, J4 W
  • 翻转切换开关
    . `' V$ K: @+ b6 [% l( y5 A4 _  Q; j/ E" B+ _
    清单 10. 翻转切换开关
  •                                                 - k1 O) u2 }2 ]9 N0 Q: K
    <label for="flip-a">Select slider:</label>* y( ^* X* o' ?3 r) }
    <select name="slider" id="flip-a" data-role="slider">
    $ p. m: [2 I4 w" c    <option value="off">Off</option>( @+ ^; l5 w4 V$ i* |0 ~2 j
        <option value="on">On</option>5 I& s: C8 q, u7 s: \' V
    </select>
    & D+ A% s4 C3 ?
    $ g4 Z6 U+ h2 _/ @/ `
    $ h9 J* u1 D1 v* r# F, r/ ?
    图 8. 翻转切换开关* o* M; j; i/ [; B" V3 d
  • 列表视图
    ' N! H; g2 r8 g, o, |4 [  N
    2 e2 ?& r: p, k" W) b$ I! B5 ~清单 11. 列表视图
  • <ul data-role="listview" data-theme="g">
    / Y6 w. W2 ~5 a: Y3 {  <li><a href="Friends.html">Friends</a></li>
    % ]! [5 U2 d' T; N) v9 A; ^$ M6 W  <li><a href="SendMessage.html">Send Message</a></li>
      d( X& D$ Z. d0 t* a0 s2 H. ?  <li><a href="Share.html">Share</a></li>
    . U2 k  m; V' S5 Y- m# b3 Z& N) Z% f% N7 i</ul>
    7 W& k) Q# f: h1 G* r
    ! L" b3 Z% v6 s: w" f' D
    . E$ k* M1 ]5 R1 H
    图 9. 列表视图
    ( U, ^+ P4 d2 U* f; \* \1 \
  • 导航条 8 R: r& p# P/ \. n! n% _$ ]" n

    # \3 F5 B) }% m; p/ E; k清单 12. 导航条
  •    <div data-role="navbar">! c6 c1 l( p% v$ b/ N9 d- ^) X% o
       <ul>3 R. @3 }  N/ t( W- ~& ]1 k8 L+ P
           <li><a href="a.html" class="ui-btn-active">One</a></li>
    & `( i3 B0 C$ y" X1 d       <li><a href="b.html">Two</a></li>5 V+ \0 N' S& D3 |8 y2 A. x
       </ul>  C5 c7 |5 h, z: G6 q! C
    </div>

    ! ]- @1 p# _3 T5 l8 t( ^
      j# ?- z# J* z/ H3 o- P- C! Z
    图 10. 导航条
    . s7 f7 Y" z! U; n" _% k8 k5 Z
  • 单选按钮 " c. }* M# m7 Q! J: Y& s: F- ]1 S5 Z% `2 S/ T

    5 y+ S4 o  W" y清单 13. 单选按钮
  •                                                
    5 p! [- n+ J% [4 ?, d# p<fieldset data-role="controlgroup">( e6 n& |: d& @; P5 e3 L
        <legend>Choose a pet:</legend>0 y/ S4 E' V7 J+ [- T" e' S
            <input type="radio" name="radio-choice-1" id="radio-choice-1"
    5 _0 {$ ?/ v/ G1 y6 Uvalue="choice-1" checked="checked" />
    9 i" I' \9 Q9 h        <label for="radio-choice-1">Cat</label>
    ) Z' d$ j1 F2 f9 v, Z2 q        <input type="radio" name="radio-choice-1" id="radio-choice-2"
    * o/ W" j/ r! o& V. U- @/ H! Ovalue="choice-2"  />
    8 r' t2 i& z; R5 _2 q        <label for="radio-choice-2">Dog</label>$ q6 q% o# M: v" d; A5 M
            <input type="radio" name="radio-choice-1" id="radio-choice-3"7 o: _, F3 G; W+ E* z+ C
    value="choice-3"  />
    : @/ q( n) v! L- _  u9 a        <label for="radio-choice-3">Hamster</label>
    ; a& `/ O) J3 K) Z</fieldset>

    $ @  I, G; m2 B! R
    + ^6 X$ c" E. p1 Q* j" \

    ' Q# Q! V( F2 ?/ N; F# E图 11. 单选按钮
    3 o5 o) r4 i7 l0 ?) b
  • 选择(表单)# ^  s( E( O3 B0 f# F- ~

    % H% b- t6 g  n: `清单 14. 选择(表单)
  • <label for="select-choice-0" class="select">Shipping
    $ ^: k0 m) h* R8 Amethod:</label>% z/ `9 ~1 u3 ]$ w  W9 v
    <select name="select-choice-0" id="select-choice-1">) t% i. g$ e; h/ E
       <option value="standard">Standard: 7 day</option>
    / P4 \7 ~" Z6 S1 F+ |9 x9 w   <option value="rush">Rush: 3 days</option>
    . L: A3 Q7 t0 N0 s) c   <option value="express">Express: next day</option>
    8 Z2 e4 d2 Q) L# C# Y$ u: k   <option value="overnight">Overnight</option>
    . ^; L$ X1 G: V+ R2 ~</select>

    " R8 W, s; Z2 _  ]0 B% d
    % s, I5 t& i! y& H1 Y7 A2 s
    图 12. 选择(表单)
    8 T$ |- s, T9 k6 c' O5 @
  • 滑块 ( u! ^1 f& ^; J) K. K0 S

    # Q8 T7 ?5 V/ C* a5 b. I清单 15. 滑块
  • <label for="slider-0">Input slider:</label>3 Z8 |3 @4 a, i; h
    <input type="range" name="slider" id="slider-0" value="60"
    , |& h" H# n3 \1 v& Y7 bmin="0" max="100" />

    , e& f9 s9 F' I0 k% u9 H5 d8 C' v

      R; r1 c, P. R+ k' P图 13. 滑块4 P. T' |2 A# ?/ z/ W
  • 文本输入 ( _; t& M$ z. @# p
    0 v: {- ]. c! Z
    清单 16. 文本输入
  • <label for="basic">Text Input:</label>2 {: ?0 T; Y' h! M: P7 R
    <input type="text" name="name" id="basic" value=""  />
    " O3 @0 f5 D( ^4 |

    ' j- \: q% T; y% ~$ n图 14. 文本输入0 l; p) j! S5 g5 r+ f9 q
  • 文本区域 1 j; I  P4 X; W7 R! C1 O' u* [
    ' o* t! Q) I3 b' X
    清单 17. 文本区域
  • <label for="textarea-a">Textarea:</label>1 O, S( W& k! W9 y$ ~3 H
    <textarea name="textarea" id="textarea-a">
    - l0 ~  H! Q* _9 K' _) }Basic textarea.
    + k; w$ O* L. _1 c1 ^</textarea>
    5 V7 a3 ]- h; v" m5 U) Z
    4 X& p1 F6 t- c& y- P$ N& p5 B
    图 15. 文本区域 2 x7 D* A5 R( D) K) V6 E
  • 网格
    ; R! {8 ^: }) `# B; L2 {0 M8 D+ `; G- l. g+ w" H. }  \, }
    清单 18. 网格
  • <div class="ui-block-a">Block A</div>6 a7 B9 m0 X0 m: N! ~# Q$ t$ B
    <div class="ui-block-b">Block B</div>
    0 Z& T& f+ q, B! ]& x<div class="ui-block-c">Block C</div>
    % E7 |: _/ e8 V; f; e</div>

    ' d0 C: v6 N6 z( x
    注意:% d' u5 _. O7 @7 `. A& N8 C0 G" w
    • 两列网格使用 ui-grid-a 类
    • 三列网格使用 ui-grid-b 类
    • 四列网格使用 ui-grid-c 类
    • 五列网格使用 ui-grid-d 类
      3 d! d! X3 i* j

    2 ~( W* ~: ?$ P$ P3 w9 T
    . _" w6 Q+ G. ], E图 16. 网格
    1 J9 z: e$ `* I# u! h
    $ |& u7 u' n% Z3 b* I8 ^
    3 y& [# f. \: W9 A1 {$ z
data-role 属性是用于定义各种小部件。不是所有 UI 小部件都由 data-role 属性决定(不过选择、滑块和文本输入均是)。参阅 data- 属性参考资料以获取关于各种 data-* 属性的详细信息(参阅 参考资料)。6 N: [( J/ @! c, r6 E
正如上面提到的,jQuery Mobile UI 框架包括构建完整的移动 Web 应用程序和网站(包括页面、对话框、工具栏、各种类型的视图列表、各种表单元素、按钮和其他内容)的所有 UI 组件。我们已经介绍了用于定义各种 jQuery Mobile UI 小部件的 HTML5 data-* 属性。本小节其余部分将讨论最常见的 jQuery Mobile UI 小部件。5 J6 V# l& }. W" x0 ?0 `; G3 P
对话框- h7 n# W3 L. T4 j$ ^% B: K0 }
模态对话框是一个重要的页面类型,对于警报或向用户发送消息非常有用。任何页面都可以过渡成一个模态对话框,其方法为通过添加 data-rel="dialog" 属性到页面锚点链接,如下所示。  
& V% Q0 d4 j$ H6 S. k$ |$ z1 ^2 [
<a href="tc.html" data-rel="dialog" data-transition="pop">Terms of Use</a>
9 D3 `/ o  v5 [+ x8 e. x* |
+ m5 r. Z/ `7 t! @
您可以将过渡和主题引用到该对话框。jQuery Mobile Dialog 页面拥有更多信息可供参考(参阅 参考资料)。4 ?: I4 F) O5 a& N
列表视图8 R# U" y% l' @9 V/ _  v% ]7 y
列表视图是移动应用程序最重的 UI 元素之一。jQuery Mobile 提供一组丰富的列表视图元素,包括基础、嵌套、分割按钮、编号、计数泡泡和图标列表。我们来看看一些列表视图的代码和渲染。
- c, W% B4 c8 l4 U
  • 基础链列表
      N3 o: \7 {* U1 y/ L6 d" T: T- _7 A$ E& U! D, s! ]
    清单 19. 基础链列表
  • <ul data-role="listview">   <li><a href="index.html">Acura</a></li> </ul>
      j5 A1 ~& V4 k$ L) u' O6 }

    ! p* q# P# j! k* ?( w) p: i1 A$ j图 17. 基础链列表
    " R( n+ J3 f+ z3 G# C5 [" `6 C5 A
  • 嵌套列表
    / V! D& s. A. p' z  K% |; N1 u5 A* H% \
    清单 20. 嵌套列表
  •   <ul data-role="listview" data-inset="true"># N$ b  X8 j; {
        <li>) v- H+ E$ K, A& [& v/ O
          <a href="index.html">Get Friends</a>
    ' H% ]% W* d. n2 S8 m2 p    </li>9 O1 u' k9 \# l+ a; W
        <li>3 ]+ J9 h$ d2 d" |3 @& t
          <a href="index.html">Post to Wall</a>
    6 P( K2 w$ R, q& p  F    </li>
    : h, n# N/ t$ S6 H$ ^    <li>& u" A0 `5 U: {$ o& N
          <a href="index.html">Send Message</a>2 @* `! z0 m3 F* m- U3 V4 q
        </li>4 d8 h8 \% A9 q; y; K. m- G
    </ul>
    / F- O5 K. I- U4 B9 U) B, X0 s

    - n  s1 \1 B& ^3 P图 18. 嵌套列表
    9 w: ]# K* L1 h( K) \& u5 A
  • 有序列表
    6 j. c& Q0 X4 y' w9 W0 z2 h; N
    $ I3 L. c: f# ^, o" N, ~$ z清单 21. 有序列表
  • <ol data-role="listview">
    - k" g( V- l2 @+ O  <li><a href="index.html">The Godfather</a></li>- K2 U" G! g, c7 L# S+ B
    </ol>

    * j) e3 _& I/ q: S3 {  F

    8 j" _+ m8 k3 L: {! [图 19. 有序列表
    ; Z0 N' V, u' s( c0 X) q# t% K
  • 分割按钮列表 ' E+ z: u/ A, v8 u% V& e; F7 _

    7 B. f7 O( y1 I, n3 \清单 22. 分割按钮列表
  • <ul data-role="listview" data-split-icon="gear" data-split-theme="d">
    / f1 z) Y; _0 ~# G# m, P7 z. J  <li>9 U) l/ ^- w) r* N* H. [9 b
        <a href="index.html">- X5 b6 i4 C7 i/ |5 j. |8 ~% h
        <img src="images/album-ws.jpg" />
    . o% Z& _' @8 o2 G* w) o% q    <h3>Elephant</h3>; |) u# s6 p: A( }& y* m
        <p>The White Stripes</p>
    ) c7 c0 C5 b% [5 q/ k    </a><a href="lists-split-purchase.html" data-rel="dialog" 7 @0 a3 G; T2 }, j2 w5 n* A
    data-transition="slideup">Purchase album</a>7 v, h& \% k/ v! A& S
      </li>                       
    / k- N3 A! _$ U- }</ul>
    $ c* a% ~0 Y2 V5 R
    8 n4 n" D3 g- n( k7 Q
    图 20. 分割按钮列表0 G7 d8 p* a) M( U( {1 X4 A6 D
    4 V( }$ R0 i' N( V' N  u' K5 D
插图风格列表
0 W7 u1 A$ K% l$ OjQuery Mobile 将支持所有这些列表视图作为插图风格列表(带圆角的列表),其方法为通过指定 data-insert 属性,如 图 21 所示。
! X& X0 w. i! X7 p8 V4 W8 I0 U2 R$ A$ r8 M1 @$ m
图 21. 插图风格列表% D5 e# p) R1 m5 ?: b

) q  {4 h! o2 T) Z4 C1 m. B$ Z% Z清单 23 显示插图风格列表代码
8 s; R! G, `1 A5 E, i* N$ H( ~. O! q7 K$ C
清单 23. 插图风格列表
0 B- x/ I$ K% c8 I/ w  O+ Z$ h7 v
<ul data-role="listview" data-inset="true">  m' J8 X# U& y
    <li>% a4 m" ]+ G1 U# u8 r0 m" @
      <a href="index.html">Get Friends</a>- d( u4 [' O4 {
    </li>
  [  z+ n* e1 ?- x! R    <li>
9 L& R% B3 e' E. W, j3 {0 y8 `3 b      <a href="index.html">Post to Wall</a>
: K3 ^( n3 g0 C- u: Y4 v( r6 ^    </li># ?1 R, E; o; }* _# q0 s
    <li>
. J' n3 j* v1 m; C) [& t3 C$ D1 C% [9 I      <a href="index.html">Send Message</a># g% I7 Q/ ~6 y
    </li>
: s( A" I9 D" [9 u4 U</ul>

: u. r0 \8 _; O0 e8 ]1 {, ZjQuery Mobile 提供一组丰富的列表视图。更多详细信息,请参见 jQuery Mobile 列表视图页面(参阅 参考资料)。0 _! k1 z5 y) }! v/ z
表单/ F, R1 s8 D6 D2 a
表单是一种常见的 Web 构件,用于将信息发布到服务器。jQuery Mobile 支持许多表单 UI 组件:文本输入、搜索输入、滑块、翻转切换开关、单选按钮、复选框、选择菜单和主题表单。所有这些都很容易创建。上一小节 介绍了其中的大多数元素。
- J- |2 Q) m% X- m* djQuery Mobile 提供一组丰富的列表视图。清单 24 显示一个带菜单按钮和提交按钮的表单。: S- a: M) J$ }1 P% W; u) @

: |7 P1 ?7 a+ V: s3 o% h3 m8 g清单 24. 简单表单和提交按钮! q0 a2 X; \- ^7 D) v/ q9 f+ `
                                7 {* v1 X3 ^) L+ L5 O
<form action="forms-results.php" method="get">
: h6 f% ~' t1 W8 x" x' w8 ~" w    <fieldset> 0 a) s1 x) O% p
        <div data-role="fieldcontain">; ^, @5 u. w; o7 Y! m
            <label for="select-options" class="select">Choose
. @4 g8 U/ O9 J9 a( `0 Ian option:</label>
. e0 k# s4 H- R* }0 p# F# u            <select name="select-options" id="select-options">0 ~  ^% M1 Y3 d1 p
                <option value="option1">Option 1</option>( v5 A6 v) W! T" m9 |6 v
                <option value="option2">Option 2</option>2 K* u5 l# l; P" K7 N* u
                <option value="option2">Option 3</option>- e0 i8 m) u$ O% @; w
            </select>
, c% L9 {* g4 m: N9 C3 k        </div>5 |: C# Q3 i4 Z1 u
        <button type="submit">Submit</button>
) v" o, ~2 K; `9 H* u    </fieldset> 7 n+ E! F$ P8 F+ T( s+ u2 o  H
</form>
. [, e3 v0 S1 ]2 O' P
选择按钮是由本机 <select name="select-options" id="select-options"> 所定义的,但是 jQuery Mobile 改进了其外观。<div data-role="fieldcontain"> 语句对不同值进行了分组,便于清楚呈现。表单本身是通过本机 <form action="..." method="get"> 所定义的。
0 `, _2 ~" ~/ S5 R+ o6 K  }) C图 22 显示 清单 24 中的结构.4 ?$ f  D0 \( s1 S( D' V* R! h0 v' l

: L: U  {5 v$ k1 t4 j! E图 22. 带有选择菜单和提交按钮的简单表单( ^# {1 Z' c- G2 K& ~
% d7 U2 S" x- Y6 O2 J0 r- t9 d
jQuery Mobile 表单元素页面提供更多信息(参阅 参考资料)。% y6 e6 a6 K) i% C" g( ~' a2 _


/ |8 R1 j( R1 r8 ]6 A. S4 W$ X( G" }; ]  g: B, A, Z# A6 M
页面过渡; T( y6 d/ f! B
jQuery Mobile 支持许多非常酷的过渡,基于 CSS 的过渡,如 表 2 所示。这些过滤可以应用到对话框和页面中。1 ]3 G, P  T* [, c$ R

, }+ g* d' v0 Z* l0 K0 L% K3 n) h表 2. 基于 CSS 的过渡" Z; P! k* s7 @5 A7 g% h
过渡使用
fade淡入/淡出过渡效果
pop泡泡过渡效果
flip翻转过渡效果
turn旋转过渡效果
flow流动(类似于滑动)过渡效果
slide滑动(水平)过渡效果
slideup显示从底部滑动到顶部的页面或对话框
slidedown显示从顶部滑动到底部的页面或对话框
none无过渡效果
# k5 m* x/ r. g7 J1 m. z1 ~6 h3 N" H
要强制执行一个特定动画,请将 data-transition 属性添加在链接上,如 清单 25 所示。  l% Q& E" M% G! j

. F# \/ E$ J6 @6 e清单 25. 添加 data-transition 属性
" |) n  b) P% C/ l( f/ m9 `
<a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog"
+ h$ i7 b- s3 y" q data-transition="fade">Search</a>
1 e/ T! h6 _7 b2 d! o$ u; ^2 P: h
过渡是硬件加速的,需要浏览器支持 3D 转换。不支持 3D 的浏览器将不能后退。
: H# h/ `0 |" W9 C9 w1 A$ {jQuery Mobile 过渡页面显示活动中的过渡和其他相关信息(参阅 参考资料)。" z; p% i0 L) M" {* {- u


# |8 f0 I' S' s3 F8 L" K7 j6 J/ n. U( M, ]1 M3 r& C
主题和 ThemeRoller
. o( @4 }: S( V- c6 b* z& ^0 h有了 jQuery Mobile,您就可以使用 data-theme 属性来定制您自己应用程序的主题外观。jQuery Mobile 提供一个默认主题和 5 个附加样本,命名从 A 到 E,如 表 3 所示。; X  D  g9 n# `3 v( O

  I% g5 `. p5 U! n& q表 3. 主题和样式
, k8 z3 G* m* ?/ g
主题样式
默认主题
样本 A
样本 B
样本 C
样本 D
样本 E

: T* s# p" g+ L0 D" m6 V您可以使用元素和按钮等单个元素作为主题。
8 K2 V  d! P' l, w; x拥有基于 ThemeRoller Web 的应用程序,如 图 23 所示,您就可以创建您自己的移动 Web 应用程序或者迷你网站的主题了。您也可以使用 ThemeRoller 构建自己的主题,下载自定义 CSS 文件,并在您的项目中使用。
2 u& }2 ]0 }( z+ `* E' q& ^0 N* e! Z; I/ Z
图 23. ThemeRoller8 t8 Q" V" H1 W& G5 H
% n$ i2 B3 X2 c' z/ J

. @6 Y3 [  ]) k4 v: i' H
1 P% k$ H- w) }& g0 |$ o7 W+ f9 a' e
结束语
" l9 `1 v# k8 j% g) {在本文中,您了解了有关 jQuery Mobile 框架的基本概念。本文通过一个示例向您展示了如何使用基本页面、导航、工具栏、列表视图、表单控件和过渡效果。该框架提供了很多特性,包括一些用于高级应用程序的方法和事件。有了 jQuery Mobile,您还可以使用和定制小部件。希望本文可以激发您使用 jQuery Mobile 编写功能性移动 Web 应用程序 UI 的激情。+ _! ?: A( j+ I0 |& D
5 Q5 D0 X8 }9 y- f, k' j! O5 \

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
 楼主| 发表于 2013-2-17 20:10:34 | 显示全部楼层
本帖最后由 技术狂人 于 2013-2-17 20:21 编辑 # W' O- R3 I' e  [* Z

$ I- ~- I6 k7 k+ C$ N) x8 ~下载
/ c  Y% F3 y- P
描述名字大小, N! c/ H/ E0 R& m. X) g
jQuery 插件源代码2KB1 y* [0 d: P+ G5 g+ J, N
2 h; ?4 w# U. Y& ?# P: W
原文地址:http://www.ibm.com/developerwork ... leupdate/index.html

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
回复 支持 反对

使用道具 举报

发表于 2014-4-18 13:28:04 | 显示全部楼层
回复 支持 反对

使用道具 举报

发表于 2014-4-24 14:37:45 | 显示全部楼层
都是楼主一个人在忙活啊
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|小黑屋|手机版|无图版|SCMLife.com ( 京ICP备06056490号-1 )

GMT+8, 2018-1-18 00:00 , Processed in 0.094713 second(s), 10 queries , Gzip On, MemCache On.

Powered by SCMLife X3.4 Licensed

© 2001-2017 JoyShare.

快速回复 返回顶部 返回列表