SCMLife.com

 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,访问微社区

查看: 6599|回复: 3

[推荐] jQuery Mobile 入门简介

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

2 T+ `( U  S" t4 x5 `. o# z0 o

6 L, Q3 ]) ]: r+ Y3 f4 ~浏览器支持
) o3 _9 M4 z) n: V' f% W1 F1 V# c移动设备浏览器经历了漫长的发展,但并非所有移动设备都支持 HTML5、CSS 3 和 JavaScript。这个领域是 jQuery Mobile 持续增强和支持全面兼容发挥作用的地方。1 K+ _- }: F# g2 j; `
jQuery Mobile 同时支持高端和低端设备,包括那些不支持 JavaScript 的设备。持续增强是一个设计理念,包含以下核心原则(来源:Wikipedia):
: K% i* ~% W* o" X
  • 所有浏览器都应该能够访问全部基础内容。
  • 所有浏览器都应该能够访问全部基础功能。
  • 增强的布局由外部链接的 CSS 提供。
  • 增强的行为由外部链接的 CSS 提供。
  • 终端用户浏览器偏好应受到重视。7 L* m7 u" D5 z% a. R' s
所有基本内容应该(按照设计)在基础设备上进行渲染,而更高级的平台和浏览器将使用额外的、外部链接的 JavaScript 和 CSS 持续增强。
  D) g3 J2 v  i$ t) i: U; H" e0 b jQuery Mobile 为大量移动设备提供支持。jQuery Mobile 将设备支持根据其支持级别分类或分组成 3 个类别:
3 ~9 K8 X- w3 Z! K8 J
  • 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 和其他设备。
    ( m  U# {0 i" T2 k6 B! K4 w
参阅 参考资料 获取一个完整的 jQuery Mobile 支持平台列表。6 S2 a7 x. \, [
本文其余部分将描述 jQuery Mobile 页面构造、HTML5 数据属性和 UI 组件。
2 Q( g' d+ n* Z# \+ f! [7 o: N( L
: s9 n* ^# @+ S6 G* z
1 e4 g# ?3 t% ?1 W* d) d; g一个 jQuery Mobile 页面构造0 g' b" f8 ^- B8 e. {& w
清单 1 所示,一个典型的 jQuery Mobile 页面有 3 部分:页眉、内容和页脚部分。; Q  q7 Y- p5 [8 l0 {+ k6 V$ y: s$ ]

) t( a) I( ]) b% L2 }0 U清单 1. 典型的 jQuery Mobile 页面% a- \5 c9 ]4 C2 B/ n4 G
    <div data-role="page" id="page1"># z4 c. ?0 }" W8 C- |5 }! J, N
    <div data-role="header">% w$ B5 @# ]/ r! Z! L6 }: F7 g
       <h1>HEADER</h1>
. m5 I, J, q2 r% W3 N* W    </div
1 v! s, `8 z( m- n    <div data-role="content">
3 T, |- K, w% H4 V4 i       <p>  |' M" m, {, G0 n3 z
       CONTENT AREA
6 |0 D# O. v. e) Y8 W       </p>; A2 ]/ B; g' [7 L( L9 p
    </div>) ^" R0 o7 B% }/ V4 E- O
    <div data-role="footer">
1 ?& ~5 R& @( \9 ?2 m3 v$ e: K+ b7 Y       <h1>FOOTER</h1>
5 G8 z2 S% v& ~( W; k    </div>

' |" f6 |. S1 H0 D& s, N0 X图 1 显示了 清单 1 结构。
- e8 p' U* k$ T
9 |: C0 t( W; T! z- x) K图 1.  一个 HTML5 jQuery Mobile 页面结构
- Y8 G7 I+ [# v7 O2 @7 O  d$ B' j+ t# x1 i/ a
页眉部分通常放置页面标题和 logo 等信息。内容部分放置特定 Web 应用程序和各种小部件。页脚部分很适合导航。5 S4 y0 Q6 b' O9 e6 R% R% c5 s
要利用 jQuery Mobile 高级功能和 HTML 语法,jQuery Mobile HTML 文档必须定义 HTML5 文档类型。HTML 文档其余部分包括:
/ G2 M+ A( I4 V/ u, ~7 w2 P9 V- E+ v
  • <head> 和 <body> 部分,其中 <head> 包含 jQuery Mobile 引用和 CSS 移动主题
  • <body> 部分包含 jQuery Mobile 内容
    : F" E/ W. F9 u6 c( K
清单 2 显示 HTML5 jQuery Mobile 文档的一个示例。
4 Q; T, x: a% H% i5 ^. c( @
6 \1 @. e! c# y1 t# o. O0 e, m清单 2. jQuery Mobile HTML5 页面结构
  I' l  e8 _2 E+ R- p. i1 K
  //Define the HTML5 doctype:7 e5 u6 l# x7 E

: |4 ]# y" d- B1 W<!DOCTYPE html> ( i7 [/ D3 ]$ t# H9 e

- j$ [" d& m" H+ x" {// Define the HTML5 <head> with references to jQuery, jQuery Mobile and CSS mobile themes:
: N1 |. k* f! b0 g( q* `( }. Y3 w$ G0 `3 o
<html>
+ H( Q0 f% k0 w& u3 h
! o! a: i( B& O' M& Z" \<head>
! U4 L. Y1 ~3 t    <title>Page Title</title>
/ @% K1 m: z' Z$ O; o) L       
! ?: w, t/ ^1 v) c8 y    <meta name="viewport" content="width=device-width, initial-scale=1">
4 |" n0 I8 X* u' D; R8 Y( O9 Q6 o& a/ K, A# T
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0-rc.1/. r- b+ j- T. A3 ?: ]
jquery.mobile-1.1.0-rc.1.min.css" />" j5 J# I4 b, C8 }/ L8 v6 R( [
    <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>- {: S; ?# t; e& c0 H
    <script src="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.
1 g* C! L0 y+ u3 Bmin.js"></script>
' |) b( j1 M" R& |</head>
2 B) X2 v  O1 I! H
1 U# k0 [. a, E+ y6 r8 L// Define the HTML document <body> that includes the jQuery Mobile elements:
1 O1 e" [" F- Y( D# Z& `7 [4 o/ f! [; Y- Z
<body> ! Q! l4 c( c3 L& r
# C: d8 ^: K! `0 ~
<div data-role="page" id="page1">
8 F9 h$ ], w+ B# o5 `3 C0 u. k5 Q  u9 f. A& [
    <div data-role="header">
' l& c) y+ U0 D- w       <h1>HEADER</h1>
7 u6 y: o! g& R7 k4 @1 @! u- @    </div>
2 z4 Z  b% V0 B
1 u& Z7 M1 [6 p3 B% V    <div data-role="content">
$ Q2 N# {1 P2 o7 Q7 B* y       <p>
1 U7 |. V. @8 v: p       CONTENT AREA
6 o" V8 I$ g, R       </p>4 U* u4 ?1 E- Q. ]" D! e! f) ^! i. v
# ~3 R$ h( \7 L3 b, a' u% P2 ~: m' w
    </div>
- L* ^  r: z/ K5 p. k. h; S9 R
7 X; v0 v) B% e    <div data-role="footer"># ~5 f% `$ c% S3 W
       <h1>FOOTER</h1>2 Q; U7 `% \. ^5 ?
    </div>
: Q  A3 Q" P9 B9 b# A8 u</div>% g0 j8 f1 W$ `7 i
, y; N) {& s0 H# ?2 T
<div data-role="page" id="page2">
+ y- F9 o- C- M& f. ]8 g:
! z2 Z+ }; q8 t* B' s0 K:( `' h) ]( D: {  i" ]/ d9 t+ o
</div>' U0 U6 V5 _# X

3 w1 a% `* }3 K$ v: o</body>
6 Z8 \2 g8 s# d' a! E+ i</html>
9 k' O9 f5 d; j6 L) p* i+ p) c5 ]! O3 e" b  t' u. J
// The footer can be turned into a navigation bar very easily, as follows:" I8 `. f5 w$ O6 K" v- A  a

7 [8 L* w: R0 F+ k<center>$ D2 g9 B# t5 s4 ]
<div data-role="footer" class="ui-bar">
9 z- I6 D1 }7 P/ E<div data-role="controlgroup" data-type="horizontal">, ~3 Z5 Y: t7 _/ u4 Y  s6 b2 H
<a href="index.html" data-role="button">One</a>3 {4 ^: X. L' |/ i* K
<a href="index.html" data-role="button">Two</a>; Q4 m* i& e$ B! J8 J
<a href="index.html" data-role="button">Three</a>. w6 u+ d# L4 p  X  M
<a href="index.html" data-role="button">None</a>
! C% B- c3 V- t) Q1 q) @% X</div>            
' J6 C3 p( ?& \8 s; m* [) _/ q</div>
* Q0 N+ ?% ?  u1 k. Q/ {9 A* z</center>

: z3 r  g4 K+ y) j2 _图 2 显示了在 清单 2 中创建的页脚。
( ]( g# h/ Y! p6 c: x7 y7 s' Y$ z& H( |: [
图 2. 页脚
' T& o7 T9 l& E, w7 N! c. o9 o- @9 j: R5 d( ]- b' D
尽管页面、页眉、内容和页脚属性是可选的,但是推荐您使用它们,它们可以使页面更加清晰,有利于遵循 jQuery Mobile。
7 i3 v1 P7 }/ Z( z: Q单个页面、多个页面和页面链接9 k( n8 \: Q8 ^
单个 HTML 文档可以有一个或多个 jQuery Mobile 页面,正如 data-role="page" 属性所显示的。如果有多个页面,您必须为 id 属性指定一个惟一的页面 ID,用于链接外部页面。加载一个多页面 HTML 文档时,仅显示第一个页面。
4 E: E# R- [& d  q6 ?6 `jQuery Mobile 使用 Ajax 进行页面加载,此过程中显示加载进度条。如果加载成功,会增强该 UI 小部件,将页面添加到 DOM,并且应用于页面动画或过渡。
5 J5 D/ L; \0 \" E( i无需 Ajax 进行链接和 HTTP 加载。您不能使用这种方法或者动画过渡。无需 Ajax,就可以在链接上使用 rel="external"、data-ajax="false" 或 target 进行加载。
& i/ J5 @) @% b% I1 `- ^

4 B  k* @( w, a  p/ ?$ [( j3 _1 G4 p7 v4 W8 Q: r1 ?
受支持的事件和方法
6 p+ g- W% i) B1 R! Z9 R- [在 JavaScript 中,使用 jQuery 时可以将 jQuery object 对象本身作为 $ 引用,同时获得 jQuery 设备访问权限。可扩展 jQuery 内核的 jQuery Mobile 框架可以通过使用 $.mobile 来访问,同时还可以提供特定于 jQuery Mobile 事件和方法的访问。$.mobile 公开的事件和方法,如下所述。4 y; X2 c! W# D1 |0 i. w3 e: M
事件
( ~) g) @! J' \5 y- l* U- l. a与其他 jQuery 事件一样,您可以将 live() 和 bind() 函数绑定到 jQuery Mobile 事件。例如,触摸事件包括 tap、taphold 和各种滑动 (swipe) 和虚拟鼠标事件。您可以绑定定向更改和滚动事件,比如 scrollstart 和 scrollstop。页面事件允许在以下时候接收通知:5 F) M% G, j2 O4 E/ E0 }; [
  • 页面创建之前
  • 页面创建时
  • 仅在页面显示或隐藏时
  • 页面显示或隐藏时
    7 p3 |+ l7 W9 _7 d4 u
初始化 jQuery Mobile. F" F9 R  ^) v3 m$ e, }/ S
如果您对 jQuery 比较熟悉,可能还记得 DOM 一加载就会开始执行代码,您需要在 $(document).ready() 函数中进行初始化。有了 jQuery Mobile,就可以将初始化绑定到 pageinit 事件,如 清单 3 所示。, O# e2 Z: ^  Q* A- k

' K$ W+ o: Z+ l( ?9 S$ R8 @清单 3. 绑定到 pageint 事件
9 a% z- z# j% P* {3 \
                             $( '#welcomePage' ).live( 'pageinit',function(event){ ... });
8 Q- {% A. E6 I4 x: J/ o/ ^9 L
初始化页面之后,可以触发 pageinit 事件作为引用页面。不管以何种方式加载页面(直接加载或使用 Ajax 加载),页面都是有效的。
3 p- D0 j& p+ f, v+ e. j覆盖 jQuery Mobile 默认值5 `7 j- Y2 ^" }+ g* T
如果已绑定到 mobileinit 事件,当执行 jQuery Mobile 时会触发该事件,您可以重写一些 jQuery Mobile 的默认值。清单 4 显示一个示例。您可以覆盖默认页面过渡、默认页面加载文本、默认页面加载主题,以及其他。2 U8 M1 H8 z  D. N

, S" _& v% u! ~清单 4. 初始化 jQuery Mobile! U5 Q( u' y! t+ j
$(document).bind("mobileinit", function(){   //apply overrides here });
; U- H1 k  E. I+ _' Z
访问 jQuery Mobile 全局配置页面(参阅 参考资料),了解有关 jQuery 默认值的更多信息。/ u. p+ T0 F0 q2 M# X! Q' H
方法/ {% c; d5 H; |7 C  i' b; t( B
jQuery Mobile 还提供很多具有 $.mobile 对象的方法。表 1 显示了其中一些可用的方法。2 h7 [7 X( f9 V; a! O2 y

8 i- e6 {2 Z% T8 r, U4 y& i表 1. jQuery Mobile 方法
6 a0 E( ]' y* z, h1 N9 \
方法使用
$.mobile.changePage以编程的方式从一个页面转到另一个页面。例如,通过滑块过渡转到 weblog.php 页面,使用 $.mobile.changePage("weblog.php", "slide")。
$.mobile.loadPage要加载一个外部页面,用 jQuery Mobile 对其进行增强,然后将其插入到 DOM。
$.mobile.showPageLoadingMsg显示页面加载消息。
$.mobile.hidePageLoadingMsg隐藏页面加载消息。
$.mobile.path.isSameDomain一个用于比较两个 URL 域的实用工具方法。
$.mobile.activePage当前视图中的一个页面引用
# l6 |3 s: }+ s4 N* O! s" K
jQuery Mobile 方法页面有很多方法和实用工具(参阅 参考资料)。% {$ A1 z; t. N( F/ x

' j6 ~( t5 J! H& z* C6 M: p' t
; ?) z" ]- \/ S
Widgets 和 HTML5 data-* 属性0 p: f) D8 \+ y; _* P0 d# {$ h
jQuery Mobile 依赖 HTML5 data-* 属性来支持各种 UI 元素、过渡效果和页面构造。这些 HTML5 属性是 jQuery Mobile 简单性的关键。不支持 HTML5 的浏览器将会默默丢弃 HTML5 属性。
" ?5 P) ~; ]8 }! e9 v下列列表将显示这些代码以及不同 UI 组件和 data-* 属性的渲染,以及如何使用它们来创建 UI 组件。
, Y% |) ?; j7 ]% o! o. k/ _
  • 页面、页眉、内容和页脚
    0 S" A3 \, U- c: L: a& z4 R; K$ F/ c$ X  O, P' J
    清单 5. 页面、页眉、内容和页脚
  •   <div data-role="page" id="page1">
    + q5 q0 z+ P' a0 o; i8 S# |    <div data-role="header">
    ( R3 o; G* o5 h$ E       <h1>HEADER</h1>% E% G  M) ?2 B6 a4 W
        </div% T8 h0 s( {, j
        <div data-role="content"># Q1 N: o) F! L
           <p>
    , w4 C: p5 N* Z3 A* F       CONTENT AREA5 Y* ?% D' l4 o+ G; D# u0 g. x
           </p>: S; w0 n  n: D$ k3 X& K/ I  `
        </div>
    - w9 w' i) h" G8 d- d    <div data-role="footer">
    7 @, v3 y2 l6 Z) c  s; z       <h1>FOOTER</h1>
    9 c; X1 l1 b; b/ Y    </div>
    ) h9 X3 R. P' r) \: J% T: m$ R</div>
    $ x4 p- D# H  L' C& G
    7 x) e4 p* \# u- K* Y) @) z- }$ a% G

    : U3 X1 m9 C% y. N图 3. 页面、页眉、内容和页脚
    0 k8 G+ c, X$ L, ?8 P" u; Q
  • 基础按钮
    ! R/ l% O+ P$ y- ?8 J/ j/ P7 }. y8 k1 `- o3 l/ t
    : |8 _' @) ^- {5 M# T
    清单 6. 基础按钮
  • <a href="index.html" data-role="button" data-icon="info">Button</a>
    8 o/ {8 U! b8 Z3 r& d

      L; B' p! B, p0 e( J/ Q
    3 \7 B3 l1 J; B$ N' X- B+ f
    , z3 |1 d7 K8 S/ e% ^图 4. 基础按钮7 D# n; O9 Z, B
  • 复选框 2 T' e3 A$ _5 `, o2 f7 U* U

    : K4 z1 s& u! s  Q5 o, d清单 7. 复选框
  • <input type="checkbox" name="checkbox-1" id="checkbox-0" class="custom" />9 c# V5 Z9 K( }  ^
    <label for="checkbox-0">Checkbox</label>

    ) Z4 ?! H, ?9 s+ q1 \- A
    & F8 [7 u2 n- R% r  g* z
    : l/ v1 j& E* J/ N* ^
    图 5. 复选框# O/ y. y! d/ r6 v
  • 可折叠内容 , p2 `9 A5 y7 K( D; i, c( g

    , w( D% z8 t' o8 i% }清单 8. 可折叠内容
  • <div data-role="collapsible">
    3 t% q" z* ^, A$ t; M3 ^   <h3>Header</h3>
    . M% d5 h! s; C& J. w: k) i   <p>Paragraph...</p>
    . i7 K( K% t: J. L8 a
    ) X/ w; i2 r7 m6 x3 `  \</div>

    4 a; }1 T; t4 H) m3 X$ O

    6 g: i4 p% {: }( o: e+ n# p1 ?4 x* ]4 O6 \7 @0 i
    图 6. 可折叠内容" N5 X4 p( M* A5 c8 W
  • 使用过渡 - e7 F5 X( @( L( ~0 n1 D

    4 X3 B0 i( `; K3 e6 N清单 9.  打开一个对话框
  • <a href="dialog.html" data-rel="dialog" data-transition="pop">Open dialog</a>
    - O+ `/ j% Z, k: @) \
    清单 9 中的代码是一个超链接,将使用一个 “弹出” 类型的过渡打开对话框小部件。图 7 举例说明一个对话框小部件示例。 4 N& x) G6 p& y- P0 X% }/ P
    # o3 Q+ J8 g' W& g
    0 `* c' S( _, J1 a* C' Z6 X- {
    图 7. 打开一个对话框* o' ^- @! r- I3 Z& D
  • 翻转切换开关 2 M3 Y3 k7 `2 u* i: r' p
    ; o1 }4 q% G1 _. p
    清单 10. 翻转切换开关
  •                                                
    $ A3 Z- e0 n7 s+ d) m6 M8 i% j<label for="flip-a">Select slider:</label>
    5 ~' ?$ }( c. B3 S0 ]<select name="slider" id="flip-a" data-role="slider">
    * k$ ~8 F+ R% B, H5 X! n    <option value="off">Off</option>
    9 [; N/ G* h; _3 w0 ^6 L    <option value="on">On</option>
      m2 _& N" M  O* _# E</select>

    ! l2 n2 r8 U& w+ \$ S
    ( }4 \0 Q2 t0 |# u
    . y2 J) y8 T& x5 X) m' `
    图 8. 翻转切换开关/ |/ C" J# @& A6 O$ H/ l# a5 ]& {
  • 列表视图 4 g2 O5 n6 u8 V2 A# A' x/ f0 s
    5 ?$ X+ \+ T9 r8 i
    清单 11. 列表视图
  • <ul data-role="listview" data-theme="g">
    * L- x7 w! X+ r' q" i7 ]( Q  <li><a href="Friends.html">Friends</a></li>/ O, h1 d7 `9 E7 y
      <li><a href="SendMessage.html">Send Message</a></li>
    # Q& ]( b1 e7 ^! T9 G# t( G3 q  }  <li><a href="Share.html">Share</a></li>
    4 @8 e6 U. i  D+ P3 ~' W</ul>
    ) w8 S3 }2 G5 p" B& n# L. N

    " U  q2 I2 n% v' Z
    . w% I0 a" n5 d0 m7 n图 9. 列表视图, ?9 k  z6 \1 L2 _- ?, P! Z- Q
  • 导航条
    4 I# L- ]. F+ ~: z) e
    ( z# c, E) }6 b2 c4 L清单 12. 导航条
  •    <div data-role="navbar">
    / D1 K5 _6 I2 `% K  {, n   <ul>$ r' M; j6 p$ N; [9 F8 q" C
           <li><a href="a.html" class="ui-btn-active">One</a></li>- r8 ~( x2 y( ^; \/ h
           <li><a href="b.html">Two</a></li>
    ' F$ L9 ]! W, \8 c" ^1 P' B: A' M6 D) {   </ul>, [7 h2 p- ]# J
    </div>

      z' p+ u$ t/ y7 ~& W

    + Y- u6 B# C6 v; P" p图 10. 导航条" D3 }3 i  [! y" Y5 V
  • 单选按钮 $ C3 v: J0 l' u# Z$ F3 {( t+ m

    8 M7 Y  |, s3 D# |4 `' ], i清单 13. 单选按钮
  •                                                
    ' y4 j# G" L* _' V9 x" |<fieldset data-role="controlgroup">
    " v: {, g# S3 p4 W$ {: S    <legend>Choose a pet:</legend>
    7 ?+ o' Q8 |2 R9 ?3 x        <input type="radio" name="radio-choice-1" id="radio-choice-1"
    , Z6 X! ~: J4 S7 b* H& e" @value="choice-1" checked="checked" />
    - N7 ]7 Z+ Z" m1 l1 @9 G1 o+ s        <label for="radio-choice-1">Cat</label>
    2 D8 O/ H7 o8 W1 Z& L. ]2 A        <input type="radio" name="radio-choice-1" id="radio-choice-2"
    5 G. a( X" n* Z$ ~0 m/ L; Bvalue="choice-2"  />" s2 g3 w- ?& D$ B, X
            <label for="radio-choice-2">Dog</label>" F; l% x8 s9 S6 C4 T5 u+ k
            <input type="radio" name="radio-choice-1" id="radio-choice-3"& [1 l9 L& ?! ?  \
    value="choice-3"  />- P, n! g- {+ z1 A9 m
            <label for="radio-choice-3">Hamster</label>
    $ t6 E7 K/ w. c  W) g</fieldset>

    ; }" m! d& H6 K/ B) \$ u

    ; M& a* d. Y. ^+ Y! H" [
      V& k; d0 \  W" B+ L- i: q2 w" }图 11. 单选按钮
    1 Q! y; r( k& d$ @! L; m4 n; i
  • 选择(表单). q- K$ h& j2 P/ k' X
    $ ~& q8 P5 {/ D
    清单 14. 选择(表单)
  • <label for="select-choice-0" class="select">Shipping
    ' y4 \) B' l; C8 A5 U  Nmethod:</label>2 v5 _9 R9 G" R' x
    <select name="select-choice-0" id="select-choice-1">- {1 }6 y9 @/ P  [; T( `4 @
       <option value="standard">Standard: 7 day</option>9 l: p( ?, s" z: t4 B1 a
       <option value="rush">Rush: 3 days</option>4 M8 w( k% T3 {+ [  e/ W% p8 p- ~. _
       <option value="express">Express: next day</option>
    5 _' Q9 K. K# `2 v4 L5 j" b3 K" f   <option value="overnight">Overnight</option>
    3 {, \7 e+ Z& i</select>

      K' Q1 @  j2 \4 ]1 N
    - P1 l1 F& |3 K& J0 p% ?
    图 12. 选择(表单)
    " q  T* t' p+ O" M1 y
  • 滑块
    * x( h3 Q" I/ b6 i$ R) K& t' S1 v
    清单 15. 滑块
  • <label for="slider-0">Input slider:</label>; c1 i( X2 P$ U) `1 S8 d
    <input type="range" name="slider" id="slider-0" value="60" 4 k6 ~+ C. i: z
    min="0" max="100" />
    , j2 {0 H9 x, v( {9 k7 o) A
    - I; R( u; @" [2 q
    图 13. 滑块
    2 B, f# I+ U7 k& M8 D7 c
  • 文本输入
    7 C4 a. o2 H$ o% [$ h5 G  Y2 f4 X+ S7 S& I) v
    清单 16. 文本输入
  • <label for="basic">Text Input:</label>
    ) z- v1 ]" {; ]$ ?2 \<input type="text" name="name" id="basic" value=""  />
    ) x+ R& |, j, N# {: l# b1 @, `

    ; t7 }6 e6 h, h( o1 N& e! N图 14. 文本输入0 a% P- R( g' V' q9 P1 m( ~
  • 文本区域
    , d; H* e8 Q$ K0 t4 y
    * D0 F5 T. D$ E3 y- F清单 17. 文本区域
  • <label for="textarea-a">Textarea:</label>
    5 f" o1 c: E( j  A6 m5 w9 B1 o<textarea name="textarea" id="textarea-a">
    : G8 |* ]/ S2 {; Q; x; y* r- T6 ABasic textarea.
    8 y5 e, J1 Q3 ^* ]" f</textarea>
    4 x5 p- K' ?4 c& D

    6 }4 ?; ~  E: y7 ]$ m* z0 o图 15. 文本区域
    % N9 r- g% n/ i+ l5 w9 k9 E
  • 网格 ; m4 }# N: x* }2 m! g: v- T4 F/ ]

    # L. D8 U+ ]  W4 l- X: m清单 18. 网格
  • <div class="ui-block-a">Block A</div>% R3 m4 o4 r( J& r4 m
    <div class="ui-block-b">Block B</div>7 [& \! F  _0 l: x
    <div class="ui-block-c">Block C</div>, `1 ^+ p  R) w  C! j5 l
    </div>
    : `% j) p  E* L; l0 R
    注意:
    * P. U* x4 [% S7 N) j) ^5 b1 v
    • 两列网格使用 ui-grid-a 类
    • 三列网格使用 ui-grid-b 类
    • 四列网格使用 ui-grid-c 类
    • 五列网格使用 ui-grid-d 类9 t: f! }* C% I- M
    % ~3 j* N3 S' w/ r- F

    / F# \8 C8 H( O! v% T  W2 r图 16. 网格
    # G& K( H: }/ E0 q% E: K8 Z2 h% ?9 u4 I+ ^8 z

    + R- H$ [' L/ S* C( q: Z) ]: s  c+ S
data-role 属性是用于定义各种小部件。不是所有 UI 小部件都由 data-role 属性决定(不过选择、滑块和文本输入均是)。参阅 data- 属性参考资料以获取关于各种 data-* 属性的详细信息(参阅 参考资料)。8 M1 U( ]8 v8 W! k
正如上面提到的,jQuery Mobile UI 框架包括构建完整的移动 Web 应用程序和网站(包括页面、对话框、工具栏、各种类型的视图列表、各种表单元素、按钮和其他内容)的所有 UI 组件。我们已经介绍了用于定义各种 jQuery Mobile UI 小部件的 HTML5 data-* 属性。本小节其余部分将讨论最常见的 jQuery Mobile UI 小部件。( [& |8 e( S0 ?4 g+ i
对话框! L5 j( o, c2 S6 O: m8 x' Q. ?: M
模态对话框是一个重要的页面类型,对于警报或向用户发送消息非常有用。任何页面都可以过渡成一个模态对话框,其方法为通过添加 data-rel="dialog" 属性到页面锚点链接,如下所示。  
) V3 @( [6 a/ `7 e
<a href="tc.html" data-rel="dialog" data-transition="pop">Terms of Use</a>
, m; J3 m+ X% S

+ p2 p+ P6 Y4 d0 F: N5 ?您可以将过渡和主题引用到该对话框。jQuery Mobile Dialog 页面拥有更多信息可供参考(参阅 参考资料)。
" S4 @/ v- K# |$ W( d列表视图, Y8 b' d$ A: y" ^
列表视图是移动应用程序最重的 UI 元素之一。jQuery Mobile 提供一组丰富的列表视图元素,包括基础、嵌套、分割按钮、编号、计数泡泡和图标列表。我们来看看一些列表视图的代码和渲染。
, X3 }7 H8 b& G' K; J, K
  • 基础链列表
    : A+ `2 ?  b6 K) `8 p5 n; L" n+ N+ @$ R2 l  S
    清单 19. 基础链列表
  • <ul data-role="listview">   <li><a href="index.html">Acura</a></li> </ul>

    $ h1 Z. f5 `6 H8 K: Z
    2 L+ x2 J% C2 T7 ]# I1 v
    图 17. 基础链列表
    ) M! w5 `+ n8 I+ t1 q' {1 x9 e
  • 嵌套列表
    0 _  I0 Z9 [7 I5 M+ t" i6 X5 K8 a
    清单 20. 嵌套列表
  •   <ul data-role="listview" data-inset="true">
    7 b" [1 `  K* K+ t    <li>
    : S2 V# e! [! x5 K& _9 e+ S* {/ s3 r5 |      <a href="index.html">Get Friends</a>
    * N0 b) ~. U' T. v/ i! o3 M    </li>
    $ [1 g7 }7 D$ b5 K" P& ^$ f    <li>2 b( ^$ P2 v; P* ?5 _/ X! t; n
          <a href="index.html">Post to Wall</a>5 l9 C* V+ v; g7 a- o  r, a
        </li>3 C  ~: p, K+ ^0 ?! `. }( o) ]
        <li>
    $ y& k" f/ K0 u      <a href="index.html">Send Message</a>$ r/ i  |9 g. I7 r7 @" f& q  k
        </li>8 U" i# j! l% d( m9 U- Q, k  p% E) u
    </ul>

    5 m' ?1 o" G! B, J6 H9 e( r" l" z7 }

    + N2 Y  [4 _4 L  g5 X8 c4 p  J7 T图 18. 嵌套列表
    - `7 I" V( h  Z* v
  • 有序列表 , }. o) L5 I* i1 @: C& ?2 y) u

    * \+ r! U8 j$ L% V! d清单 21. 有序列表
  • <ol data-role="listview">
    5 P% Y: p; A2 e  <li><a href="index.html">The Godfather</a></li>
    0 ?, Z. o" a+ S5 {2 T</ol>
    4 F5 U/ G% w$ h: s3 h$ f2 e

    5 A* k: E9 \" Q3 y( b( f% v8 N图 19. 有序列表+ i6 ]/ \6 w) L9 r! i% A
  • 分割按钮列表
    ( y8 ]% t; P7 V- W8 \6 X+ h" m$ m9 }
    清单 22. 分割按钮列表
  • <ul data-role="listview" data-split-icon="gear" data-split-theme="d">
    ' S& I6 Y' Y1 A' e5 j* q  <li>
      v1 t6 \/ l& t& n4 b    <a href="index.html">0 q1 p) T$ M$ M0 H4 U, {; O
        <img src="images/album-ws.jpg" />0 d; h& _  ^' U. H1 K3 c) g
        <h3>Elephant</h3>+ v) ?$ s5 x" H. ^+ ^& p1 y" N
        <p>The White Stripes</p>
    . c9 Z7 T) x3 {0 U9 F    </a><a href="lists-split-purchase.html" data-rel="dialog" : G4 E+ ^  I7 a
    data-transition="slideup">Purchase album</a>  T+ [/ r: \' C# _5 n* x
      </li>                       
    7 H3 N: k/ X3 m5 x</ul>

    7 L% f  }( q$ A8 O# o5 |+ X
    ) v9 K! G: J' U
    图 20. 分割按钮列表
    ! k- X2 s$ S5 h5 |1 H+ o, S2 S8 R1 R- K+ R' ?+ s: C2 H( G
插图风格列表
5 S( a/ |  i# N" N. U' [4 H- i; kjQuery Mobile 将支持所有这些列表视图作为插图风格列表(带圆角的列表),其方法为通过指定 data-insert 属性,如 图 21 所示。 5 G' j+ `, k. e# m* u! [; c! n7 J% ?
  k; m) l  t, |; w
图 21. 插图风格列表; T1 P5 Y' i5 _& S0 }% {/ B
2 g$ F) n2 Z+ X5 d0 W
清单 23 显示插图风格列表代码8 }' M6 x9 h# H9 }! M
! H2 X+ h, w0 Q- B+ g0 x
清单 23. 插图风格列表6 _/ e1 d9 P! @6 B. h6 [
<ul data-role="listview" data-inset="true">6 N+ S( {% u) N+ M0 _
    <li>
* s$ j3 V: u( z7 V% C      <a href="index.html">Get Friends</a>
7 s% M& T# m0 K. p: X& H! I7 J0 X# @    </li>
% t3 g: q1 {& }0 P    <li>
$ _, ?4 w* F5 e      <a href="index.html">Post to Wall</a>
& Y8 k  [2 H2 x0 M% M- \( L0 {    </li>
& [  @. c3 _' w    <li>
: J8 |6 m* ]9 Q' L' m      <a href="index.html">Send Message</a>
) |0 X# {; T% h% P- W    </li>
0 J+ ?$ C* S8 O1 Y7 @" n</ul>

/ D) b. A+ D2 z2 l; y3 i. e& AjQuery Mobile 提供一组丰富的列表视图。更多详细信息,请参见 jQuery Mobile 列表视图页面(参阅 参考资料)。( c0 e) V$ a/ s% U" u
表单
8 F1 l  E% R5 J3 e表单是一种常见的 Web 构件,用于将信息发布到服务器。jQuery Mobile 支持许多表单 UI 组件:文本输入、搜索输入、滑块、翻转切换开关、单选按钮、复选框、选择菜单和主题表单。所有这些都很容易创建。上一小节 介绍了其中的大多数元素。4 P* i, ~8 w7 s( k/ h4 j. F
jQuery Mobile 提供一组丰富的列表视图。清单 24 显示一个带菜单按钮和提交按钮的表单。6 g" |; _& q' E1 @0 t. A

/ r5 k3 B' ]2 @, @清单 24. 简单表单和提交按钮
. g/ P; a; D* B3 {
                               
& c3 c& s) r5 P) ~: a. n6 }* Z" e<form action="forms-results.php" method="get">
- G" A: }/ Q# m2 e    <fieldset>
; I7 l- }# [& F8 N5 q8 z        <div data-role="fieldcontain">
3 J$ e. o) t8 C2 x% a: S            <label for="select-options" class="select">Choose
- G0 ]& Y+ p6 Y. P: Pan option:</label>
7 ?1 W$ U% Q* N  j. g; @; h# r            <select name="select-options" id="select-options">
! _: d% r9 w2 G7 e' n: ?                <option value="option1">Option 1</option>
# F) I: f/ H* M6 V1 t; n3 b/ ~                <option value="option2">Option 2</option>7 Q; W5 u* c' G# e  e+ |9 E3 \$ _6 b
                <option value="option2">Option 3</option>
4 C) T' C. D" e2 ~" H" v            </select>% Z& W1 b% _7 @5 b* P5 g4 v
        </div>
2 v1 s* P; a3 m1 w4 h1 Y, P9 U        <button type="submit">Submit</button> 5 l2 q: H9 ?3 u  [& |( ^* _
    </fieldset> ( ^) {& l$ q$ N$ @
</form>
: {' I# k1 B0 h/ b4 ~' X
选择按钮是由本机 <select name="select-options" id="select-options"> 所定义的,但是 jQuery Mobile 改进了其外观。<div data-role="fieldcontain"> 语句对不同值进行了分组,便于清楚呈现。表单本身是通过本机 <form action="..." method="get"> 所定义的。
/ Z; t9 G4 h0 J6 \% M图 22 显示 清单 24 中的结构.% r% a: K8 g0 t9 X8 K' v8 q$ l

) t& Z$ n8 U8 v, `图 22. 带有选择菜单和提交按钮的简单表单# J2 |# M7 X9 k' p' N. {1 }
* g# g; y; y" {! p: C1 q: B
jQuery Mobile 表单元素页面提供更多信息(参阅 参考资料)。
" p+ ~: P/ L$ y) j- I  V9 Q
1 K& t2 L# ?+ S* b6 V& p
& M0 u3 N# a3 \1 r; D
页面过渡
- u( t8 ~+ d6 T! ?, ?# r8 FjQuery Mobile 支持许多非常酷的过渡,基于 CSS 的过渡,如 表 2 所示。这些过滤可以应用到对话框和页面中。$ t: m! o6 y! R/ \
1 P% `8 S, S: ]8 v
表 2. 基于 CSS 的过渡0 p  x' l5 b5 V4 z6 e( S# l
过渡使用
fade淡入/淡出过渡效果
pop泡泡过渡效果
flip翻转过渡效果
turn旋转过渡效果
flow流动(类似于滑动)过渡效果
slide滑动(水平)过渡效果
slideup显示从底部滑动到顶部的页面或对话框
slidedown显示从顶部滑动到底部的页面或对话框
none无过渡效果
8 ]0 B& l3 F  Z5 O) |) R
要强制执行一个特定动画,请将 data-transition 属性添加在链接上,如 清单 25 所示。
6 _8 _1 ?( ^* I1 Y
, [& \8 E7 \9 r. R& @6 }+ P- x清单 25. 添加 data-transition 属性* D* s: s. c) j/ Z" v' A
<a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog"! ?+ q  P9 I& j! N3 {0 H& J
data-transition="fade">Search</a>

5 u0 x& F+ V5 f& O( |* J! t过渡是硬件加速的,需要浏览器支持 3D 转换。不支持 3D 的浏览器将不能后退。
8 m# [8 [9 Z% B( z3 n% V4 D* `jQuery Mobile 过渡页面显示活动中的过渡和其他相关信息(参阅 参考资料)。+ ^" {& ^: s5 G: G. D) F( M

" L3 w* M5 R4 K. C4 ^9 p! w9 U: W) x
1 k/ B( a8 p% P* J/ g% y% J. I% b
主题和 ThemeRoller2 e9 y0 B0 `; }2 W- b3 J6 {$ L! R
有了 jQuery Mobile,您就可以使用 data-theme 属性来定制您自己应用程序的主题外观。jQuery Mobile 提供一个默认主题和 5 个附加样本,命名从 A 到 E,如 表 3 所示。
+ }. p0 ]/ H! p0 z* a9 ?* I$ c
5 n+ H$ O* U# S% R" u表 3. 主题和样式. Z( k8 p: Y- y5 ?6 m! K
主题样式
默认主题
样本 A
样本 B
样本 C
样本 D
样本 E
# L- x, |6 H9 P4 I: q1 V
您可以使用元素和按钮等单个元素作为主题。; @, N- Z3 R# m1 ^
拥有基于 ThemeRoller Web 的应用程序,如 图 23 所示,您就可以创建您自己的移动 Web 应用程序或者迷你网站的主题了。您也可以使用 ThemeRoller 构建自己的主题,下载自定义 CSS 文件,并在您的项目中使用。
1 X/ i5 O& B# W. l( @% [4 p* Y% f" W5 U% p- r1 M, f
图 23. ThemeRoller
' H& I9 y% e2 O( U6 R& }3 c3 e+ o( [% M( G  |5 B" w. e

; Y0 M& n9 v- Q( h) @, @! E  k
/ Q6 n8 ~1 w4 S0 f0 G. W! Q, f
结束语. b) P/ _- F5 R$ l1 s5 q
在本文中,您了解了有关 jQuery Mobile 框架的基本概念。本文通过一个示例向您展示了如何使用基本页面、导航、工具栏、列表视图、表单控件和过渡效果。该框架提供了很多特性,包括一些用于高级应用程序的方法和事件。有了 jQuery Mobile,您还可以使用和定制小部件。希望本文可以激发您使用 jQuery Mobile 编写功能性移动 Web 应用程序 UI 的激情。
& L2 w& F! u, x" U
1 O* O( R; S  I: K, F

本帖子中包含更多资源

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

x
 楼主| 发表于 2013-2-17 20:10:34 | 显示全部楼层
本帖最后由 技术狂人 于 2013-2-17 20:21 编辑
8 E* x' S: `/ Z2 C, s) j4 Y1 y' y) w- X3 u2 J; i0 Y4 u
下载' f% o. o2 X, I! E( E* Q
描述名字大小
' V. h, p8 Q+ B& V6 r
jQuery 插件源代码2KB
% |3 u3 A& s6 W* E9 b

  ~( o( \" o( q& 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-9-20 07:15 , Processed in 0.118092 second(s), 10 queries , Gzip On, MemCache On.

Powered by SCMLife X3.4 Licensed

© 2001-2017 JoyShare.

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