SCMLife.com

 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,访问微社区

查看: 6925|回复: 3

[推荐] jQuery Mobile 入门简介

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

3 e2 B& V3 N1 E  t3 E, P! L! _3 [+ H9 |
浏览器支持6 d' I1 o% r2 m- a
移动设备浏览器经历了漫长的发展,但并非所有移动设备都支持 HTML5、CSS 3 和 JavaScript。这个领域是 jQuery Mobile 持续增强和支持全面兼容发挥作用的地方。
9 B2 f: q  S  V$ W. k0 {* FjQuery Mobile 同时支持高端和低端设备,包括那些不支持 JavaScript 的设备。持续增强是一个设计理念,包含以下核心原则(来源:Wikipedia):
- r$ ?. S/ t( Y( Y+ e6 [
  • 所有浏览器都应该能够访问全部基础内容。
  • 所有浏览器都应该能够访问全部基础功能。
  • 增强的布局由外部链接的 CSS 提供。
  • 增强的行为由外部链接的 CSS 提供。
  • 终端用户浏览器偏好应受到重视。* m1 L& |' M6 s6 y
所有基本内容应该(按照设计)在基础设备上进行渲染,而更高级的平台和浏览器将使用额外的、外部链接的 JavaScript 和 CSS 持续增强。* _" o: S% e/ P5 w2 t3 K
jQuery Mobile 为大量移动设备提供支持。jQuery Mobile 将设备支持根据其支持级别分类或分组成 3 个类别:- H% S+ l# x( {1 q" l2 U3 a: H
  • 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 和其他设备。
    ! X0 c1 g! g6 ?- K0 f
参阅 参考资料 获取一个完整的 jQuery Mobile 支持平台列表。
6 b/ W0 X& X" S" A本文其余部分将描述 jQuery Mobile 页面构造、HTML5 数据属性和 UI 组件。
7 R! p7 w! W6 G0 H6 [
! C+ a6 W$ x) _1 S' W9 k/ W
, ^9 x: H, k8 t1 T9 m( H一个 jQuery Mobile 页面构造9 y" X$ X6 i' V% c: B
清单 1 所示,一个典型的 jQuery Mobile 页面有 3 部分:页眉、内容和页脚部分。# z# R: U% L$ R, }# R
  c8 r/ X1 Q8 j' E- |. Z3 J2 ?
清单 1. 典型的 jQuery Mobile 页面! h+ b2 F! \8 s) l1 P
    <div data-role="page" id="page1">5 O+ E6 a6 v) X1 {, b/ r
    <div data-role="header">
( B' L! l* \9 U2 i       <h1>HEADER</h1>
7 F  G% c4 a) _0 Q* Y    </div
% l% v0 h) r! M" X; h0 l    <div data-role="content">
- D% x; Q5 e( b, s( h; _6 m       <p>; }4 q$ u- q5 d: g8 f
       CONTENT AREA- B+ `. O0 f+ {  M
       </p>
2 a8 Q* i+ Z* ^* a8 i2 J4 i; V    </div>1 H8 ]; J; _. M( Y. R) A- M4 s1 t
    <div data-role="footer">
. I1 h8 ~, _: j0 J2 H5 x       <h1>FOOTER</h1>2 F3 J1 n5 u- ^0 W
    </div>
# E& |  A) e' p0 z9 h8 Q
图 1 显示了 清单 1 结构。
7 p/ r% N5 l& l& g6 r/ e# o
4 I2 r" L+ H$ g3 g图 1.  一个 HTML5 jQuery Mobile 页面结构
! i' _& S/ L5 f! t
& f; e" N& I/ A' {: J2 Z3 j; E; k4 O页眉部分通常放置页面标题和 logo 等信息。内容部分放置特定 Web 应用程序和各种小部件。页脚部分很适合导航。$ ~% L4 u6 s; Y# W) u
要利用 jQuery Mobile 高级功能和 HTML 语法,jQuery Mobile HTML 文档必须定义 HTML5 文档类型。HTML 文档其余部分包括:
& p  g4 {, ?* V# }# @+ g7 x
  • <head> 和 <body> 部分,其中 <head> 包含 jQuery Mobile 引用和 CSS 移动主题
  • <body> 部分包含 jQuery Mobile 内容
    " ?) }5 m5 I# i: l
清单 2 显示 HTML5 jQuery Mobile 文档的一个示例。
7 Z8 L7 A9 |) p1 T6 w$ c7 A1 Q. s+ C. l* `( X
清单 2. jQuery Mobile HTML5 页面结构$ n& V+ T  [5 o7 E- v' w& H
  //Define the HTML5 doctype:
5 r2 l: X( A! F/ X  `' R6 j
3 k7 w8 |' `% \- |4 I<!DOCTYPE html>
! P5 {2 p2 Z2 y& P. r. k/ A  X3 s7 x3 Y0 p, M" S. H/ V
// Define the HTML5 <head> with references to jQuery, jQuery Mobile and CSS mobile themes:
% m! ~9 Z1 L0 k% w7 {
& e) u5 b5 _; j( ?. r; L<html> 8 u/ a5 B9 I. d" n
6 \: s# u. I' T! q) M
<head> . g, a7 |) {* T; C
    <title>Page Title</title>
- k1 Q4 j: g: @' D        * w) o* O. K$ v6 i4 s" F
    <meta name="viewport" content="width=device-width, initial-scale=1"> 9 Q% K- |2 t# m) j% s- M

4 z# A$ p  p6 b& M8 S% o7 `    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0-rc.1/
% c6 [# }* E+ D- O$ Vjquery.mobile-1.1.0-rc.1.min.css" />6 O1 U7 C: F9 U; [
    <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
8 J1 S2 F1 Y: L9 [+ l% F# b    <script src="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.
/ K( L7 B$ T$ h3 jmin.js"></script>1 ?' g. s( N& v+ ~- \, E
</head> ! z9 U, ^' ^0 P8 M$ Z) f; ~

4 `3 X3 l, d( v; _! _$ s// Define the HTML document <body> that includes the jQuery Mobile elements:+ h& ~' C6 I% G7 g

& `9 _) P0 J3 f<body> 8 i4 b5 I# y; n, s( L" N( ~7 _

. N% d% }8 y9 ~3 o0 Z! U0 k<div data-role="page" id="page1">
" _/ x" D, f3 Z- R- |+ d/ I4 K( K5 N/ t9 ?! ]- @6 |
    <div data-role="header">4 }: K/ C* j8 e& y: X
       <h1>HEADER</h1>
% S! P$ N4 f+ }: _5 ?9 n    </div>) @  F: [8 W1 f; u8 I5 k

1 ~% |" ]' w/ P0 ?; W2 l    <div data-role="content">, ~1 V3 S8 H( F& O
       <p>8 }, T/ |- c" b0 E8 r) ~
       CONTENT AREA
. u# T: U' e- I       </p>
8 C0 O" s  ~2 [& {! Y
" V- F; T* T; M7 H; c. L    </div>
$ K; ~: u: Y8 q; z
( O. e% K7 O! F9 W" M" S    <div data-role="footer">
+ q9 G6 B" m+ v$ E4 @7 @4 _1 P       <h1>FOOTER</h1>
8 p+ s+ f6 P8 {& ~    </div>' P2 b5 u& N: N  r' a
</div>
; f2 T( [3 P7 z; {& n" Y& E6 X& m/ t! q# v
<div data-role="page" id="page2">, K' ~1 z% c/ K) U
:& R. b5 p8 C: O% f' b
:
8 @( Y  R1 S. g. G</div>2 H( Q& r* ?( F7 s# G2 T' x

3 `& S2 z* x1 X2 Z5 q# U, N</body>1 i8 v: \" `1 Q/ ?
</html>
' b& @( U, x5 }2 E6 i( v, z" I! {5 q5 }! b
// The footer can be turned into a navigation bar very easily, as follows:
, E' q- f' [7 `' |5 [- W8 x! P4 L: _% ?( s, {' e
<center>
/ P: @* q* `5 y) X" q0 O<div data-role="footer" class="ui-bar">8 |. h; O9 w- P1 l& ?
<div data-role="controlgroup" data-type="horizontal">& G7 Q7 M. e; u% R9 \5 e0 H. ?: H4 n
<a href="index.html" data-role="button">One</a>
6 D( q. i0 H1 g<a href="index.html" data-role="button">Two</a>" J3 z1 `$ Y$ V; m2 j: C; A( A
<a href="index.html" data-role="button">Three</a>% h/ E* N. H4 n) k/ e: ^
<a href="index.html" data-role="button">None</a>
9 F2 ?, ]( Q- ~</div>            
3 B0 c  P# f/ s: l7 k# {: q</div>
8 ]- z/ N+ f" q. s7 ^2 @</center>

+ D+ j: n* T: C" @图 2 显示了在 清单 2 中创建的页脚。
, b; h! d( u4 T# T: B
" l& X9 r8 I" ?# ]' q图 2. 页脚
5 c$ l& f& q6 j$ y; E
* ~* D5 \) `% G  V尽管页面、页眉、内容和页脚属性是可选的,但是推荐您使用它们,它们可以使页面更加清晰,有利于遵循 jQuery Mobile。
4 s" {5 f; }7 E* ?单个页面、多个页面和页面链接
& l5 `. U# A" N: v4 S, k$ I单个 HTML 文档可以有一个或多个 jQuery Mobile 页面,正如 data-role="page" 属性所显示的。如果有多个页面,您必须为 id 属性指定一个惟一的页面 ID,用于链接外部页面。加载一个多页面 HTML 文档时,仅显示第一个页面。 1 L' t" ]' y# _* _) q
jQuery Mobile 使用 Ajax 进行页面加载,此过程中显示加载进度条。如果加载成功,会增强该 UI 小部件,将页面添加到 DOM,并且应用于页面动画或过渡。0 `3 P) R$ k) ?5 N% x2 C
无需 Ajax 进行链接和 HTTP 加载。您不能使用这种方法或者动画过渡。无需 Ajax,就可以在链接上使用 rel="external"、data-ajax="false" 或 target 进行加载。
: g3 B% @3 m+ l, \
! A; D4 R) C% n- N

" B% K5 D1 L4 z; C7 t# {9 q受支持的事件和方法
4 R# K3 P* F, m3 i% U3 c8 h在 JavaScript 中,使用 jQuery 时可以将 jQuery object 对象本身作为 $ 引用,同时获得 jQuery 设备访问权限。可扩展 jQuery 内核的 jQuery Mobile 框架可以通过使用 $.mobile 来访问,同时还可以提供特定于 jQuery Mobile 事件和方法的访问。$.mobile 公开的事件和方法,如下所述。/ r, ^& n7 K7 `6 n
事件
; Y2 r: v! E  u3 a' F. Q" o! @与其他 jQuery 事件一样,您可以将 live() 和 bind() 函数绑定到 jQuery Mobile 事件。例如,触摸事件包括 tap、taphold 和各种滑动 (swipe) 和虚拟鼠标事件。您可以绑定定向更改和滚动事件,比如 scrollstart 和 scrollstop。页面事件允许在以下时候接收通知:
0 h8 \' P4 q9 b
  • 页面创建之前
  • 页面创建时
  • 仅在页面显示或隐藏时
  • 页面显示或隐藏时8 n. K) W) p" t
初始化 jQuery Mobile
8 m- q7 {# R( m" L/ H如果您对 jQuery 比较熟悉,可能还记得 DOM 一加载就会开始执行代码,您需要在 $(document).ready() 函数中进行初始化。有了 jQuery Mobile,就可以将初始化绑定到 pageinit 事件,如 清单 3 所示。1 S& w4 b! D" U. v! B) x% h" @. i

- K6 n# x# Z! E清单 3. 绑定到 pageint 事件7 ?/ ]/ {& F2 t, M, v( b$ Y: g4 }. b
                             $( '#welcomePage' ).live( 'pageinit',function(event){ ... });

( N* O# c! i: M初始化页面之后,可以触发 pageinit 事件作为引用页面。不管以何种方式加载页面(直接加载或使用 Ajax 加载),页面都是有效的。
5 ~& d( G0 x; V- z$ R' \" D5 v覆盖 jQuery Mobile 默认值
$ q& x$ Q# s, T, c2 I4 n4 m# a如果已绑定到 mobileinit 事件,当执行 jQuery Mobile 时会触发该事件,您可以重写一些 jQuery Mobile 的默认值。清单 4 显示一个示例。您可以覆盖默认页面过渡、默认页面加载文本、默认页面加载主题,以及其他。% A+ D+ F: s& v2 e: h4 O# F; N
0 U% d$ b! y, g! V$ D  ~# ~  w+ i
清单 4. 初始化 jQuery Mobile
8 D: @3 b; Q- B9 O$ {
$(document).bind("mobileinit", function(){   //apply overrides here });

) {& u. Z8 R+ S访问 jQuery Mobile 全局配置页面(参阅 参考资料),了解有关 jQuery 默认值的更多信息。9 `. }) L+ R) S
方法# x& I; g' s2 [. D3 w
jQuery Mobile 还提供很多具有 $.mobile 对象的方法。表 1 显示了其中一些可用的方法。
# F. R$ z  w# C. d" B$ H0 s7 v. Z4 A/ G- j- m
表 1. jQuery Mobile 方法1 Q- |, Q0 }: |6 e5 T# A( _& h
方法使用
$.mobile.changePage以编程的方式从一个页面转到另一个页面。例如,通过滑块过渡转到 weblog.php 页面,使用 $.mobile.changePage("weblog.php", "slide")。
$.mobile.loadPage要加载一个外部页面,用 jQuery Mobile 对其进行增强,然后将其插入到 DOM。
$.mobile.showPageLoadingMsg显示页面加载消息。
$.mobile.hidePageLoadingMsg隐藏页面加载消息。
$.mobile.path.isSameDomain一个用于比较两个 URL 域的实用工具方法。
$.mobile.activePage当前视图中的一个页面引用

  g9 m9 q/ M; [% Y/ PjQuery Mobile 方法页面有很多方法和实用工具(参阅 参考资料)。
9 j$ X2 O5 A  w) x6 m

* }$ }  D* Y" D/ D* ?5 R% ~! c; [' V& e) j% ~( r/ ?7 X
Widgets 和 HTML5 data-* 属性, a* ?. b2 s# k6 b" p
jQuery Mobile 依赖 HTML5 data-* 属性来支持各种 UI 元素、过渡效果和页面构造。这些 HTML5 属性是 jQuery Mobile 简单性的关键。不支持 HTML5 的浏览器将会默默丢弃 HTML5 属性。
) w8 E. B6 G& i7 M) P; n下列列表将显示这些代码以及不同 UI 组件和 data-* 属性的渲染,以及如何使用它们来创建 UI 组件。
( X9 E# A9 R, e3 O: I  s7 i
  • 页面、页眉、内容和页脚
    1 K- ~1 F# v8 A$ k/ L! `
    5 Z% ]0 O  x% f8 k8 `2 R8 d清单 5. 页面、页眉、内容和页脚
  •   <div data-role="page" id="page1">
    ) t, Y1 @% N+ ^' ]+ n! U    <div data-role="header">+ i5 s* I5 p! X; p3 T
           <h1>HEADER</h1>
    / U% Z* o& k8 R    </div; i8 O0 l% S) |3 @* Z% l7 ^
        <div data-role="content">( q0 g: b" t! b% \! U
           <p>  v+ Q9 [; v" s% n; ?, c
           CONTENT AREA; }" [, e6 J& e. T5 s8 L# y, L
           </p>
    . \+ l9 B& g9 J4 o- n, @- a; m    </div>2 M7 `9 a* p9 V3 `4 _, U
        <div data-role="footer">( n( k2 r. d$ Z' w) a8 Q
           <h1>FOOTER</h1>
    ; u+ l- S; b2 }( `4 {6 @: E# \    </div>  ~1 ]5 F1 u1 ]$ n+ l5 i
    </div>

    : O* L& d! Y  O2 z1 u
    ! V- \4 ^9 p3 B' R

    " L* P# v1 ~# c' K% R图 3. 页面、页眉、内容和页脚5 q/ S$ ]; m' e, f
  • 基础按钮
    " l' o) W% `9 |1 @' ^% K: l' s0 C& x) q
    1 ^/ M! |+ [% \# L, {  V% B
    清单 6. 基础按钮
  • <a href="index.html" data-role="button" data-icon="info">Button</a>
    4 C7 v; O( Z" W7 M

    1 G; z' K7 i" X9 O. c; t# U- I1 |2 o; f! L9 I( Z5 z9 u) X+ N
    4 i4 C( k$ j- ?; J3 J% E
    图 4. 基础按钮5 y2 O; N* I* ^
  • 复选框
    4 x5 I* c8 C  ]2 r( z" ^8 E9 U4 \) z7 ?! x" v6 B
    清单 7. 复选框
  • <input type="checkbox" name="checkbox-1" id="checkbox-0" class="custom" />. r- c% f1 E- u' C% _# g
    <label for="checkbox-0">Checkbox</label>
    # }% z+ ?" \. f* w9 L
    ( v: E  w3 Y( }' s; e4 u
    $ g2 X2 @! _) P
    图 5. 复选框& [# J2 y3 I  B1 A4 z$ F& ~+ f
  • 可折叠内容
    , Q: ]+ E6 {" B: e4 _! K( z2 b$ L; b/ {/ A4 I0 F$ `; C9 ]
    清单 8. 可折叠内容
  • <div data-role="collapsible">, \( }1 S. a- l- R. s6 V
       <h3>Header</h3>
      v: ^+ `+ Y& m8 H/ J4 a   <p>Paragraph...</p>
    7 K- g. k, Z2 r% d5 g) B
    $ b* |  Z$ C/ o6 v7 G</div>
    * J/ H" C1 i, M1 X+ H! _/ e

      h0 b, k  Z' c+ k: h! h3 y8 ]6 T# \7 t% x0 S
    图 6. 可折叠内容. i9 Y" N" L+ G
  • 使用过渡
    . l4 N9 E; M6 Y( Z. T
    8 H9 \& l( k( G- M: z- m1 b& e1 m清单 9.  打开一个对话框
  • <a href="dialog.html" data-rel="dialog" data-transition="pop">Open dialog</a>

    ) a# d8 e3 h% E% D! ?( L* {
    清单 9 中的代码是一个超链接,将使用一个 “弹出” 类型的过渡打开对话框小部件。图 7 举例说明一个对话框小部件示例。
    3 V+ h( M" j3 t! F8 t1 H! {' K/ c* ~3 t4 K: v. o. R

    $ m+ J% j5 T3 [图 7. 打开一个对话框
    5 Z4 y, s. m8 ]8 @+ D' y
  • 翻转切换开关 - N# C( _! K# \4 n9 c% v3 N9 w1 b
    ; H+ x+ Y# }+ j9 k2 I" N$ k8 Z
    清单 10. 翻转切换开关
  •                                                
    $ i- u6 ?, |: [( J<label for="flip-a">Select slider:</label>
    7 y" A* U1 Q- d/ A; P3 P& ]: S<select name="slider" id="flip-a" data-role="slider">
    " e7 \6 ^* R) P/ q2 b4 x7 U' W% U    <option value="off">Off</option>" e5 }. k- V- E- _- W$ u
        <option value="on">On</option>- @2 z# F( P: @, {) {% ]1 e
    </select>
    + m0 R9 {9 [  M' K8 r, z; H

    9 c; q. E* k$ T1 E7 `+ n! k$ x
    % d  @/ [9 {2 [图 8. 翻转切换开关, W3 X) K( n8 ~" |$ O( V+ X
  • 列表视图
    + e* }  D- _, Q5 i) U* ^3 m9 L1 O6 ?% a& J
    清单 11. 列表视图
  • <ul data-role="listview" data-theme="g">
    6 T5 ?* R& s5 |2 `2 Z  <li><a href="Friends.html">Friends</a></li>
    2 a6 |9 f# n% q- C+ s7 o  <li><a href="SendMessage.html">Send Message</a></li>
    , B" B2 k8 n* S/ j$ {* [& |9 o; C  <li><a href="Share.html">Share</a></li>/ T5 i) J5 Y# y' x, V" b
    </ul>
    6 z# W: @2 F" N1 ?+ ?& V* F8 M& o- Y
    7 h8 X, W" b1 Q# [

    7 S- s: H8 P* @9 E图 9. 列表视图
    / H: v6 \  B& a4 H3 o  G8 o
  • 导航条   F4 Y  a! _" O9 P( v3 w

    * f/ p& y( ~4 f/ x清单 12. 导航条
  •    <div data-role="navbar">9 N  Z* |: U8 J
       <ul>1 I3 h* A8 m! b: U6 C. M* }
           <li><a href="a.html" class="ui-btn-active">One</a></li>
    1 @; a+ M! q4 H* e1 l# U5 D' R       <li><a href="b.html">Two</a></li>
    - T8 r' J2 k" M: p$ V- c+ j! ~/ S; |6 B' Q   </ul>; ]: ]  `1 H$ c9 S
    </div>

    % G6 B$ K3 C$ {% v, R% w

    & _; j4 G. p. r$ Q- d图 10. 导航条
    ( |/ J- E. f8 j0 B6 @! e
  • 单选按钮
    ; t% \$ y1 G6 o/ q$ _0 L1 a6 S1 F6 w0 t/ A8 Q0 [3 @  }
    清单 13. 单选按钮
  •                                                 0 \" s0 b9 {5 X1 C$ x0 V
    <fieldset data-role="controlgroup">
    . ~- k; L0 S$ L/ g9 L( V2 s    <legend>Choose a pet:</legend>/ o8 _2 @  W2 M( x3 R. u& s! ~
            <input type="radio" name="radio-choice-1" id="radio-choice-1"
    " ]7 Y8 P( r# _. O4 a  |  c2 y- wvalue="choice-1" checked="checked" />+ R% U; L' l  d
            <label for="radio-choice-1">Cat</label>
    & U# U  R* I  S0 ^! u7 A: `3 ]        <input type="radio" name="radio-choice-1" id="radio-choice-2" ! G  r4 I9 L+ m" [" A) {
    value="choice-2"  />
    % n1 M$ t7 [) S2 D% R; t2 S( K+ E        <label for="radio-choice-2">Dog</label>$ I7 f3 P' t+ J$ p: c/ z" A
            <input type="radio" name="radio-choice-1" id="radio-choice-3"
    1 ~; l1 h- O+ v0 _" Gvalue="choice-3"  />
    + t  y% i  p* ?0 @0 Z        <label for="radio-choice-3">Hamster</label>, r* i4 U" E" H5 ]5 I$ Y" E( u
    </fieldset>

    6 X% A, Z* D/ A1 A- U

    5 |7 R! D7 z/ {+ i  x: T
    2 w9 O' Y/ _& u% }8 R* w' a6 x图 11. 单选按钮9 O6 T! ^& {( p( V2 C4 G
  • 选择(表单)6 @9 R8 A# P$ e: L2 F

    . K- Z0 o, U' N' }$ G: S清单 14. 选择(表单)
  • <label for="select-choice-0" class="select">Shipping
    5 H5 ], w6 \4 I- emethod:</label>2 @$ u) ~, g3 A) W3 M; G# S. S* h
    <select name="select-choice-0" id="select-choice-1">4 ~8 Z# X6 s- N: C
       <option value="standard">Standard: 7 day</option>
    6 m# }( q- Y) X8 c3 s   <option value="rush">Rush: 3 days</option>. H7 Z$ v# R! s( v
       <option value="express">Express: next day</option>- U( v3 M$ F; T- B2 G/ a
       <option value="overnight">Overnight</option>  w6 {/ i  ~: v+ V5 L7 M3 O* \
    </select>

    % D' d* v! }) w

    - F: c' ^  O2 @  d; z图 12. 选择(表单)" l8 B$ y8 i+ D, T
  • 滑块
    $ C! t% R+ B6 J# g, Z! R
    : x- i; J* Z! h8 ?# }! d清单 15. 滑块
  • <label for="slider-0">Input slider:</label>
    6 c- _, D7 j* B8 P2 D<input type="range" name="slider" id="slider-0" value="60"
    , ^7 N9 Z4 u" G( Y* W  m7 Rmin="0" max="100" />
    ( J/ ]% d5 ~0 ^- g1 s, @
    % m9 A* |5 O  C
    图 13. 滑块
    ; H( z0 M$ W5 y6 \8 o
  • 文本输入
    ( R' k% J) @: V+ J# G& H: y' C7 I- _0 _( r: q: ]7 p
    清单 16. 文本输入
  • <label for="basic">Text Input:</label>! I8 c& b! y2 W8 z8 N; @- G+ I# X
    <input type="text" name="name" id="basic" value=""  />

    0 d5 K0 w5 P5 @; Z( M4 [2 ^6 x
    9 @# `! i! a# \
    图 14. 文本输入
    " \$ L$ u* Y7 _6 o
  • 文本区域
    $ U+ u5 \7 I0 a, H, ]: @7 `* y- F: [7 J- V
    清单 17. 文本区域
  • <label for="textarea-a">Textarea:</label>
    5 p$ r8 ~6 X& e! Z5 {<textarea name="textarea" id="textarea-a">
      e' B; F9 v) H6 ]+ p/ v; FBasic textarea.& |/ Y$ K- Y. I7 H$ k3 l7 ?( S8 A
    </textarea>
    5 a+ a# D/ W* l9 P; X

    ; I4 H+ ]& U# G& Y* H图 15. 文本区域 ) J: ?7 W* [' w0 i, y8 J
  • 网格 + v9 z- p9 w+ _1 T
    1 C2 }3 N- r' y  h: V' X
    清单 18. 网格
  • <div class="ui-block-a">Block A</div>
    $ d5 {3 M5 ]% K3 k4 Y9 ]; W<div class="ui-block-b">Block B</div>
    8 q% s5 T: m' L" w) T. y<div class="ui-block-c">Block C</div>( L+ d* N6 W* h7 w. e- j2 a* y
    </div>

    ( F) h6 c9 n% w) B+ f$ J% n
    注意:
    " R- X& b3 x; ^, a- Z, p
    • 两列网格使用 ui-grid-a 类
    • 三列网格使用 ui-grid-b 类
    • 四列网格使用 ui-grid-c 类
    • 五列网格使用 ui-grid-d 类; R8 d/ I8 A& z

    4 [" X' A0 v6 g
    & `7 Y- L$ J3 @0 a" ^图 16. 网格, w' @- l! @4 Z& w4 o8 e

    $ {3 c3 u6 ~. m* y
    4 k) J% J  n  Z7 y6 p! ?% e
data-role 属性是用于定义各种小部件。不是所有 UI 小部件都由 data-role 属性决定(不过选择、滑块和文本输入均是)。参阅 data- 属性参考资料以获取关于各种 data-* 属性的详细信息(参阅 参考资料)。
0 G5 h% a1 E4 r: c. Y/ J6 e正如上面提到的,jQuery Mobile UI 框架包括构建完整的移动 Web 应用程序和网站(包括页面、对话框、工具栏、各种类型的视图列表、各种表单元素、按钮和其他内容)的所有 UI 组件。我们已经介绍了用于定义各种 jQuery Mobile UI 小部件的 HTML5 data-* 属性。本小节其余部分将讨论最常见的 jQuery Mobile UI 小部件。
& H' a; H. G2 S1 S5 L7 {对话框
9 Z8 D: i7 i5 @! l% S2 l9 T模态对话框是一个重要的页面类型,对于警报或向用户发送消息非常有用。任何页面都可以过渡成一个模态对话框,其方法为通过添加 data-rel="dialog" 属性到页面锚点链接,如下所示。  
% r+ [$ j8 f0 }. U
<a href="tc.html" data-rel="dialog" data-transition="pop">Terms of Use</a>
: V& C# ^: J( v0 F! ^1 ?' k3 a. q

; a, K: Y0 q3 H# w0 y) D: @您可以将过渡和主题引用到该对话框。jQuery Mobile Dialog 页面拥有更多信息可供参考(参阅 参考资料)。/ S6 x4 w& Z1 a4 a
列表视图" s4 q8 e# P2 e3 Y& p% a
列表视图是移动应用程序最重的 UI 元素之一。jQuery Mobile 提供一组丰富的列表视图元素,包括基础、嵌套、分割按钮、编号、计数泡泡和图标列表。我们来看看一些列表视图的代码和渲染。( j, _- ]' N! R' q
  • 基础链列表
    0 w" f- x' V3 ]7 E
    4 R; z& j+ X" ^0 @- @5 q+ J. D/ p清单 19. 基础链列表
  • <ul data-role="listview">   <li><a href="index.html">Acura</a></li> </ul>

    : c3 i8 E+ K- i4 R/ ?
    ! W  n) u: T* \, S
    图 17. 基础链列表" P! C+ v8 Z( y3 u3 F$ a+ }% @
  • 嵌套列表 8 t/ \. i3 n8 O
    / j4 M; d$ m/ M
    清单 20. 嵌套列表
  •   <ul data-role="listview" data-inset="true">1 d4 {2 E+ Y$ B3 ^
        <li>
    % ^9 C  [6 A6 o1 P! }% z      <a href="index.html">Get Friends</a>3 m- \) d1 p8 z+ K- E' e
        </li>5 [# U# ~0 `- A) b& J8 @; U
        <li>
    ( M  `5 Z" h+ @) q0 h* c      <a href="index.html">Post to Wall</a>+ o2 w1 b# R4 r
        </li>
    , ?1 O' }, B- \, g' N% H    <li>* a* R6 _! T7 n
          <a href="index.html">Send Message</a>! _4 h  Z2 c  A* M' y
        </li>
    + Z% `" U' A, Q) H1 c. z: S# r0 E" M6 i% \</ul>

    ; \  I4 H9 Q* L; h& o
    ! y! ~3 N. D" m5 l5 Y
    图 18. 嵌套列表
    4 v2 n( R6 R7 s
  • 有序列表
    6 r* T* L" v7 I  M: J: w* F
    * K, t: {: G! m, H) Z清单 21. 有序列表
  • <ol data-role="listview">
    - ?3 f' i8 s% T+ s9 s& `4 s  <li><a href="index.html">The Godfather</a></li>
    / r% m1 G1 C. Z0 y" v9 e</ol>
    % H$ M" z% {; M* R/ n( p
    ; J: Q" p# t3 i; t
    图 19. 有序列表
    * A# b! b3 K0 S8 e3 q
  • 分割按钮列表 + o& ~/ m( g9 `/ k6 Y+ j
    # u' o( ?, C8 M9 S: x( b
    清单 22. 分割按钮列表
  • <ul data-role="listview" data-split-icon="gear" data-split-theme="d">7 h- X6 z+ s3 b. d3 F0 C( N
      <li>$ C7 \3 U1 j' G. Z
        <a href="index.html">
    2 S% f' ^2 M( }/ d" V. ]    <img src="images/album-ws.jpg" />
    ( m) p* i; `* Y! ]8 r    <h3>Elephant</h3>
    $ l0 ~$ F% L! o+ s' K    <p>The White Stripes</p>
    8 }1 s& D$ d) k0 p4 E( {- \1 n    </a><a href="lists-split-purchase.html" data-rel="dialog"
    ! r, |& Z: X0 H5 K. Y1 G- a/ V. idata-transition="slideup">Purchase album</a>
    " `* T+ l, ]* G6 y# ]! D# P. `0 q2 @  </li>                       
    0 i% q/ g" r2 z7 B</ul>
    / z4 V" |  }' G; n/ h, I6 K" S
    ( I: ]* v; C9 B( X9 O
    图 20. 分割按钮列表7 `1 {7 ~5 P# d

    2 Y0 L# Z$ [( T/ c2 f/ _  x% q
插图风格列表" S- L2 ~, a9 r9 s6 c
jQuery Mobile 将支持所有这些列表视图作为插图风格列表(带圆角的列表),其方法为通过指定 data-insert 属性,如 图 21 所示。 # z# f: H$ f" o8 w- U

0 Z7 R3 o$ E2 a# C3 B, p6 T& f/ |8 h图 21. 插图风格列表' W/ u. S2 ]+ s* T/ t
% e5 i2 k# N- y8 j1 R+ F/ A' Q( j+ u4 X, f
清单 23 显示插图风格列表代码
; S5 `9 G5 `5 n2 l- h. b; e0 _
2 x9 x0 k; u* l/ w$ `7 M清单 23. 插图风格列表1 c$ r/ e7 b  W- c. w( B
<ul data-role="listview" data-inset="true">8 z8 ]0 k9 ?8 Q/ w% U
    <li>& T5 S2 c" i/ _. h5 Q2 e/ M$ I
      <a href="index.html">Get Friends</a>
- z/ j& F6 j8 B- G$ ^% u    </li>
7 V3 J  y" r, W    <li>
/ p( L: O* C9 g- j! O  P5 q. V      <a href="index.html">Post to Wall</a>/ `) Y1 r( N. U1 y2 S, j
    </li>/ D6 R1 D5 I1 S. f' s9 H0 ~! F) B# [
    <li>6 n; b4 ?' i! N. F1 |) B+ r
      <a href="index.html">Send Message</a>$ O- l" E5 _1 C. r" a: s5 I- I
    </li>
  `- U% i8 y; @0 J9 p2 _</ul>

5 [+ [; L$ D; EjQuery Mobile 提供一组丰富的列表视图。更多详细信息,请参见 jQuery Mobile 列表视图页面(参阅 参考资料)。
5 p  Y0 x. M: V0 ^表单5 z. N2 T. f: W$ z
表单是一种常见的 Web 构件,用于将信息发布到服务器。jQuery Mobile 支持许多表单 UI 组件:文本输入、搜索输入、滑块、翻转切换开关、单选按钮、复选框、选择菜单和主题表单。所有这些都很容易创建。上一小节 介绍了其中的大多数元素。$ R* b2 }6 [5 ^9 [# k$ S' ^3 x
jQuery Mobile 提供一组丰富的列表视图。清单 24 显示一个带菜单按钮和提交按钮的表单。
; v5 u7 X: Z- }4 U/ U, b. o5 p+ |  O0 S: j- j( I
清单 24. 简单表单和提交按钮
! b+ _% K+ c2 V4 b# i: D
                               
' |8 f9 R& U$ W! R<form action="forms-results.php" method="get"> 1 u& S- P  b9 e) h
    <fieldset>
7 j8 b5 J5 C1 K' k& f* z        <div data-role="fieldcontain">
3 D( k7 ~8 f% d, v3 g- _            <label for="select-options" class="select">Choose
: u. k6 e& `" Z6 A: I; tan option:</label>  W5 z% q7 \, G
            <select name="select-options" id="select-options">8 c# |5 @2 _6 S' W6 b0 g1 y$ x0 a+ [
                <option value="option1">Option 1</option>
4 Q3 Z2 j& ~6 [7 D4 T0 {                <option value="option2">Option 2</option>
: Y/ }) p. D/ L9 d- P' V6 O                <option value="option2">Option 3</option>
, Z  I5 f0 q$ w: \  w, c            </select>
& O3 z5 Q) X3 {% Q        </div>
; j$ e/ j+ a0 b4 w9 V3 ~, Y+ B        <button type="submit">Submit</button>
5 x1 I  Q' }5 r2 F, u4 r5 s    </fieldset>
; q6 H. S/ |* P$ ^( r( D: f' U</form>

" [9 d$ S) l9 Y4 y0 U' Z: S5 W选择按钮是由本机 <select name="select-options" id="select-options"> 所定义的,但是 jQuery Mobile 改进了其外观。<div data-role="fieldcontain"> 语句对不同值进行了分组,便于清楚呈现。表单本身是通过本机 <form action="..." method="get"> 所定义的。
( j1 M: u4 p. o0 {/ t" y图 22 显示 清单 24 中的结构.
) Q2 v+ J4 g4 X7 e" R+ ?2 ~# o! ?) i2 O0 c' ]& s- H" }/ W8 f2 V0 P
图 22. 带有选择菜单和提交按钮的简单表单: I* `" S' _4 |1 X
, t  c) H, A  U1 E$ b4 F8 P8 q, `
jQuery Mobile 表单元素页面提供更多信息(参阅 参考资料)。
+ s4 O0 e' `! A) f, O

- o8 ?$ c7 B6 q( U
/ Y+ ~/ ^: @- R3 f页面过渡
/ i) ~9 `: R# u/ v' g5 o& mjQuery Mobile 支持许多非常酷的过渡,基于 CSS 的过渡,如 表 2 所示。这些过滤可以应用到对话框和页面中。; w# L' q  E* g7 G' E' E
. J) K$ V/ p9 v' f# J/ w6 V" U4 E, ?4 \
表 2. 基于 CSS 的过渡$ J: B$ w) M* b0 E, p2 V! ]
过渡使用
fade淡入/淡出过渡效果
pop泡泡过渡效果
flip翻转过渡效果
turn旋转过渡效果
flow流动(类似于滑动)过渡效果
slide滑动(水平)过渡效果
slideup显示从底部滑动到顶部的页面或对话框
slidedown显示从顶部滑动到底部的页面或对话框
none无过渡效果

8 N( Q# `5 _( D" `要强制执行一个特定动画,请将 data-transition 属性添加在链接上,如 清单 25 所示。8 Y1 g; ]8 o: E
. h! M& t4 p* C2 K  j
清单 25. 添加 data-transition 属性
5 c4 J) `* I# U! ^, X" u
<a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog"- M  i. p/ ~. c& c. T9 {" I5 ?5 ^
data-transition="fade">Search</a>
! @# N: w4 t+ m
过渡是硬件加速的,需要浏览器支持 3D 转换。不支持 3D 的浏览器将不能后退。
9 j& R  m+ s: o% v+ a. l4 F; IjQuery Mobile 过渡页面显示活动中的过渡和其他相关信息(参阅 参考资料)。7 u' Z+ q9 z' i) e

; l. F0 g3 Q' a2 q* C( X5 `  o
0 F. S2 O7 `- r) V
主题和 ThemeRoller
& R$ w8 E8 f( v有了 jQuery Mobile,您就可以使用 data-theme 属性来定制您自己应用程序的主题外观。jQuery Mobile 提供一个默认主题和 5 个附加样本,命名从 A 到 E,如 表 3 所示。; a, w8 j1 F" N$ f

" X) {" n9 U7 Y6 M0 f4 W6 ?. `6 t3 u  x表 3. 主题和样式
  ?6 N6 _- |8 O
主题样式
默认主题
样本 A
样本 B
样本 C
样本 D
样本 E

* i& ]. }) i. u您可以使用元素和按钮等单个元素作为主题。3 H( A/ M6 ~; O% s0 v( R3 M" p
拥有基于 ThemeRoller Web 的应用程序,如 图 23 所示,您就可以创建您自己的移动 Web 应用程序或者迷你网站的主题了。您也可以使用 ThemeRoller 构建自己的主题,下载自定义 CSS 文件,并在您的项目中使用。
1 H1 c3 I+ J1 r3 H
. A5 D( g8 _, Z5 v; C3 a/ y8 g图 23. ThemeRoller
! ~1 ?/ C' n8 C# G: `9 o9 b% g$ Q

+ M7 @+ V: D3 v" Q9 _8 \
  Y# |% v! M5 C- C
结束语' @) d* |/ C- g1 f7 ^
在本文中,您了解了有关 jQuery Mobile 框架的基本概念。本文通过一个示例向您展示了如何使用基本页面、导航、工具栏、列表视图、表单控件和过渡效果。该框架提供了很多特性,包括一些用于高级应用程序的方法和事件。有了 jQuery Mobile,您还可以使用和定制小部件。希望本文可以激发您使用 jQuery Mobile 编写功能性移动 Web 应用程序 UI 的激情。  k8 ^) g" j6 Q' _5 J5 j
/ Z/ E/ f9 A; N& S: U) Z

本帖子中包含更多资源

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

x
 楼主| 发表于 2013-2-17 20:10:34 | 显示全部楼层
本帖最后由 技术狂人 于 2013-2-17 20:21 编辑
+ S) I3 J6 p, o. f1 z( [8 T
8 N2 C, u8 q  r0 Z* D! K# F下载
* o* D3 U! ?! i! E
描述名字大小
! z" r1 @9 i8 C, @5 g
jQuery 插件源代码2KB
1 m, e5 I  F/ ?6 m1 c! i

9 D% E" u$ I! V2 ^原文地址: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-12-11 22:47 , Processed in 0.084586 second(s), 10 queries , Gzip On, MemCache On.

Powered by SCMLife X3.4 Licensed

© 2001-2017 JoyShare.

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