SCMLife.com

 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,访问微社区

查看: 6324|回复: 3

[推荐] jQuery Mobile 入门简介

[复制链接]
发表于 2013-2-17 20:03:28 | 显示全部楼层 |阅读模式
本帖最后由 技术狂人 于 2013-2-17 20:19 编辑
, }* d  r, T+ R! G% k
6 t/ P. e/ q" O- i+ r9 o简介
  _6 U4 b. m' N1 Z, yjQuery Mobile 是一个极好的框架,用于编写移动 Web 应用程序。jQuery Mobile 构建于流行的 jQuery 和用户界面 (UI) 之上,是一个有效的统一框架,可为您编写移动 Web 应用程序。有了 jQuery Mobile,就可以确保外观、感觉和行为在不同移动平台上的一致性。jQuery Mobile 基本特性包括:
1 R4 b( n# ?0 P% y. S& B
  • 一般简单性和灵活性, x, |' k8 ~, W7 P  @6 G- o" n; a: O
    该框架易于使用。您可以:, n7 \. T4 B5 j$ c
    • 主要使用标记驱开发动页面,无需或仅需很少 JavaScript。
    • 使用高级 JavaScript 和事件。
    • 使用一个 HTML 文件和多个嵌入页面。
    • 将应用程序分解成多个页面。
      & y$ r: [6 m6 u
  • 逐步强化和全面兼容. Y* T8 c" S' P, I& K2 A
    尽管 jQuery Mobile 利用最新的 HTML5、CSS3 和 JavaScript,但并非所有移动设备都提供这样的支持。jQuery Mobile 的理念是同时支持高端和低端设备,比如那些不支持 JavaScript 的设备,尽量提供最好的体验。
  • 支持触摸屏输入和其他输入方法。
    . M- N* _' @0 `' \# N) g; _9 ojQuery Mobile 为不同输入方法和事件提供支持:触摸屏、鼠标和基于光标焦点的用户输入。
  • 可访问性" i: Z2 ]* Z4 P! Q
    jQuery Mobile 在设计时考虑了访问能力,它支持 Accessible Rich Internet Applications (WAI-ARIA),以帮助使用辅助技术的残障人士访问 Web 页面。
  • 轻量级和模块化6 T/ @# m. E* q, s
    该框架属于轻量级,拥有一个大小(版本 1.0.1 进行了缩小和压缩)为 24KB 的 JavaScript 库,7KB 的 CSS 以及一些图标。
  • 主题9 d; u: I- C$ t
    该框架还提供一个主题系统,允许您定义自己的应用程序样式。有了这个新的 ThemeRoller 应用程序,您就可以轻松地创建您自己的主题。( s. _3 M4 S/ C6 @1 F
jQuery Mobile 框架包括构建完整移动 Web 应用程序和网站所需的所有 UI 组件。页面、对话框、工具栏、不同类型的列表视图,各种表单元素和按钮等。jQuery Mobile 构建于 jQuery 内核之上,因此您可以访问关键设备,包括 HTML 和 XML 文档对象模型 (DOM) 的遍历操作;事件处理;使用 Ajax 服务器通信;以及 Web 页面的动画和图像效果。" f% ^+ Y5 s4 ~  e* M9 {2 y
有了 jQuery Mobile,您就可以轻而易举地编写基础 Web 应用程序。由于 jQuery Mobile 是一个非常全面的基础架构,提供了一些高级事件和 API,所以您还可以编写高级移动 Web 应用程序和网站。 9 `6 M$ Z6 Z3 d2 l0 D7 g
本文将介绍 jQuery Mobile 最新版本(版本 1.0.1)的基本原理。了解浏览器支持、UI 组件和 API。要跟随本文学习,您需要:
/ x! \/ Y0 n# K+ q7 x3 A0 @$ g
  • 之前接触过 HTML
  • 理解 JavaScript 基本原理
  • 了解 jQuery 基本知识
    8 _, i6 _4 g5 O+ s$ p; D
您可以 下载 本文所用的 jQuery Mobile 源代码示例。参考资料 提供了部分有关 jQuery Mobile、jQuery、JavaScript、DOM 和 HTML5  的信息。 ( l% F8 \- I% y  r$ t


( {7 A' i2 U* l+ n' v5 Q9 F" O
. W" i8 I6 ~* z1 V9 j浏览器支持
" f) }3 d7 o  l9 G移动设备浏览器经历了漫长的发展,但并非所有移动设备都支持 HTML5、CSS 3 和 JavaScript。这个领域是 jQuery Mobile 持续增强和支持全面兼容发挥作用的地方。
: e) K- f1 r1 J. N# l% }" ^jQuery Mobile 同时支持高端和低端设备,包括那些不支持 JavaScript 的设备。持续增强是一个设计理念,包含以下核心原则(来源:Wikipedia):$ e  C& m" y# t& n2 o# R1 c1 @
  • 所有浏览器都应该能够访问全部基础内容。
  • 所有浏览器都应该能够访问全部基础功能。
  • 增强的布局由外部链接的 CSS 提供。
  • 增强的行为由外部链接的 CSS 提供。
  • 终端用户浏览器偏好应受到重视。( F/ I0 k9 x. I2 F5 {$ T
所有基本内容应该(按照设计)在基础设备上进行渲染,而更高级的平台和浏览器将使用额外的、外部链接的 JavaScript 和 CSS 持续增强。
# a7 v* \6 ^. ?; M+ N jQuery Mobile 为大量移动设备提供支持。jQuery Mobile 将设备支持根据其支持级别分类或分组成 3 个类别:( {9 e: r) M" f8 ^% @
  • 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 和其他设备。
    6 ?" w8 Z! z& \2 ?; z- s6 ~* \5 J
参阅 参考资料 获取一个完整的 jQuery Mobile 支持平台列表。5 ]$ d1 n0 j' Q( t/ T& A
本文其余部分将描述 jQuery Mobile 页面构造、HTML5 数据属性和 UI 组件。
7 ?) t/ Y+ B: g
* f% ?6 y- D; f- F: }9 r2 Y7 C) B6 ^" A5 ~" q( W8 k
一个 jQuery Mobile 页面构造" m: f, y- |. X* P9 ?
清单 1 所示,一个典型的 jQuery Mobile 页面有 3 部分:页眉、内容和页脚部分。
& }3 s3 E/ o( q; L  k* ~5 u4 C
5 Y; A$ c6 Q/ ?清单 1. 典型的 jQuery Mobile 页面4 y( m3 u1 X1 \) h  T9 Z9 g! ^4 z  t
    <div data-role="page" id="page1">
: f+ K) I" ~/ a    <div data-role="header">
1 e' `/ P/ C3 u& }5 a9 D- s6 E       <h1>HEADER</h1>
0 w/ r' D1 o0 Z% g; n" Q. _    </div3 ]3 O$ }; u+ z# [
    <div data-role="content">
6 K9 {6 i$ i8 h5 F% f/ w4 I# _       <p>
. d% H8 B- C' L       CONTENT AREA% N9 G) z% T- v& V
       </p>7 K6 m8 V" C( q' D
    </div>6 h, S, W2 L; E; x1 S8 ]  _4 g
    <div data-role="footer">
! A& V8 Z' r2 I       <h1>FOOTER</h1>
$ ~- m9 R& n0 H" W# R" ^    </div>
& T6 R0 y9 n) Z+ f5 U1 Y
图 1 显示了 清单 1 结构。
2 g2 e3 M# Q$ |
2 Y* W- {7 _7 `0 Z' @图 1.  一个 HTML5 jQuery Mobile 页面结构
1 N6 `5 U' |% @( h
) q" ]7 Q) G4 y4 h7 [页眉部分通常放置页面标题和 logo 等信息。内容部分放置特定 Web 应用程序和各种小部件。页脚部分很适合导航。2 D4 ~* q/ \9 m% j6 R
要利用 jQuery Mobile 高级功能和 HTML 语法,jQuery Mobile HTML 文档必须定义 HTML5 文档类型。HTML 文档其余部分包括:( ~% {( c) g. g! W; }( K5 n
  • <head> 和 <body> 部分,其中 <head> 包含 jQuery Mobile 引用和 CSS 移动主题
  • <body> 部分包含 jQuery Mobile 内容
    1 c) m0 b3 O9 H) c* X" Y. {1 [" U! B) G
清单 2 显示 HTML5 jQuery Mobile 文档的一个示例。
) G7 `) ?% T5 ~- ~9 H, L6 G5 {% ~, s6 k1 q2 z( R8 F
清单 2. jQuery Mobile HTML5 页面结构
" Q4 _& O$ ^+ h- n5 b+ ^. D
  //Define the HTML5 doctype:3 d. j) C3 O/ h/ ?, F
! Z: M2 P. U! x9 x! Y
<!DOCTYPE html>
9 s9 }! ~7 S# F+ J+ a$ m
% c3 c- ^; d  ]" ?  N# o// Define the HTML5 <head> with references to jQuery, jQuery Mobile and CSS mobile themes:
. {9 v5 U( {: q; [- \/ p1 B, p  J- n* ^, {" D# ?+ j
<html>
) [/ y: w- q7 Z3 w
0 @: {# p& ?0 |9 n8 M<head>
1 @# r) M# g3 [" a8 B3 c) @* ?    <title>Page Title</title> * u: F4 O; G3 E+ }. r9 Y- f
        0 \0 N2 y0 \0 B7 n5 W: w# v7 j' F; W
    <meta name="viewport" content="width=device-width, initial-scale=1">
. g0 T  {: D3 ?5 k7 O( ?/ |1 ~: d
6 _) ^2 [$ `& C" K8 P: e% }5 G    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0-rc.1/' p7 R  f1 e% ]
jquery.mobile-1.1.0-rc.1.min.css" />
4 n, A/ U& w- i    <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
; {" C  N! Y7 V( z+ S    <script src="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.
! T, z4 {# O* fmin.js"></script>
8 g6 @5 F2 p- x+ i3 H  o! u</head>
7 S% v+ C0 S" T) V+ P' r. p
+ o% X6 o9 S* b4 |9 z( S! O1 X// Define the HTML document <body> that includes the jQuery Mobile elements:
4 _( E1 {, C2 e3 G& W# a4 b0 m2 f+ F* Z/ U$ y  I8 b. W
<body>
8 i: n# S2 ~% l- W0 k+ p8 |+ U9 f: U# E  S
<div data-role="page" id="page1">
2 m: W4 k+ H" M1 v! j% E* `7 E8 G$ [
, ^9 j& [, u9 f7 N( @    <div data-role="header">. c  b) }) z& c. g8 H2 u
       <h1>HEADER</h1>( w! j" e1 G: N. j( E
    </div>
* X8 o) q' c0 u# `$ T
* ?  P: J; u2 F5 M6 ?    <div data-role="content">, @* \, X% e- ^! ?
       <p>4 e8 O: q; o5 @- S/ ]; ^
       CONTENT AREA! i& U8 p: q( h# P  t- K# i
       </p>
+ S# t9 I' r' j# f* e' @, x- _4 r+ u! P0 _6 z* ?2 i
    </div>9 N. b3 i0 i& L3 F- T" @  J! b
4 o( {* v9 n, I4 ]8 _4 [
    <div data-role="footer">/ p0 o1 l4 z3 r6 x# `& o  H# y
       <h1>FOOTER</h1>
4 y4 p; W1 S  r    </div>; k; d5 `6 w. T& A! Z( \* }
</div>
5 G: {' d- \$ {' _8 P" Z# Y* d7 M1 J  n& ?2 {
<div data-role="page" id="page2">
6 E( X, Q4 p2 S1 Q7 {: M/ `:* m- r2 {8 F; W/ P2 L5 v9 q
:0 F6 G+ u6 p3 N7 k9 S. `, L+ P
</div>3 N% r: c  B' z/ @1 L# f+ f8 a
% z6 F! v% I9 Q6 k& h0 ]- N
</body>& Z( H$ b# ~. y; o' x
</html>
- B# ]9 t  v1 f+ v1 D6 n7 j% a, G+ V% _. c' q, K  }
// The footer can be turned into a navigation bar very easily, as follows:
; p2 U. ]$ G# }. E, J- |( J% N% B! y
/ r7 g) k9 U; b% l' \: Y<center>
' j; q4 O6 K6 k5 k8 E6 ^; s" H# E<div data-role="footer" class="ui-bar">' |/ H9 W" P9 N2 T" }# Z! [7 N
<div data-role="controlgroup" data-type="horizontal">: O, Y. y+ r# @' @. E5 `: g# O
<a href="index.html" data-role="button">One</a>$ f' M/ o# s' g' Z) m
<a href="index.html" data-role="button">Two</a>* c. x1 R; U1 S  r/ l  n9 I
<a href="index.html" data-role="button">Three</a>- q8 t1 o7 [1 \$ H& h8 G( E) D
<a href="index.html" data-role="button">None</a>5 a- \8 E# o) ^6 E4 c
</div>            5 \3 L: k! y" c
</div>
8 U$ M6 Z  `0 U  B</center>

7 a& R& @7 O0 k# I" J" D图 2 显示了在 清单 2 中创建的页脚。% Y! w/ I+ ?2 i2 Q

' w$ t0 a" s4 W2 Y; u/ b* ]4 z图 2. 页脚9 G* N8 N8 t# j9 {* }2 f
) P! p: U) E& E; g  v. g
尽管页面、页眉、内容和页脚属性是可选的,但是推荐您使用它们,它们可以使页面更加清晰,有利于遵循 jQuery Mobile。
4 h; e& [9 s0 f& F7 z0 Z单个页面、多个页面和页面链接% z3 z3 W. n4 ]! Z
单个 HTML 文档可以有一个或多个 jQuery Mobile 页面,正如 data-role="page" 属性所显示的。如果有多个页面,您必须为 id 属性指定一个惟一的页面 ID,用于链接外部页面。加载一个多页面 HTML 文档时,仅显示第一个页面。 0 Q  L; }. h. z) K5 X
jQuery Mobile 使用 Ajax 进行页面加载,此过程中显示加载进度条。如果加载成功,会增强该 UI 小部件,将页面添加到 DOM,并且应用于页面动画或过渡。7 D; f, w+ I( p6 ~
无需 Ajax 进行链接和 HTTP 加载。您不能使用这种方法或者动画过渡。无需 Ajax,就可以在链接上使用 rel="external"、data-ajax="false" 或 target 进行加载。
$ b; ~. f! X" ^& \. @4 z6 F

8 \: J& N) F' u3 e6 E2 X
& r0 b) l( T6 X9 w' d# Q8 e受支持的事件和方法' t% V9 U# [; g
在 JavaScript 中,使用 jQuery 时可以将 jQuery object 对象本身作为 $ 引用,同时获得 jQuery 设备访问权限。可扩展 jQuery 内核的 jQuery Mobile 框架可以通过使用 $.mobile 来访问,同时还可以提供特定于 jQuery Mobile 事件和方法的访问。$.mobile 公开的事件和方法,如下所述。4 ~* c# K, y$ O+ q- k
事件
2 G* A, Z, o% g# H, w, Q5 u4 ~! c8 o与其他 jQuery 事件一样,您可以将 live() 和 bind() 函数绑定到 jQuery Mobile 事件。例如,触摸事件包括 tap、taphold 和各种滑动 (swipe) 和虚拟鼠标事件。您可以绑定定向更改和滚动事件,比如 scrollstart 和 scrollstop。页面事件允许在以下时候接收通知:; f- e! A/ x+ d: c3 |
  • 页面创建之前
  • 页面创建时
  • 仅在页面显示或隐藏时
  • 页面显示或隐藏时- Z" u! ?( h  [0 Y* z
初始化 jQuery Mobile$ s5 P0 O/ n) Q* R. }% @
如果您对 jQuery 比较熟悉,可能还记得 DOM 一加载就会开始执行代码,您需要在 $(document).ready() 函数中进行初始化。有了 jQuery Mobile,就可以将初始化绑定到 pageinit 事件,如 清单 3 所示。+ }# e1 ^, ~: L6 J

9 I; Z; y2 p4 B2 j清单 3. 绑定到 pageint 事件
% N# h6 R0 W$ i
                             $( '#welcomePage' ).live( 'pageinit',function(event){ ... });
8 R, m. d( ]3 }& g
初始化页面之后,可以触发 pageinit 事件作为引用页面。不管以何种方式加载页面(直接加载或使用 Ajax 加载),页面都是有效的。; I2 N! b9 q5 X, A& O
覆盖 jQuery Mobile 默认值$ [6 s  V, z! P, H& U: ~/ P# ?2 m
如果已绑定到 mobileinit 事件,当执行 jQuery Mobile 时会触发该事件,您可以重写一些 jQuery Mobile 的默认值。清单 4 显示一个示例。您可以覆盖默认页面过渡、默认页面加载文本、默认页面加载主题,以及其他。
  x+ K" V2 x0 B6 x$ z( B, \5 D# V, a# O5 ^6 c' ~8 j
清单 4. 初始化 jQuery Mobile
4 d& h7 n* H5 u
$(document).bind("mobileinit", function(){   //apply overrides here });
/ \' t' }( w/ U2 [$ }& U
访问 jQuery Mobile 全局配置页面(参阅 参考资料),了解有关 jQuery 默认值的更多信息。
3 I2 ~4 O7 r8 U5 g- u. d方法
, t4 q7 ]( r% _% pjQuery Mobile 还提供很多具有 $.mobile 对象的方法。表 1 显示了其中一些可用的方法。
6 \) h  `) N: I, n( h$ r. J4 U! r8 h: d& f3 u
表 1. jQuery Mobile 方法
! s6 e0 F& ?9 w, q+ M. r" ]
方法使用
$.mobile.changePage以编程的方式从一个页面转到另一个页面。例如,通过滑块过渡转到 weblog.php 页面,使用 $.mobile.changePage("weblog.php", "slide")。
$.mobile.loadPage要加载一个外部页面,用 jQuery Mobile 对其进行增强,然后将其插入到 DOM。
$.mobile.showPageLoadingMsg显示页面加载消息。
$.mobile.hidePageLoadingMsg隐藏页面加载消息。
$.mobile.path.isSameDomain一个用于比较两个 URL 域的实用工具方法。
$.mobile.activePage当前视图中的一个页面引用

5 R* a! Q7 w( ?. w* e. _jQuery Mobile 方法页面有很多方法和实用工具(参阅 参考资料)。
( ~" ]; e+ b0 A. t, |9 P
1 H( G+ c+ u$ t/ i
5 V! B+ d8 U( k: A8 d* J
Widgets 和 HTML5 data-* 属性
: y" _, V* d9 e3 hjQuery Mobile 依赖 HTML5 data-* 属性来支持各种 UI 元素、过渡效果和页面构造。这些 HTML5 属性是 jQuery Mobile 简单性的关键。不支持 HTML5 的浏览器将会默默丢弃 HTML5 属性。1 I# W0 B7 w& H9 ]7 S* Z
下列列表将显示这些代码以及不同 UI 组件和 data-* 属性的渲染,以及如何使用它们来创建 UI 组件。* F5 `# c# L% {  V4 L
  • 页面、页眉、内容和页脚
    * D8 l) r1 q1 W+ g2 s8 p
      o+ d1 f5 q3 I清单 5. 页面、页眉、内容和页脚
  •   <div data-role="page" id="page1">
    1 ?! M% a. R, D2 ~    <div data-role="header">0 p" D$ h7 k% z: v0 `0 L& x% K; ^
           <h1>HEADER</h1>$ G1 @& A0 W; E  V0 {* w* l
        </div6 i- ^' T* A% F& {2 u' u' ?
        <div data-role="content">
    ; T) S, p. a, C       <p>
      e/ b! s9 M; M! d0 N6 t  \3 w& {       CONTENT AREA; ^0 R7 v4 z. {% Y
           </p>
    8 ^3 i# Q( p6 G. b. D    </div>
    . t# a( V) H/ L    <div data-role="footer">
    4 u! N: O$ n" q  ~1 w       <h1>FOOTER</h1>) x9 X$ }% \. V' d" v
        </div>
      Z" s5 L" o) d' j) B$ n# D3 C</div>
    - [# Y! ]& V' F
    " }% Y4 ]( b- X3 y( N. O7 l

    % A) y0 C  X- q; W6 x/ K: C4 R图 3. 页面、页眉、内容和页脚
    ) B# y# w# L& u0 W1 D
  • 基础按钮
    ; Y1 K( h2 D  ?- b/ }
    4 u7 [+ Q" @4 }! \2 d) z( v! l5 m
    & S; h- a, y- i清单 6. 基础按钮
  • <a href="index.html" data-role="button" data-icon="info">Button</a>

    4 T0 ^0 ^) I; g! W" k! l% E: ~$ g

    + q2 p$ {# q4 D. m
    2 o2 P/ [, k1 l. v6 n
    & D% _: v8 G5 j5 L5 ]% [1 w; ~图 4. 基础按钮4 |0 K8 }" u. Y+ b# m- G
  • 复选框 . ]. e) p' v1 d; g' W% t+ T4 q6 e
    - ?! p: c. o! q; ]2 x
    清单 7. 复选框
  • <input type="checkbox" name="checkbox-1" id="checkbox-0" class="custom" />
    1 D3 G" y! ^! x$ ^<label for="checkbox-0">Checkbox</label>

    - u3 T1 d' ^8 W) [8 e4 Q
    2 V. U* B9 M9 s3 M

    ; b4 ^  c+ k% l6 F( h: @0 ^" U- [图 5. 复选框
    & y! K% C1 |# R$ }' ~
  • 可折叠内容
    9 ?% P5 B0 q) D/ T& \/ @6 [
    $ q* S$ ]# J( [- E清单 8. 可折叠内容
  • <div data-role="collapsible">  r$ b$ R: A, A
       <h3>Header</h3>
    ) k% x9 V' l4 S4 v3 B0 R% |   <p>Paragraph...</p>7 I: i* y. _7 p' G, v  d+ }! h/ w* g
    2 e8 U9 L# ~  I7 j* D, `
    </div>

    * l4 V1 ^& l7 x* l' F4 z$ E) d+ y6 F
    $ b7 l1 u4 V7 n) Y
    / l! {/ l# N0 i1 p
    图 6. 可折叠内容
    / n3 l( @: N" [9 H" Q5 s  p
  • 使用过渡
    , y) \; W6 D3 z/ [+ T9 X) A% j% |8 [9 h4 F/ @- X5 ^! |- I
    清单 9.  打开一个对话框
  • <a href="dialog.html" data-rel="dialog" data-transition="pop">Open dialog</a>
    - l  r' n/ b4 V; f! g/ f7 R
    清单 9 中的代码是一个超链接,将使用一个 “弹出” 类型的过渡打开对话框小部件。图 7 举例说明一个对话框小部件示例。
    + A  X& w% z( [+ V0 Y* v
    / t" C, v  h. r: L
    & {. T* x8 m' c5 M7 z! @图 7. 打开一个对话框4 U+ w. k7 R: E. b! E  `
  • 翻转切换开关
    0 v/ [( m6 A  G; k! m+ g/ b& ]5 u- _7 s8 n
    清单 10. 翻转切换开关
  •                                                 ) T/ m+ \  B7 S, m
    <label for="flip-a">Select slider:</label>" Z3 L5 Z* v5 }9 s( d3 t- [- x
    <select name="slider" id="flip-a" data-role="slider">
    % t$ y+ a, [4 r) Y+ L: U$ }  Z1 _    <option value="off">Off</option>
    ' M8 V. ?7 [* z0 ^- b    <option value="on">On</option>9 q( n- O1 b. s# ]" e* y
    </select>
    1 `7 Z: v7 M" H$ D

    & m6 X' E) L# J8 S3 \# R; S
    ! \  }& ]& ?, J9 [0 p图 8. 翻转切换开关# a* y5 x5 f& M) H! m
  • 列表视图
    2 r! U, N, _) G4 o: f8 x2 h- R" M% |9 C2 f. k
    清单 11. 列表视图
  • <ul data-role="listview" data-theme="g"># U( _* H; l: H4 D
      <li><a href="Friends.html">Friends</a></li>1 R. l+ l# V2 c  k. e
      <li><a href="SendMessage.html">Send Message</a></li>
    & Y  J  x4 c; R  <li><a href="Share.html">Share</a></li>9 @' s8 f  r2 m% z! U$ d
    </ul>
    ' }; M1 ]1 q3 h2 q( k3 W, K3 Q+ ]
    6 \2 v6 J$ r2 J/ U; Y+ i: k1 ]

    $ p  d" Q) D' Z! R图 9. 列表视图; `$ f6 V8 O1 ~
  • 导航条 - E9 w+ `. L  n9 H: N7 H
    / ~" c% L5 C, F& l9 \
    清单 12. 导航条
  •    <div data-role="navbar">1 z7 X6 M  w: ]' f1 ^. h
       <ul>2 P$ `" V) n( T; j$ [$ t9 d% ~8 B
           <li><a href="a.html" class="ui-btn-active">One</a></li>
    ; G5 V/ X8 N8 S. z8 O, X  m       <li><a href="b.html">Two</a></li>* h4 }* I# Q# c
       </ul>" |+ }" j  q. P, M
    </div>

    ; J8 P. ^+ _. ?, z1 K" m8 H  B

    ; [' t1 r2 \- V1 k, k图 10. 导航条0 T' U: ]- X7 W' C
  • 单选按钮
    : G% g2 D: O. {) U* e2 W. O+ u' c0 h2 r
    清单 13. 单选按钮
  •                                                 4 f2 x; F$ J5 O/ C) M* j( g
    <fieldset data-role="controlgroup">* _+ J) P0 X; w2 c' z
        <legend>Choose a pet:</legend>
    ) P0 I# T& {) @. o* Z$ N, n        <input type="radio" name="radio-choice-1" id="radio-choice-1" 7 C" }8 m, `6 M3 n- _& v1 L
    value="choice-1" checked="checked" />
    ) j/ @* F5 R  J7 g; d: h        <label for="radio-choice-1">Cat</label>$ W  q; M9 l. U8 n
            <input type="radio" name="radio-choice-1" id="radio-choice-2" ( h) q5 H, k1 W
    value="choice-2"  />
    & l! X9 ^4 z* @" |, i4 C        <label for="radio-choice-2">Dog</label>
    9 ~6 X2 Q5 b0 Q  D! h        <input type="radio" name="radio-choice-1" id="radio-choice-3") S' t' t, k! T+ V
    value="choice-3"  />" N$ _$ q- K) C6 E
            <label for="radio-choice-3">Hamster</label>
    2 g0 F+ I8 p1 q9 P* y5 ^</fieldset>
    / E  r  d8 F/ s' ~7 V7 T# b
    ( b: i* ?5 r! l

    4 H/ G6 Z+ T9 ]' a0 q2 A" P; ^图 11. 单选按钮  g! _- g$ Y7 t/ [- G6 [
  • 选择(表单)
    * P. _/ t2 _3 Q8 X
    2 h+ b5 S# W& O+ X清单 14. 选择(表单)
  • <label for="select-choice-0" class="select">Shipping
    ' V% H! s9 C+ Smethod:</label>
    , Q. D0 R8 ^; k+ c7 ~4 C8 W<select name="select-choice-0" id="select-choice-1">+ @, X$ O. b+ ~3 ~
       <option value="standard">Standard: 7 day</option>" D, d6 ~" G- v) j" V- p& h2 x) m
       <option value="rush">Rush: 3 days</option>- c) t% w* E/ E' i$ y1 }
       <option value="express">Express: next day</option>: x9 ~5 U1 p: c% W
       <option value="overnight">Overnight</option>
    / w' E$ O. [" b" x</select>

    , j1 h( C( |% S' Z0 H7 x+ U

    ! \5 z3 M5 i8 ]9 v图 12. 选择(表单)
    8 p1 X6 a) v( _
  • 滑块
    3 z3 y8 w! H$ Y4 E# D: G4 h' ^/ N- G! p
    清单 15. 滑块
  • <label for="slider-0">Input slider:</label>
    $ u$ l5 Q5 L2 U<input type="range" name="slider" id="slider-0" value="60"
    5 I; ~- }6 W4 O: S9 _& t; vmin="0" max="100" />
    8 o/ V) A* c2 @7 W5 _( ~
    : d6 D( w& q( ^+ y" l9 T
    图 13. 滑块
    ( f6 A# h, `. G1 c1 o; {
  • 文本输入 5 V! M, M3 u' v
    3 H' u  y( f9 B2 N
    清单 16. 文本输入
  • <label for="basic">Text Input:</label>
    0 o5 {! S1 O0 b<input type="text" name="name" id="basic" value=""  />

    1 G5 P+ E3 t# a
    ' _: v' n  e+ ^5 K5 k
    图 14. 文本输入. i( O: K' s  ^) N
  • 文本区域
    . r( c* u0 W9 S6 \" h- x: U% l1 L- d3 S1 _- U6 X
    清单 17. 文本区域
  • <label for="textarea-a">Textarea:</label>! a: j* C4 Q( ^& r2 @/ J
    <textarea name="textarea" id="textarea-a">
    8 d: s2 g2 R) G+ V6 [Basic textarea.
    + J& W' f( B" B$ Y5 Q. G</textarea>
    / M$ b: K5 Y! A2 T; x, w3 I2 _
    ' e: z+ r, i! v3 G
    图 15. 文本区域 * q% t9 v) w1 [1 q) v# F/ h
  • 网格 ( x; |! R# A2 b. x. Q: f2 s
    8 M0 c' ?3 V/ b1 |* z5 P
    清单 18. 网格
  • <div class="ui-block-a">Block A</div>
    8 L, Q7 J: S2 X  Y1 y! e$ i<div class="ui-block-b">Block B</div>  p- O; m! ^6 v5 \
    <div class="ui-block-c">Block C</div>4 W' Y' ~$ r5 w+ z( ^5 R$ o* z6 p: \
    </div>
    ) w; u9 ~; o# ~
    注意:
    2 G( @' ?* m3 ^
    • 两列网格使用 ui-grid-a 类
    • 三列网格使用 ui-grid-b 类
    • 四列网格使用 ui-grid-c 类
    • 五列网格使用 ui-grid-d 类) L# c; ]6 s7 C' }5 c  d

    4 F* i6 n& e: s; \' y
    ( {: [7 T8 ~, j* ]图 16. 网格
    # Y& t: G6 G. N
    + T8 y& i; {/ K3 J6 u, C  B( m! F; f# i
data-role 属性是用于定义各种小部件。不是所有 UI 小部件都由 data-role 属性决定(不过选择、滑块和文本输入均是)。参阅 data- 属性参考资料以获取关于各种 data-* 属性的详细信息(参阅 参考资料)。
5 Q3 q, n6 ?9 r# L* ^- {7 j正如上面提到的,jQuery Mobile UI 框架包括构建完整的移动 Web 应用程序和网站(包括页面、对话框、工具栏、各种类型的视图列表、各种表单元素、按钮和其他内容)的所有 UI 组件。我们已经介绍了用于定义各种 jQuery Mobile UI 小部件的 HTML5 data-* 属性。本小节其余部分将讨论最常见的 jQuery Mobile UI 小部件。  [9 ?+ p% I/ ?! J! g6 u1 {! @' K
对话框
8 u+ f7 n7 f, p模态对话框是一个重要的页面类型,对于警报或向用户发送消息非常有用。任何页面都可以过渡成一个模态对话框,其方法为通过添加 data-rel="dialog" 属性到页面锚点链接,如下所示。  
( c( g. z0 s0 h) s# R3 |( X& u
<a href="tc.html" data-rel="dialog" data-transition="pop">Terms of Use</a>
" d) ?; e2 L1 r$ d
+ {$ z2 [1 v: H  i9 T9 h6 c% g
您可以将过渡和主题引用到该对话框。jQuery Mobile Dialog 页面拥有更多信息可供参考(参阅 参考资料)。3 V" f* r6 r, q0 J4 `: s
列表视图1 o7 e) w3 b8 c9 j8 B, t
列表视图是移动应用程序最重的 UI 元素之一。jQuery Mobile 提供一组丰富的列表视图元素,包括基础、嵌套、分割按钮、编号、计数泡泡和图标列表。我们来看看一些列表视图的代码和渲染。& ~9 `- T0 K8 A* d
  • 基础链列表
    # U9 d6 t; H0 y& D4 `. B) Z" [9 e" Z7 K% M) ^& Y
    清单 19. 基础链列表
  • <ul data-role="listview">   <li><a href="index.html">Acura</a></li> </ul>
    # o0 W* T: R; g- J4 e
    8 V( x8 t1 ?; R$ P8 c9 L
    图 17. 基础链列表
    ; x' n. j0 J. ~1 m; n- w
  • 嵌套列表 $ ~/ K7 j- N3 e

    6 E) m. n- I- ~7 d, A清单 20. 嵌套列表
  •   <ul data-role="listview" data-inset="true">
      u5 l5 ~0 F7 D8 e    <li>. s4 _2 s: t' V5 {& J! i5 r
          <a href="index.html">Get Friends</a>
    ! z& ^! U; N( f2 @    </li>
    8 y7 ?7 M5 ^9 ?2 w: v* r  i" j' ^    <li>
    : B2 Y1 c4 G  I      <a href="index.html">Post to Wall</a>
    - y9 f. ]' d" R/ {- C) F+ e% r    </li>
    ) R, B# G$ r8 m9 J0 a    <li>
    ; M" q3 E5 M. Z) Y/ W      <a href="index.html">Send Message</a>, }4 h( R& i* `6 d. {, b
        </li>+ ~/ _5 D! r3 a' g& y; z
    </ul>
    . u; c  I, B' P" ~# c

    / l" F# ^+ j! \7 x, V图 18. 嵌套列表
    0 [: j1 D3 o# [: I; c& t( R2 L
  • 有序列表
    ) s! D  [, b' H, ]7 K# j. W' P. H
    清单 21. 有序列表
  • <ol data-role="listview">
    0 N3 j4 ^0 X9 B" ^! G0 h& T; C  <li><a href="index.html">The Godfather</a></li>) x; `, a% m$ L
    </ol>

    - D/ e5 s( n  g5 g; g2 {. U
    / `" E/ C2 Z! i8 p/ |
    图 19. 有序列表9 e' e+ `! @! S& B' Y7 p$ L
  • 分割按钮列表 $ i& h, _# B! R
    + Z0 |8 O6 R+ N: m# S
    清单 22. 分割按钮列表
  • <ul data-role="listview" data-split-icon="gear" data-split-theme="d">$ D! X) `, v& I+ J$ {1 }, x0 e
      <li>
    # d5 X9 {1 F7 L- n    <a href="index.html">
    % }6 Z3 t% p. g$ H. U9 ^/ V+ |    <img src="images/album-ws.jpg" />5 n2 r- X9 q( k! K3 Y
        <h3>Elephant</h3>
    8 y: n' j' T6 J3 \" g  @' b$ M    <p>The White Stripes</p>( @- l$ C3 {  T7 ^! v
        </a><a href="lists-split-purchase.html" data-rel="dialog"
    % {7 [! l% F) i1 g- K3 z; u3 O6 Odata-transition="slideup">Purchase album</a>
    , T6 M( {* s9 S. s7 k- R2 T  </li>                       
    8 p1 C% T6 B. j</ul>

    3 X' r& N6 ^3 [8 @( q

    , Q: u3 S8 ~# K' F! Q; \4 i) v6 @图 20. 分割按钮列表# K: j0 A) n4 B: q

    0 I8 E' j; s, {4 T/ v: e. O
插图风格列表
. W4 m. K( u$ XjQuery Mobile 将支持所有这些列表视图作为插图风格列表(带圆角的列表),其方法为通过指定 data-insert 属性,如 图 21 所示。 ! ?, C# A( B2 }. H/ r' F% @
0 Y: l- y9 b. |, Z% s+ |# q
图 21. 插图风格列表
4 i9 u9 W& P% j$ s0 ~
, @2 C3 N- p& O5 f* ?$ X清单 23 显示插图风格列表代码
/ L) t' {1 x) X; z/ i( M4 X6 G+ O- g4 X
清单 23. 插图风格列表) ]! _4 a4 N- D. R# z# w, D+ a0 }( _! u
<ul data-role="listview" data-inset="true">
. m4 X; z. u# \" X* D    <li>
% F8 F2 K) O$ G1 _* b$ O1 `      <a href="index.html">Get Friends</a>
( N" f9 D" m3 d& B' g# E  i    </li>7 m- A: u+ \) a8 d% [1 m
    <li>5 ], C& B2 c: S/ M3 f' b7 J
      <a href="index.html">Post to Wall</a>
8 J% M; _" ~. B% J5 Y    </li>) y% w, T; f# d& ~: ~+ d( X- Q
    <li>
; b# c! ]$ @/ g& \7 x( j. A      <a href="index.html">Send Message</a>) R& m6 u) x! s% I
    </li>
0 i3 e$ q1 m# E4 w</ul>

* e) \0 d4 v! [3 ?2 {jQuery Mobile 提供一组丰富的列表视图。更多详细信息,请参见 jQuery Mobile 列表视图页面(参阅 参考资料)。
2 N* |6 v' g( b7 b$ P- D表单  z, U/ t: h* K7 m& Z5 T
表单是一种常见的 Web 构件,用于将信息发布到服务器。jQuery Mobile 支持许多表单 UI 组件:文本输入、搜索输入、滑块、翻转切换开关、单选按钮、复选框、选择菜单和主题表单。所有这些都很容易创建。上一小节 介绍了其中的大多数元素。7 G, J( z+ r8 R1 w% q
jQuery Mobile 提供一组丰富的列表视图。清单 24 显示一个带菜单按钮和提交按钮的表单。
% t8 O2 K  d; `# Z; t$ q( g- `4 l: e
( ~, }8 Z( C1 a3 L% r清单 24. 简单表单和提交按钮
' t5 y2 {: l6 h  p  w; u
                                ) E" @% ^, ^; W+ {# A
<form action="forms-results.php" method="get">   w8 k6 }& k  J9 \/ c) g
    <fieldset>
# ]5 M) T6 s- j- R. c        <div data-role="fieldcontain">6 Y4 C( u$ [5 ~1 W& y
            <label for="select-options" class="select">Choose
, {% x9 C; e7 R; U3 o" I9 \an option:</label>
- S# i' p, c  c            <select name="select-options" id="select-options">
( v- R. K2 \, e3 q8 W9 i3 Y& H                <option value="option1">Option 1</option>% A2 Y" l' M* S0 y, e
                <option value="option2">Option 2</option>
1 m% y" r5 h4 u% E/ W& x: j# n) g, v# s                <option value="option2">Option 3</option>1 U! x- f4 h# m& H& [3 u6 J3 Z0 `
            </select>
: M% b% J# e6 i7 a1 n4 M  U9 O+ ?        </div>& E! F1 d1 J* ]1 ?+ X7 R
        <button type="submit">Submit</button> ' e5 e, j3 U& T/ A3 b
    </fieldset>
* u" p5 b' m) Z% d# s</form>
0 [$ ~4 g# y, H6 y8 p0 X3 D
选择按钮是由本机 <select name="select-options" id="select-options"> 所定义的,但是 jQuery Mobile 改进了其外观。<div data-role="fieldcontain"> 语句对不同值进行了分组,便于清楚呈现。表单本身是通过本机 <form action="..." method="get"> 所定义的。
1 |0 E; U& A$ }( E( S图 22 显示 清单 24 中的结构.
+ \  n" K- Z8 c3 C  F" v8 \
3 a) d* |; ]( ^' f; J图 22. 带有选择菜单和提交按钮的简单表单5 N/ Z% ?: y3 i, s

  d/ y2 n4 e; \; f+ I5 v- }0 c/ njQuery Mobile 表单元素页面提供更多信息(参阅 参考资料)。
/ |+ E$ O+ V  f& h% {% h# [$ {

: U& g' a5 L* _/ U) U: X) f- {# `$ r7 j5 {; s( F
页面过渡: f1 A$ o  \5 I" w% @7 I) Y/ _
jQuery Mobile 支持许多非常酷的过渡,基于 CSS 的过渡,如 表 2 所示。这些过滤可以应用到对话框和页面中。
6 h' H* F$ c! j6 H, `5 |3 q
6 T. V  C( z0 [. A表 2. 基于 CSS 的过渡
. P& g6 J( T$ ?" g6 y
过渡使用
fade淡入/淡出过渡效果
pop泡泡过渡效果
flip翻转过渡效果
turn旋转过渡效果
flow流动(类似于滑动)过渡效果
slide滑动(水平)过渡效果
slideup显示从底部滑动到顶部的页面或对话框
slidedown显示从顶部滑动到底部的页面或对话框
none无过渡效果

% O' o6 g' E; x  O/ Q' F要强制执行一个特定动画,请将 data-transition 属性添加在链接上,如 清单 25 所示。
# C  w( O" u% y& F: Z' }
! W% t* j# l2 Y, Z5 ~  a; V清单 25. 添加 data-transition 属性
% o$ ]  u4 J, l& \
<a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog"" H! b. Q; h, s! i3 E+ w
data-transition="fade">Search</a>
! Q: C. Q% I+ v4 \2 P
过渡是硬件加速的,需要浏览器支持 3D 转换。不支持 3D 的浏览器将不能后退。$ Y2 T' p+ e8 p/ Y3 @0 F7 N# s3 z
jQuery Mobile 过渡页面显示活动中的过渡和其他相关信息(参阅 参考资料)。
  E/ H# @, C; ]% q6 B

  [6 R3 Y4 m: f2 Y  N( t& A$ ~( g( K7 Z" N: t$ D4 V
主题和 ThemeRoller
* O7 r( e+ b7 y& [3 Y有了 jQuery Mobile,您就可以使用 data-theme 属性来定制您自己应用程序的主题外观。jQuery Mobile 提供一个默认主题和 5 个附加样本,命名从 A 到 E,如 表 3 所示。
* S3 S1 R. y8 X4 Z8 Z
* O) ^8 H7 S. X: q- z: c表 3. 主题和样式
  z& `  |& Y1 e6 Y# P
主题样式
默认主题
样本 A
样本 B
样本 C
样本 D
样本 E
7 V3 t+ Q, w# G0 K6 V7 Q) {! O; b' [; F, K
您可以使用元素和按钮等单个元素作为主题。: v* x; ]3 k7 j$ j! \
拥有基于 ThemeRoller Web 的应用程序,如 图 23 所示,您就可以创建您自己的移动 Web 应用程序或者迷你网站的主题了。您也可以使用 ThemeRoller 构建自己的主题,下载自定义 CSS 文件,并在您的项目中使用。+ j: V: c, B9 m& D, B
( x6 z5 R; N; q+ d0 Y
图 23. ThemeRoller0 y; a1 z* e! w2 B4 v  x4 f/ Q
' M2 k( X$ Y6 L2 {! F* g. ^


! T. q5 ^/ I  ^5 p3 i! |
) ~' _; D& O% o2 b结束语
# k' d7 X" b: V在本文中,您了解了有关 jQuery Mobile 框架的基本概念。本文通过一个示例向您展示了如何使用基本页面、导航、工具栏、列表视图、表单控件和过渡效果。该框架提供了很多特性,包括一些用于高级应用程序的方法和事件。有了 jQuery Mobile,您还可以使用和定制小部件。希望本文可以激发您使用 jQuery Mobile 编写功能性移动 Web 应用程序 UI 的激情。
, l0 n, F6 T+ b; d; c* \9 p$ r; \0 `6 `# p1 H2 ?$ D

本帖子中包含更多资源

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

x
 楼主| 发表于 2013-2-17 20:10:34 | 显示全部楼层
本帖最后由 技术狂人 于 2013-2-17 20:21 编辑
; v" m: ]$ n( E6 F9 t% z5 E8 p! e$ i: `
9 @( }% N& H1 V9 ^, t下载0 X3 n; ^- E$ F( m; t3 o1 g
描述名字大小
8 v/ }9 |, X/ d6 y5 ]+ {' n
jQuery 插件源代码2KB9 }/ f% v6 w' `& J

; F9 M( d) ^9 q; A0 c, x& Q. c. g原文地址:http://www.ibm.com/developerwork ... leupdate/index.html

本帖子中包含更多资源

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

x
回复 支持 反对

使用道具 举报

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

使用道具 举报

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

使用道具 举报

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

本版积分规则

关闭

SCMLife推荐上一条 /4 下一条

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

GMT+8, 2018-6-23 18:09 , Processed in 0.115270 second(s), 10 queries , Gzip On, MemCache On.

Powered by SCMLife X3.4 Licensed

© 2001-2017 JoyShare.

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