Jquery mobile介绍 Intro to Jquery Mobile

Jquery mobile介绍 Jquery Mobile Overview

Jquery Mobile的策略可以很容易的概括：创建一个顶级的javascript库，在不同的智能手机和桌面电脑的web浏览器上,形成统一的用户ui.

要达到这个目标最关键的就是通过Jquery Mobile解决移动平台的多样性。我们一直致力于使Jquery支持所有的性能足够的和在市场占有一定份额的移动设备浏览器.所以 我们将手机网页浏览器和桌面浏览器的Jquery开发做同等重要的对待。

为了使设备设备浏览器能够广泛地支持，应用Jquery Mobile的项目的所有页面都必须是干净的系统化的html页面，来保证良好的兼容性， 在这些设备中 解析css和javascript的过程中，Jquery Mobile应用渐进增强技术将语义化的页面转化成富媒体的浏览体验。而可访问性的问题，比如WAI-ARIA，已经通过通过框架已经紧密集成进来，以给屏幕阅读器或者其他辅助设备（主要指手持设备）提供支持。

本手册由 七月，前端攻城师 整理编辑


Jquery mobile介绍 Intro to Jquery Mobile

关键特性： Key features:

1构建于Jquery的核心之上。使之兼容于jq的语法，对于开发人员有最易的开发曲线

2兼容于所有的主流移动设备:iOS, Android, Blackberry, Palm WebOS, Nokia/Symbian, Windows Mobile, bada, MeeGo .

3轻量级 压缩后只12k，对图片的依赖程度非常低，保证了速度

4页面和行为均基于html5标记的驱动进行配，开发效率高，对脚本的需求小

5渐进增强使所有的移动设备，平板电脑和pc电脑都支持核心的内容和方法。而对于新的移动平台，则可以展现像安装在设备中的应用程序一样出色的富媒体和交互的浏览体验

6自动初始化 通过页面的html标签的data-role 属性，Jquery Mobile可以自动初始化相应的插件

7优秀的可访问性 一些特性比如WAI-ARIA 也包含在内，以确保页面也可以在一些屏幕阅读器(比如苹果的VoiceOver)或者其他手持设备中正常工作.

8新的事件增加了触摸屏设备支持的触摸，鼠标，和基于光标的输入方法的API

9增加了本地控制的优化触摸体验和主题样式的新的插件

9强大的主题样式框和主题编辑器能很容易的进行高度个性化和品牌化的的界面定制


Jquery mobile介绍 Intro to Jquery Mobile

可访问性 Accessibility

Jquery Mobile 是基于标准的，系统化的html构建的，使得页面能够在最广范围的设备上得到支持。对于A级的浏览器，许多Jquery Mobile组件，比"焦点管理","键盘导航"等都能支持，其他可以详细参加W3C的WAI-ARIA说明.

通过运用这些技术，我致力于使得通过Jquery Mobile开发的web产品拥有最好的可访问性，对于伤残人士，例如盲人，也可以用读屏软件，例如iphone的voiceover,使用。

我们现在正在改进可访问性，我们的目标是在1.0版本的时候，使Jquery mobile的所有控件都拥有全部的可访问性。


Jquery mobile介绍 Intro to Jquery Mobile

a4版本支持的平台 Supported platforms in Alpha 4

在A4版本中，以下平台和浏览器会支持全部的功能，页面的渲染也是无误的。现在WP7也支持了
• Apple iOS (3.1-4.2): iPhone, iPod Touch, iPad测试通过
• Android (1.6-2.3): 所有设备均支持，在HTC Incredible, Motorola Droid, Google G1 and Nook Color测试通过
• Blackberry 6: 触摸操作和样式已测试通过
• Windows Phone 7: HTC手机上已通过
• Palm WebOS (1.4): tested on Pre, Pixi
• Opera Mobile (10.1): 安卓
• Opera Mini (5.02): iOS, 安卓
• Firefox Mobile (beta): 安卓


关于

Jquery mobile是由（MT）Media Temple联合多家移动设备厂商以及软件企业共同发起的的针对触屏智能 手机与平板电脑的website以及在线应用的前端开发框架。
Jquery mobile构建于Jquery 以及 Jquery UI类库之上，为前端开发人员提供了一个兼容所有主流移动设备平台的统一UI接口系统。拥有出色的弹性，轻量化以及渐进增强特性与可访问性。
目前Jquery Mobile的最新版本为alpha 4.1,2011年4月初发布

主要的更新：

现在已经支持IE7,8,9：之前的版本并不支持IE7,8,9.现经过测试，页面已可以在IE7,8,9打开，但是样式与动画仍然不能很好的支持。
支持Windows Phone 7
滚动定位bug已修复：在IOS的浏览器上之前的版本并不能记录页面的滚动位置，现已修复。
点击事件BUG修复:之前的版本在某些情况下如果点击屏幕过快，会产生 touch 和 click2次点击事件。现已修复。

Jquery Mobile项目的目标与战略：

Jquery mobile秉行"write less, do more"的原则，致力于帮助开发者开发出兼容最多平台与设备的高质量，自定义的web应用.无须针对每个设备或OS单独开发。目前Jquery Mobile已经支持所有A级浏览器，尽管有少部分的css3以及动画不能很少的执行，查看兼容列表

针对触摸设备的布局与UI组件：

Jquery mobile针对的是所有的触摸屏幕设备与平板电脑。他为移动WEBSITE的构建提供了一系列布局工具(工具栏，导航等)与UI组件（列表，标签栏）。内建了5套不同样式的CSS主题框架，可以组合应用于移动WEB。

官方站点：

http://jquerymobile.com/ Jquery Mobile站点
http://jquerymobile.com/demos/ Jquery Mobile站点原版文档与示例
http://forum.jquery.com/jquery-mobile Jquery Mobile站点官方论坛
http://www.jqmgallery.com/ Jquery Mobile优秀作品展示

中文社区：

http://www.jqmobile.org Jquery Mobile中文社区
http://www.filod.net/jqm/index.html Jquery Mobile中文在线文档

下载地址：

JS:
完整版本: jquery-mobile-1.0a4.1.js (130KB,用于调试)
压缩然后GZIP后版本: jquery-mobile-1.0a4.1.min.js (19KB,用于直接部署)
CSS:
完整版本: jquery-mobile-1.0a4.1.css (53KB,用于调试)
压缩然后GZIP后版本: jquery-mobile-1.0a4.1.min.js (19KB,用于直接部署)
压缩文件:
Zip File: jquery-mobile-1.0a4.1.zip (包含了Js, CSS,和图片 )

关于本CHM
还记得去年（2010）年的差不多这个时候，我还在半开玩笑的跟我的同事说，HTML5普及的时候要等到小孩都能下地打酱油了。事实证明技术的发展和普及永远比我们想象的要快。
jquery mobile的面世，对面向智能移动设备，和平板电脑的WEB开发人员提供了几乎是最佳的解决方案。
他在优秀的JS类库jquery的架构上，直接整合了HTML的自定义属性的特性和CSS3的新特性，为移动WEB和应用的前端开发提供了一整套的解决方案。
本手册为Jquery Mobile官方网站 文档于示例的全部内容，并且为了方便开发者查询视觉效果，将实例已图片形式均保存在手册内。开始动笔时jqm为A3版本，在翻译与整理过程中，A4版本发布，无奈又重新更新与校对了一遍，精力有限并且时间比较仓促。内容上可能还会有疏漏，如发现错误，，望读者见谅并及时联系我订正。
本CHM手册旨在帮助广大移动WEB应用爱好者以及开发人员提供一份中文的文档于示例手册。部分内容参考了filod.的中文在线文档，并且感谢外籍同事TY的友情指导。
2011.4.8


默认配置 Configuring defaults

与Jquery Mobile自动初始化共同协作 Working with Jquery Mobile's Auto-initialization

不像其他的Jq项目，比如jq和jq ui，Jquery Mobile会在加载到增强特性时马上应用它（远早于document.ready事件发生时）。这些特性会基于Jquery Mobile的默认配置应用，是针对默认的情形设计的，他可能符合你的需求，也可能不符合。幸运的是，它很容易设置

mobileinit事件

当Jquery Mobile开始执行时，他就会在document对象上触发mobileinit 事件，所以你可以绑定别的行为来覆盖默认配置

$(document).bind("mobileinit", function(){
//覆盖的代
});

因为mobileinit事件是在加载后马上触发，所以你需要在Jquery Mobile加载之前绑定你的事件处理函数，所以我建议你如下安排你的js引用顺序

<script src="Jquery.js"></script>
<script src="custom-scripting.js"></script>
<script src="Jquery-mobile.js"></script>

在事件绑定内部，你可以设置你的默认配置，或者是使用jq?.extend方法扩展 $.mobile对象

$(document).bind("mobileinit", function(){
  $.extend( $.mobile , {
  foo: bar
  });
});

或者单独设置它

$(document).bind("mobileinit", function(){
  $.mobile.foo = bar;
});

设置选项

以下的默认配置可以通过$.mobile对象重新配置

ns (字符, 默认: ""):

按照data-属性格式安排的命名空间，例如：data-role,可以设置为任何东西，默认为空字符串。如果你包含一个面包屑的话用起来会比较明晰，比如 mynamespace-",会映射到 data-mynamespace-foo="...".

subPageUrlKey (字符串，默认: "ui-page"):

url参数用来指向组件产生的子页面（比如生成的嵌套的列表）。会被转义为example.html&ui-page=subpageIdentifier.Jquery Mobile会把 &ui-page=之前的部分用来向子页面的url地址发出ajax请求

nonHistorySelectors (字符串, 默认: "dialog"):

对于带有 data-rel 属性的链接，或? data-role 属性的页面，如果选择器与之匹配，则他们不会在历史记录中被追踪 (即它们不会在location.hash中被更新，也不能加入到收藏夹?.

activePageClass (字符串, 默认: "ui-page-active"):

给当前页面(包括转场中的) 分配class

activeBtnClass (字符串, 默认: "ui-page-active"):

给活动状态的按钮分配class值，该class值必须在css框架中存

ajaxEnabled (布尔值, 默认: true):

Jquery Mobile 会自动通过ajax处理链接点击以及表单提交?如果无法处理，url hash 监听将会被禁用，url也会像常规那样发出HTTP 请求.

ajaxLinksEnabled (布尔值, 默认: true):

可行时，Jquery Mobile 就会自动通过ajax处理链接的点击

ajaxFormsEnabled (布尔值, 默认: true):

可行时，Jquery Mobile 就会自动通过ajax处理表单的提交

hashListeningEnabled (布尔值, 默认: true):

Jquery Mobile 会自动监听与处理 location.hash的改变。禁用它会防止Jquery Mobile处理 location.hash的改?使你可以自己处理他们，或者在文档中用完整的链接地址指到一个特定的id值上

defaultTransition (字符串, 默认: 'slide'):

设置默认的页面之间的转场效果。默认的对话框的转场效果为”pop?设为none,则无转场效果

loadingMessage (字符串, 默认: "loading"):

设置页面加载时显示的文本. 如果设置为false 将不会显示任何文字

pageLoadErrorMessage (字符串, 默认: "Error Loading Page"):

通过ajax加载页面失败时出现的文本

gradeA (返回一个布尔值, 默认: 返回$.support.mediaquery的值:

浏览器必须符合所有支持的条件才会返回 true.


事件 Events

Jquery Mobile提供了一些建于本地事件的自定义事件以用来创建一些有用的钩子. 要注意这些事件是建立于各种已存在的触摸事件之上，比如 鼠标和窗口事件，所以你可以通过使用 live() 或者 bind()将他们绑定到其他的Jquery事件

触摸事件 Touch events

tap(轻击)：一次快速完整的轻击后触

taphold（轻击不放）：轻击并不放（大约一秒）后触

swipe(划动)：一秒内水平拖拽大于30PX，同时纵向拖曳小?0px的事件发生时触发

swipeleft（左划）：划动事件为向左的方向时触发

swiperight（右划）：划动事件为向右的方向时触发

设备方向变化事件 Orientation change event

orientationchange

当设备的方向变化（设备横向持或纵向持）此事件被触发。绑定此事件时，你的回调函数可以加入第二个参数，作用为描述设备横或纵向的属性，"portrait"?quot;landscape"。这些值也会作为class值加入到html的元素中，使你可以通过css中的选择器改变他们的样式。注意当浏览器不支持orientationChange事件的时候可以通过resize 事件绑定

滚屏事件 Scroll events

scrollstart

当屏幕滚动开始的时候触发。苹果的设备会在滚屏时冻结DOM的操作，当滚屏结束时按队列执行这些dom操作，我们现在正在研究方法让苹果的设备在滚屏开始前执行dom操作

scrollstop

滚屏结束时触发

滚屏事件 Scroll events

scrollstart

当屏幕滚动开始的时候触发。苹果的设备会在滚屏时冻结DOM的操作，当滚屏结束时按队列执行这些dom操作，我们现在正在研究方法让苹果的设备在滚屏开始前执行dom操作

scrollstop

滚屏结束时触发

页面显示/隐藏事件 Page show/hide events

在Jquery Mobile中，无论页面显示或是隐藏，都在该页面触发两个事件。哪个事件被触发取决于页面被显示还是隐藏，所以当页面转场发生时，实际?个事件被触发了，每个页面有两个：

pagebeforeshow：转场之前，页面被显示时触发

pagebeforehide：转场之前，页面被隐藏时触发

pageshow：转场之后，页面被显示时触发

pagehide：转场之后，页面被隐藏时触发

请注意这4个事件都引用了”上一页“，或”下一页“，这取决于哪一页被显示或者隐藏，以及”上一页“或者”下一页“是否存在。（第一个被显示的page并没?quot;上一?quot;可以引用，但是同样会引用一个空的Jquery对象 ），你可以通过将第二个参数作为一个绑定的回调函数访问这一引用

$('div').live('pageshow',function(event, ui){
  alert('This page was just hidden: '+ ui.prevPage);
});

$('div').live('pagehide',function(event, ui){
  alert('This page was just shown: '+ ui.nextPage);
});

而且，务必在 Jquery Mobile 执行前绑定这些函数，以使 他们在初始化页面加载时被调用。在 mobileinit 事件的处理函数中使用它们既可，详情参?a href="globalconfig.html">global config

页面初始化事件 Page initialization events

Jquery Mobile会自动基于page"内的增强的约定自动初始化一些插件?例如：给一个input输入框约定了type=range属性会自动生成一个自定义滑动条
这些自动初始化的行为是受"page"插件控制的，它在执行前后部署部署事件，允许你在初始化前后操作页面，或者甚至自己提供初始化行为，禁止自动初始化。注以下的页面初始化事件在每个“page”只被触发一次，而显?隐藏 事件则不同，在页面显示或者隐藏的每次，它们都会被触发

pagebeforecreate：页面初始化时，初始化之前触

pagecreate：页面初始化时，初始化之后触

$('#aboutPage').live('pagebeforecreate',function(event){
alert('This page was just inserted into the dom!');
});

$('#aboutPage').live('pagecreate',function(event){
alert('This page was just enhanced by Jquery Mobile!');
});

注意：通过绑定pagebeforecreate然后return false，你禁止页面插件自己的操作
而且，务必在 Jquery Mobile 执行前绑定这些函数，以使 他们在初始化页面加载时被调用。在 mobileinit 事件的处理函数中使用它们既可，详情参?a href="globalconfig.html">global config

动画事件 Animation Events

Jquery Mobile提供了animationComplete 插件，你可以用来添加或删除一个class来应用CSS转场效果


方法 Methods

Jquery Mobile.mobile对象提供了几种方法供你在应用中使用

$.mobile.changePage (method)

通过程序跳转一个页面到另一个页面 ，以点击一个链接或者提交表单的形式出现(当那些特性被启用时）.

参数

to

    字符串类 ，欲转到的页面的url地址，例如 ("about/us.html")

  • Jquery对象 ($("#about"))
  • 一个指定了两个页面引用的数组[from，to] ，用以在已知的page进行跳转. From 是当前所能看到的页面( 或者是 $.mobile.activePage ).
  • 发送表单数据的对象. ({url: url, data: 序列化的表单数据 type: "get" or "post"}

transition (字符串类型，例如 "pop", "slide"," "none")

    reverse(字符串类型，默认: false). 设置为true时将导致一个反方向的转场?/dd>
    changeHash(布尔?默认: true). 页面改变完成时更新页面url的哈希值

实例

//使用slideup(上滑)的转场效果转到about/us.html页面
  $.mobile.changePage("about/us.html", "slideup");

//转到 searchresults页面，使用来自id为search的表单数
  $.mobile.changePage({
    url: "searchresults.php",
    type: "get",
    data: $("form#search").serialize()
  });

//使用pop的转场效果转?./alerts/confirm.html页面，不记录进历史记录当
  $.mobile.changePage("../alerts/confirm.html", "pop", false, false);

jqmData(), jqmRemoveData(), and jqmHasData() (method)

在Jquery Mobile中，jqmData,jqmRemoveData应该用在Jquery核心的data和removeData 方法?请注意这也包?$.fn.data, $.fn.removeData,?.data, $.removeData,以及$.hasData方法)，因为他们会自动获取，设置命名空间的属性（即使当前没有命名空间被使用的情况下。）

参数

参见Jquery的data方法和renovedata方法

并且

当通过Jquery的data属性寻找元素时，请使用自定义的选择? jqmData() ，因为他在查询元素时会自动合并命名空间的data属性。例如，你应该使? $("div:jqmData(role='page')") ，而不是使?("div[data-role='page']")选择元素，因为前者会自动映射?("div[data-"+ $.mobile.ns +"role='page']")，你不需要把命名手动的连接成选择器

$.mobile.pageLoading (method)

显示或隐藏页面加载消息，该消息由.mobile.loadingMessage进行配置.

参数

Done (布尔, 默认为false, 意味着加载已经开始. 设为True会隐藏loading消息

示例

// 显示页面加载消息
$.mobile.pageLoading();

// 隐藏页面加载消息
$.mobile.pageLoading(true);

$.mobile.path (methods, properties)

用来取得，设置，操作url地址

mobile.base (methods, properties)

用来生成的根元素

$.mobile.silentScroll (method)

不会触发任何事件，静默滚屏到特定的文档的Y值处

参数

yPos (数字，默认为0).

示例

//滚屏到y 100px处
$.mobile.silentScroll(100);

$.mobile.addResolutionBreakpoints (method)

值（数字或数组）。给分辨率class类添加任意的数字或数字数组。详细信息请参见Orientation & resolution targeting.

示例

//添加400px的分辨率断点
$.mobile.addResolutionBreakpoints(400);

//添加2个分辨率断点
$.mobile.addResolutionBreakpoints([600,800]);

示例

//滚屏到y 100px处
$.mobile.silentScroll(100);

$.mobile.activePage (property)

引用当前活动的断


有响应的布局助手 Responsive Layout Helpers

媒体查询助手类 Media Query Helper Classes

Jquery Mobile给html元素增加了用来模拟浏览器的水平竖直方向以及常用的最?最大宽度css媒介查询class.这些class会在加载，调整大小以及方向变化时更新，使你能够在css中切断这些class，以创建有响应的布局，即使在不支持媒介查询的浏览器中也可以实现

方向类 Orientation Classes

取决于浏览器或者设备的方向，HTML元素总是会有"portrait"(竖屏) "landscape"(横屏) class. 你可以在css中如下使用它们:
.portrait {
/* 垂直方向的变化的代码 */
}
.landscape {
/* 水平方向的变化的代码 */
}

最小/最大宽度折断点Class Min/Max Width Breakpoint Classes

默认情况下， 我们为如下宽度创建了折断： 320，80，68，024. 这些宽度对应着如同这样的class:"min-width-320px"，"max-width-480px"这意味着这些class可以应用在 替换(或附加) 它们模拟的等值的媒介查询
.myelement {
  float: none;
}
.min-width-480px .myelement {
  float: left;
}
Jquery Mobile中的许多插件都利用了这些宽度折断点.例如，当浏览器宽度在480以上时，表单元素会浮动在label的旁边. 约束表单文本框的CSS在支持这样的行为时看起来像这样:
label.ui-input-text {
  display: block;
}
.min-width-480px label.ui-input-text {
  display: inline-block;
}

添加宽度折断点 Adding Width Breakpoints

要利用你自己的宽度折断点。Jquery Mobile公开$.mobile.addResolutionBreakpoints 函数，该函数接受一个数字或者数字的数组，这些值无论何时在函数被应用到时会被添加到min/max折断点中.

//添加一个1200像素的最大/最小折断点
$.mobile.addResolutionBreakpoints(1200);

///添加一个1200像素和1400像素2个最大/最小折断点
$.mobile.addResolutionBreakpoints([1200,1440]);

Running Media Queries 运行媒介查询

Jquery Mobile 提供一个函数允许你来测试是否有特殊的css 媒介查询生效，只需调用 $.mobile.media()然后传递一个media type 或 query即可.如果浏览器支持你传递的那种type或query，它会立即生效，函数会返回true，否则会返回false.

//测试屏幕媒体类型
$.mobile.media("screen");

//测试最小宽度的媒介查询
$.mobile.media("screen and (min-width: 480px)");

//测试是否为苹果4代手机的屏幕（视网膜）
$.mobile.media("screen and (-webkit-min-device-pixel-ratio: 2)");


主题样式 Themes

主题样式综述 Theming overview

Jquery Mobile中每一个布局和组件都被设计为一个全新的面向对象的css框架，使我们能够给站点和应用程序适用完全统一的视觉设计主题。Jquery Mobile的主题样式系统与Jquery UI的ThemeRoller 系统很类似，但是做出了几点重要的改进.
他使用的css3来显示圆角，文字和盒阴影和颜色渐变，而不是图片，使得主题文件非常轻量级，减轻了服务器的负担
主体框架包含了几套颜色色板。每一套都包含了可以自由混搭和匹配的头部栏，body，按钮状态。用来构建视觉纹理，创建丰富的设计
开放的主题框架允许你创建最多6套主题样式，给设计增加近乎无限的多样性
一套简化的图标集，包含了移动设备上大部分需要使用的图标，并且sprite到一张图片里减少了图片大小

主题与色板 Themes & swatches

主题系统的关键在于把针对颜色与材质的规则，和针对布局结构的规则（例如padding和尺寸）的定义相分离。这使得主体的颜色和材质在样式表中只需要定义一次，就可以在站点中混合，匹配以及结合，得到广泛的使用?
每一套主题样式包括几项全局设置，包括字体阴影，按钮和盒模型的圆角值。另外，主题也包括几套颜色色板，每一个都定义了工具栏，内容区块，按钮和列表项的颜色以及字体的阴影
Jquery Mobile默认内建了5套主题样式，用（a,b,c,d,e）引用。为了使我们的颜色主题能够保持一直地映射到我们的组件中，我们遵从的规约是：a主题是视觉上最高级别的主题（黑色），b主题为次级用主题（蓝色），c主题为基准主题，在很多情况下是默认使用的，主题d为备用的次级内容用主题，主题e为强调用主题。 你也可以手动添加主题用于强调，或者是特殊的场合。例如：你可以手动添加新的主题“i",用于制作红色的工具栏或者按钮，用于错误提示
全新的ThemeRoller工具会在2011年 Jquery Mobile 1.0 release 版本时发布。在这之前，也很容易手动编辑默认的基准样式而且/或者编辑css文件增加主题：拷贝主题样式那一段css，将它用新的字母重命名，然后更换颜色

Bars

默认的主题包含了一下的5种bar的样

默认情况下，Jquery Mobile给所有的头部栏和尾部栏分配的是a主题，因为他们在应用中是视觉优先级最高的。如果要给bar设置一个不同的主题，只需要给头部栏和尾部栏容器增加 data-theme 属性，然后设定一个主题样式字母即可，例如b,d等? 更多参见工具栏主题样式

内容 Content Blocks

默认主题也包含了用于内容的颜色样式，使得在设计上与头部栏的颜色相匹配

如果没有特别指定的话，Jquery Mobile会默认给content分配主题c，使得在视觉上与头部栏区分开来

列表和按钮 Lists & Buttons

每一套主题也包含了针对交互元素，比如说列表项和按钮的默认样式

默认情况下，所有放置在一个bar里的按钮都会被自动分配一个和它所在的bar或者box的主题样式所匹配的主题，用以 在视觉上形成一个整体，像变色龙。
这样的默认行为可以使你很容易地通过设置父容器的主题样式改变整个页面的主题，因为你知道按钮在不同主题的视觉配重都是一样的。而因为表单元素用按钮的样式，他们也会适配他们的父容器
如果你要给按钮在视觉上进行强调，来帮助他从工具栏中凸现出来，可以给链接增加data-theme="a"属性。给按钮在标记中设置了不同的主题后，父容器主题更改时框架不会覆盖其颜色，因为你决定了要设置它
更过参见。。

全局“活动”状态 Global "Active" state

Jquery Mobile框架用一个单独的主题叫做"active"(蓝色)，用来总是指示被选中的状态，无视该组件的主题. 我们给导航与表单元素应用了这样的"活动"主题，不管是否有指示被选中的状态的需要。因为这一个主题样式是设计用来给用户清晰的，一致的反馈的，所以不能通过标记来覆盖，在主题中该项只要设置一次，，Jquery Mobile会在不管被选中或者活动状态需要时都应用他。该样式在样式表中的ui-btn-active规则来设置

“活动”状态用来给可切换的元素标记“on”状态

图标 Icons

Jquery Mobile包含了一套标准的图标，可以分配给按钮。为了尽量减小核心图标的文件大小，Jquery Mobile只包含了图标白色的图案，然后在图标背后自动添加了半透明的黑色圆形背景，使得图标在所有背景色下都可以看的明晰


页面 Pages

Jquery Mobile支持包含历史回退按钮的自动ajax读取外部页面的功能，一组页面转场动画，以及将页面显示为对话框的简易工具。

页面结构 Anatomy of a Page

Jquery Mobile中的"页面"结构已经优化为支持单个的页面，或者在一个页面内嵌入的多个“page”。
使用这种模型的目的是使WEB开发人员使用最佳实践创建WEB网站，使得普通的链接不需要任何特殊配置就可以工作，而且能创造出富媒体的像本地应用一样通过标准的http无法创造出的用户体验。

mobile页面结构Mobile page structure

Jquery Mobile网站必须使用HTML5文档声明开始，使得网站能够适用HTML5的特性（不支持HTML5的旧浏览器会静默地忽略HTML5的文档声明和一些自定义属性）。 在head标签内需要引用Jquery,Jquery Mobile和mobile的主题CSS文件，像如下一样开始：

HTML 代码:

<!DOCTYPE html>
<html>
<head>
  <title>Page Title</title>
<link rel="stylesheet" href="http://code.Jquery.com/mobile/1.0a3/Jquery.mobile-1.0a3.min.css" />
<script type="text/javascript" src="http://code.Jquery.com/Jquery-1.5.min.js"></script>
<script type="text/javascript" src="http://code.Jquery.com/mobile/1.0a3/Jquery.mobile-1.0a3.min.js"></script>
</head>
<body>

...

</body>
</html>

在body标签内，移动设备上每一个视图或者"page"被一个带有 data-role="page"的容器（通常是div）所标示：:

<div  data-role="page">   	...  </div>
在page容器内，任何有效的html标签都可以使用，但是对于Jquery Mobile的典型页面来说，page容器的直接子结点应该为使用"data-role"标记属性为"header""content"和"footer"的3个容器。

HTML 代码:

<div data-role="page">
  <div data-role="header">...</div>
   <div data-role="content">...</div>
   <div data-role="footer">...</div>
</div>

一个完整的独立页面实例:　Complete single page template

集合在一起后，这就是一个标准的Jquery Mobile页面的样板了。

html 代码:

<!DOCTYPE html>
<html>
  <head>
    <title>Page Title</title>
    <link rel="stylesheet" href="http://code.Jquery.com/mobile/1.0a3/Jquery.mobile-1.0a3.min.css" />
    <script type="text/javascript" src="http://code.Jquery.com/Jquery-1.4.3.min.js"></script>
    <script type="text/javascript" src="http://code.Jquery.com/mobile/1.0a3/Jquery.mobile-1.0a3.min.js"></script>
  </head>
<body>

  <div data-role="page">

    <div data-role="header">
      <h1>Page Title</h1>
      </div><!-- /header -->

      <div data-role="content">
      <p>Page content goes here.</p>
    </div><!-- /content -->

  <div data-role="footer">
    <h4>Page Footer</h4>
  </div><!-- /footer -->
  </div><!-- /page -->

</body>
</html>

外部页面的链接　External page linking

Jquery Mobile会自动构建AJAX驱动的站点和应用。
默认情况下，当你点击了一个指向外部页面(比如：products.html)的链接，JQmoblie的分析链接地址，然后产生一个ajax请求（Hajax）,显示一个读取中的提示框。
如果AJAX请求成功，新页面的内容会添加到DOM中，所有MOBILE组件都会自动初始化，所以新的页面会通过页面转场动画看到。
如果AJAX请求失败，JQmoblie会显示一个小错误提示框（默认的主题为E）,然后过一会就消失了，不会影响你继续浏览。

本地，内部的页面　Local, internal linked "pages"

一个单独的HTML文档内可以包含多个由"data-role="page"标记的DIV容器，他们在加载时共同加载，但是被解释成不同的页面（个人认为这是Jquery Mobile的独到之处），每一个page区块需要由一个独特的ID(id="foo")标记，通过给内部链接地址定义为(herf="#foo"),互相跳转。当连接被点击时，JQmoblie会在文档内寻找带有ID的page容器，然后通过页面转场显示。
但请注意如果你的移动页面包括几个"page",然后通过某个链接被一个外部页面通过AJAX加载，你需要给这个链接添加rel="external"和data-ajax="false"的属性。这样就告知Jquery Mobile完全地加载一个页面，清理掉AJAX在URL的哈希值。这是很关键的，因为AJAX页面使用哈希值（"#"）记录AJAX历史，但是包含多个PAGE的页面也是用哈希值指向某个PAGE，所以这样在哈希值上就会产生冲突。
例如：一个指向包含多个内部PAGE页面的链接应该如下：
<a href="multipage.html" rel="external">Multi-page link</a>
下面是一个包含2个"PAGE"的页面，两个DIV通过ID标记和导航。请注意通过ID标记内部页面的做法只需要支持内部的页面链接,如果每个页面是分离的HTML文档,则属性可加也可不加。：

<body>

  <!-- Start of first page -->
  <div data-role="page" id="foo">

  <div data-role="header">
    <h1>Foo</h1>
  </div><!-- /header -->

    <div data-role="content">
      <p>I'm first in the source order so I'm shown as the page.</p>
      <p>View internal page called <a href="#bar">bar</a></p>
  </div><!-- /content -->

  <div data-role="footer">
    <h4>Page Footer</h4>
  </div><!-- /header -->
  </div><!-- /page -->

    <!-- Start of second page -->
  <div data-role="page" id="bar">

  <div data-role="header">
    h1>Bar</h1>
  </div><!-- /header -->

  <div data-role="content">
  <p>I'm first in the source order so I'm shown as the page.</p>
  <p><a href="#foo">Back to foo</a></p>
    </div><!-- /content -->

  <div data-role="footer">
    <h4>Page Footer</h4>
  </div><!-- /header -->
  </div><!-- /page -->

</body>

请注意：我们对于所有AJAX的"page"使用的是哈希值来跟踪导航历史，所以现在还不可以通过外部页面的一个ID指向那一个锚点，因为Jquery Mobile会寻找带有该ID的"page",而不是滚屏到带有该ID的内容上。

后退链接　Back linking

如果你添加了data-rel="back"属性给某个链接，那对于该链接的任何点击行为，都是后退的行为，会无视链接的herf，后退到浏览器历史的上一个地址。 当想链接到一个命名好的页面，或者要关闭对话框时特别有用。使用这一特性时要注意：务必请使用一个有意义的herf值实际地指向要引用的地址（因为这样也会让GRADE-C的浏览器也支持这个按钮）。而且如果你只是要看到一个翻转的页面转场而不是真正的回到上一个历史记录的地址，你就要使用data-direction="reverse"属性，而不是后退按钮。

后退链接　Back linking

如果你添加了data-rel="back"属性给某个链接，那对于该链接的任何点击行为，都是后退的行为，会无视链接的herf，后退到浏览器历史的上一个地址。 当想链接到一个命名好的页面，或者要关闭对话框时特别有用。使用这一特性时要注意：务必请使用一个有意义的herf值实际地指向要引用的地址（因为这样也会让GRADE-C的浏览器也支持这个按钮）。而且如果你只是要看到一个翻转的页面转场而不是真正的回到上一个历史记录的地址，你就要使用data-direction="reverse"属性，而不是后退链接。

重定向以及链接到目录　Redirects and linking to directories

当连接到的是一个目录地址（比如href="typesofcats/"而不是href="typesofcats/index.html"），你必须在地址后面加一个斜杠("/")。因为Jquery Mobile假定最后一个斜杠后的部分为文件名，当接下来引用到的页面生成基地址的会的时候会删除它。
但是，你可以通过已经指定好的data-url地址来返回到上一个page容器，就可以绕过这一个问题。Jquery Mobile 会使用那个data-url值来更新url，来替代过去请求的那个页面 。这样你也允许你通过返回url的更改来作为重定向的结果。例如：你想通过post方式提交表单到 /login.html"，但是提交成功以后返回一个url为 "/account 。这个工具就可以让你在这种情况下控制历史记录堆栈。以下是一个实例：
有一个链接是指向 "docs-links-urltest/index.html" ，该链接是指向目录的索引页，返回的页面会使用 "docs/pages/docs-links-urltest/" 更新哈希值，这是通过代码里的 data-url 值完成的。请注意data-url值会替换整个哈希值，由你来把他替换成当刷新或者下层链接时URL发出的请求能解析正确的页面.
更多技术细节请参见导航模型Ajax, hashes and history

本手册由darklord整理编辑。


页面转场 Page transitions

Jquery Mobile框架内置6中基于css的页面转场效果，你可以给任何对象或页面（比如关闭页面或想换到新页面或者回到上一个页面）添加。默认情况下，Jquery Mobile应用的是从右到左划入的转场效果

给链接添加data-transition属性，可以设定自定义的页面转场效果

<a href="index.html" data-transition="pop">I'll pop</a>

1pop 2slideup 3slidedown 4pop 5fade 6flip

另外，如果给链接增加data-direction="reverse"属性，则强制指定为回退的转场效果


data(name)

创建对话框 Creating dialogs

通过给指向页面的链接增加data-rel="dialog"的属性，可以把任何指向的页面表现对对话框。当应用了对话框的属性之后，qjmobile框架会给新页面增加圆角，页面周围增加margin，以及深色的背景，使得对话框浮在页面之上

HTML 代码:

<a href="foo.html" data-rel="dialog">Open dialog</a>

对话框的转场 Transitions

因为Jquery Mobile里对话框也是一个标准的"page",所以他会以默认的slide转场效果打开。而且像其他的页面一样，你也可以通过给链接添加data-transition的属性指定对话框的转场效果。为了让对话框看起来效果更好，我们推?quot;pop", "slideup"，"flip"三种转场效果

HTML 代码:

<a href="foo.html" data-rel="dialog" data-transition="pop">Open dialog</a>

关闭对话框 Closing dialogs

对话框内的任何链接被点击时，Jquery Mobile会自动关闭对话框，用回退效果转场到指向该对话框的页面。要在对话框内创建一?取消"按钮，只需要把该链接的herf指向打开该对话框的按钮然后给链接加上data-rel="back"属性。这样制作的后退链接在不支持js的设备上也同样管用
对于js生成的链接，可以把链接的herf设为"#",添加data-rel="back"属性。也可以手动地调用对话框的close()方法关闭对话框，比如? $('.ui-dialog').dialog('close').

设置关闭按钮的文字 Setting the close button text

就像页面插件一样，你可以设置程序或属性两种方法设置对话框关闭按钮的文字。程序的设置可以通过更改mobileinit绑定的事件，然后? $.mobile.dialog.prototype.options.closeBtnText 设置一个字符串。或者给标记代码增加 data-close-btn-text 属性来设置文字

历史和后退按钮的行为 History & Back button behavior

因为对话框是典型地用来给页面起支持作用的，所以Jquery Mobile不会在历史记录的哈希值里包含对话框。这就意味着当点击对话框后退按钮时，他不会出现在你的浏览器历史记录里。比如说，如果你在一个页面上，点击了一个按钮打开了一个对话框，然后关闭了这个对话框，到了另一个页面。这时如果你点击浏览器的后退按钮，那你会回到第一个页面，而不是对话框


ajax,哈希值和历史记录 Ajax, hashes & history

Jquery Mobile的导航模型 Jquery Mobile's navigation model

在Jquery Mobile中，一个页面"就是一个data-role属性被设为"page"的容器，通常为div容器，里面包含了"header", "content",“footer"三个容器，各自可以容纳普通的html元素，表单和自定义的Jquery Mobile组件
页面载入的基本工作流程如下：首先一个页面通过正常的http请求到，然后”page"容器被请求，插入到页面的dom当中。所以dom文档中可能同时有多个"page"容器，每一个都可以通过链接到他们的data-url被访问到
当一个url被初始化请求，可能会有一个或多个"page"在相应，而只有第一个被显示。存储多个“page"的好处在于可以使你预读有可能被访问的静态页面

Ajax驱动的页面导航 Ajax-driven page navigation

Jquery Mobile中所有的导航都是基于location.hash的改变和更新实现的。当可实施时，页面的转变都会在当前页面与下一个页面间使用平滑的转场效果，不管它已经在当前的dom文档中，还是自动通过ajax读取的
Jquery Mobile会在第一个”真正"的页面加载完毕时创建哈希值，其值为相对于url的完整路径，hash值始终会被维护为一个可用的URL?所以Jquery Mobile中任何的 'page'容器都可以添加到收藏夹或者引用为一个链接。要获取非基于hash的URL，只要删除地址中的“#”并刷新页面即可
通常，Jquery Mobile中，任何链接被点击都会造成hash值的变化。当链接被点击时。Jquery mobile将确保该链接是引用一个本地URL，如果是这样，它会阻止链接的默认的点击行为，并通过Ajax请求引用的网址,当页面成功返回，它将location.hash设置到新的页面相对的URL
在框架中，页面的改变，包括已经存在于DOM之中得页面转变和需要通过ajax加载的页面转变，都是使用$.mobile.changePage() 函数
$.mobile.changePage()包括所有寻找页面以及页面间切换的逻辑,以及如何处理不同情况下请求的响应.
$.mobile.changePage()函数可以在外部被调用，该函数接受如下的参熟 to, transition, back, changeHash.
to参数可以是一个字符串（比如文件url或者当前页面的元素ID值 或是一个数组（第一个数组元素为任意你想转自的当前页面中的page，第二个元素为转去的页面），或者一个对象（含有如下属性： url，type（get或post），data（用于序列化的参数）），后者在加载含有表单数据时的页面十分有用，transition 参数接受一个字符串来表示采用何种转场效果，例如"slide"?back参数接受一个布尔值， 表示转场应该前进还是相反。最后，changeHash参数接受一个布尔值表示你是否?根据一个成功的页面更改来更新url
$.mobile.changePage()函数在Jquery Mobile中很多地方都有用到。例如，当一个链接被点击时， 它的href属性被解析，然?.mobile.changePage()会处理。当表单被提交时，Jquery Mobile手机一部分表单的属性，将数据序列化，然后.mobile.changePage() 再次接手该次提交并响应 同样的，创建对话框的链接也是由.mobile.changePage() 来打开相应引用页，但是不更新哈希值，使对话框不会在历史记录中
另一个Jquery Mobile页面导航模型中的关键要素是base元素,它被插入到head中，在每次页面变化时，该元素都会被修改以确保资源（css，js，图片等）都能够从正确的地址取到。在不支持动态更新base元素的浏览器（FF3.6）里，Jquery Mobile会遍历所有页面引用的资源并把它们的href和src加上基地址作为前缀
哈希值会在一次独立的点击时发生时变化，比如一个用户点击后退按钮，会通过 hashchange事件进行处理，该事件通过Jquery Mobile的哈希值改变的特殊事件插件（作者Ben Alman）绑定到window对象。当一个哈希值更改是，或者第一次页面加载时 hashchange 事件处理程序会发 location.hash.mobile.changePage()函数，以加载或者显示引用的页面
引用的页面存在DOM当中之后 .mobile.changePage()函数会在当前页和引用页间应用一个转场，以显示页面。页面转场会通过添加和移除指定了css动画的class来实现。例如，在一个向左滑动的转场效果中，已经存在的页面会被加一个名为 "slideleft""out" 的class，将要显示的页面会被加上 "slideleft" 为"in" 的class。动画结束后,"in"”out"的class 被删除，退出的页面"ui-page-active"的class被删

base url 管理解释 Developer explanation of base url management:

Jquery Mobile使用 1生成的绝对URL地址，2操作生成<base>元素的href属性的两种办法的结合管理http请求,这两种方法的结合允许我们创建包含完整路径信息URL来加载页面，base元素将指示资源正确的被加载（比如图片和样式表）

自动生成的页面和子哈希表 Auto-generated pages and sub-hash urls

一些Jquery Mobile的控件可能会根据情况动态地把一个页面的内容分离为多个可导航的页面，并通过层次化的链接来访问。比如说list控件，他会把一个嵌套的列表(ul或者ol)分离为多个页面，每一个页面赋予一个data-url属性，可以想正常的"page"页面一样被链接到。但是为了链接到这些页面，生成他们的源页面必须首先从服务器请求到，所以通过自动生成的页面会应用这样的特殊data-url结构:
<div data-url="page.html&subpageidentifier">
所以例如通过列表控件生成的一个页面会拥有这样的data-url属性： data-url="artists.html&ui-page=listview-1
一个页面被请求到后，Jquery Mobile会在&ui-page处拆开url地址，使得http请求的是artists.html。在这个例子中，url应该为：http://example.com/artists.html&ui-page=listview-1
而Jquery Mobile会请求： artists.html，然后他会生成子页面，创建div容器标记 data-url="artists.html&ui-page=listview-1"的属性，最后作为活动页面显示
注意，元素data-url属性包含的是完整的url路径，而不仅仅是&ui-page=之后的部分。这样Jquery Mobile就可以通过一个一致的机制来为页面的data-url属性匹配URL

不使用ajax导航的情况 Cases when Ajax navigation will not be used

有时我们要用正常的http请求而不用Ajax请求，比如链接到别的网站的情况。通过给链接加下面的属性，可以将链接指定为正常的http请求:

rel=external

target (打开规则, 例如"_blank")

表单的提交 Form submissions

Jquery Mobile也会自动通过导航模型处理表单的提交。更多细节请阅读表单章节:

已知的限制 Known limitations

当某链接指向的是一个不带文件名的目录时,比如href="typesofcats/" 而不是href="typesofcats/index.html"),路径后必须加一个反斜杠("/")。因为Jquery Mobile会假定url里最后一个反斜杠后面的部分为文件名，从将来的引用到的页面创建基地址时会删除掉这个文件名
在jqmoible驱动的网站中，页面内所有指向唯一资源的引用都需要放在“page"容器内（拥有data-role=page属性的容器）
例如，指向针对某一个页面的样式表和js的链接可放在div中。但是我们推荐使用Jquery Mobile的page事件来当该页面加载完成时触发特定的脚本执行
; 你可以从服务器返回一个已经在标签中指定了data-url属性的页面,Jquery Mobile会利用此来更新hash。这可以使你确保带有斜杠的目录路径解析正确，因此也可以用于未来请求所需的基地址.
而相反的，所有非唯一的资源（全局资源）应该在html文档<head>标签中被引用,或者至少在'page'元素外面，以防止脚本重复运行.
"ui-page"词名用于子hash值的url引用，可以设置为任何你喜欢的值，以便配合你自己的URL结构，该值存储于 Jquery.mobile.subPageUrlKey中


链接的格?Link formats

链接的格式 Link formats

Jquery Mobile支持所有标准的html格式，为了让体验更加流畅,Jquery Mobile会把同一个域下的所有指向页面的链接都会自动转为ajax请求，并且用动画的转场效果实现切换
指向别的域的链接或者是含有 rel="external", data-ajax="false" 属性的链接以及含有target属性的链接不会通过ajax加载，页面会整体被刷新。如果一个html文档内含有多?pages"容器，可以通过?pages"容器设置id属性，然后将链接指向id.
所有其他类型的链接别如：mailto:以及tel: 不会被Jquery Mobile影响到。更多细节请参见链接导航模型


给页面主题样?Page Theming

给页面主题样式 Page Theming

Jquery Mobile内建了一套样式主题系统，让你给页面添加样式时有丰富的选择。 针对每一个页面的组件，都有详细的主题样式文档，但是我们先看一下怎样应用主题样式
给header和footer容器增加data-theme属性，并设定为a,b,c,d,e.可以应用任何一套主题样式。而当给页面内容添加data-theme属性时，我们推荐给整个content容器data-role="page"添加，而不是某个div或容器，这样背景也就可以应用到整个页面。

默认的样式是混搭了多种主题样式的样子，使得各个组件层次分明

给下面是5套应用了主题样式的页面

主题A

主题B

主题C

主题D

主题E


工具?Toolbars

工具栏在此是指在移动网站和应用中的头部，尾部和内容中的工具条。所以Jquery Mobile提供了一套标准的工具和导航栏的工具，可以在绝大多数情况下直接使用

工具栏综述 Toolbar basics

在Jquery Mobile中，有两种标准的工具栏：头部栏和尾部栏

头部栏的作用为网站的标题，通常是移动网站页面的第一个元素，一般包括页面的标题文字和最多两个按钮

尾部栏通常是移动网站页面的最后一个元素，在内容和作用上比头部栏更自由一些，但一般也要包含文字和按钮

在头部栏或尾部栏里放置一个水平的导航栏或选项卡栏的做法是很普遍的，所以Jquery Mobile包含导航栏组件，即把无序列表ul转化成水平的按钮栏，使用也非常方便

工具栏定位的设置 Toolbar positioning options

在页面中设置头部栏和尾部栏的位置定位有几种方法。默认情况下，工具栏的定位的属性为"inline".在这种模式下，头部栏和尾部栏通过html自动的文档流放置，保证了他们能在所有的设备上可见，而不需要依靠css和js的定位的支持
固定的定位模式可以使工具条在页面处于固定的位置，而不需要通过js设置。工具条处于他们在页面自然的位置上，就像inline模式一样，但是当他被滚动出屏幕之外时，Jquery Mobile会自动通过动画使滚动条重新出现在屏幕的顶部或底部
任何时候，点击屏幕会切换固定定位模式的工具条的显示：当工具条消失时点击屏幕会让他出现，再点击则会让它消失。这样用户就有选择在最大化浏览时要不要隐藏工具栏， 要给工具栏设置固定的定位模式，只需给工具栏的容器加“data-position="fixed"的属性即可
全屏的定位模式与固定的定位模式基本相同，但是当他被滚动出屏幕之外时，不会自动重新显示，除非点击屏幕。这对于图片或视频类有提升代入感的应用是非常有用的，当浏览时你想全屏都显示内容，而工具栏可以通过点击屏幕呼出。注意这种模式下工具栏会遮住页面内容，所以最好用在比较特殊的场合下


头部?Header bars

头部栏结构 Header structure

头部栏是处于页面顶部的工具栏，通常包含页面标题文字，文字左边和/或右边可以放置几个可选的按钮用作导航操作
标题文字一般用h1标签，但是从h1-h6都是可以的，这样可以使结构有弹性。比如说，一个页面内包含了多个"page"标记的页面，这样可以给主"page"的标题文字用h1标签，次级"page"的标题文字用h2标签。所有的头部默认下在样式上都是相同的，保持的外观的一致性

<div data-role="header">
   <h1>Page Title</h1>
</div>

默认的头部的特性　Default header features

头部栏的主题样式默认情况下为"a"(黑色)，但是你可以很轻松的设置主题样式

默认的头部栏

看见back按钮了吗Jquery Mobile会自动给每个页面的头部栏生成一"back"按钮，来简化把按钮放进头部栏的过程。如果你不想?quot;back"按钮放进头部栏，你可以自己加一个需要的按钮或者给头部栏添加”data-backbtn="false"属性

添加按钮 Adding buttons

在标准的头部栏的设置下，标题文字两边各有一个可放置按钮的位置。每一个按钮通常都是都是a,但是任何有效的按钮标记的元素都可以。为了节省空间，工具栏里的按钮都是内联按钮，所以按钮的宽度只容纳icon和里面的文字

创建自定义的后退按钮 Creating custom back buttons

给a标签增加data-rel="back"的属性，任何链接都可以样式化为后退按钮，行为上为后退到上一个历史记录的页面，无视该链接的herf地址。这对于要链接回到一个命名好的页面的情况是很有用的但是注意请给链接设定一个有意义的herf地址，指向实际要连接的页面，使得C级浏览器也能够使用这个按钮而且要注意如果你只是需要一个后退的页面转场效果，而不是真正的后退到上一个历史记录的页面，应该用data-direction="reverse" 的属性，而不是用data-rel="back"属性的按钮

按钮默认的定位 Default button positioning

头部的按钮是头部栏容器的直接子节点，第一个链接定位于头部栏左边，第二个链接放在右边，在这个例子中，根据两个链接在源代码中的位置，取消在左边，保存在右边

<div data-role="header" data-position="inline">
   <a href="index.html" data-icon="delete">Cancel</a>
   <h1>Edit Contact</h1>
   <a href="index.html" data-icon="check">Save</a>
</div>

按钮默认的定位

按钮会自动应用他们的父容器的主题样式，所以应用了"a"主题样式的头部栏里的按钮也会应用"a"主题样式，我们通过给按钮增加data-theme的属性并设置，可以使按钮看起来有所区别

<div data-role="header" data-position="inline">
   <a href="index.html" data-icon="delete">Cancel</a>
   <h1>Edit Contact</h1>
   <a href="index.html" data-icon="check" data-theme="b">Save</a>
</div>

通过class控制按钮的定位　Controlling button position with classes

按钮的位置可以通过class设置，而不依赖他们在源代码中的顺序。如果你想把唯一一个按钮放在右边，这时就非常有用了。两个控制的类为ui-btn-right 和ui-btn-left
在这个例子中，我们要把头部栏唯一一个按钮放于右边，首先给头部栏增加data-backbtn="false"属性来阻止头部栏自动生成后退按钮的行为，然后给自己的按钮增加ui-btn-right的class

<div data-role="header" data-position="inline" data-backbtn="false">
<h1>Page Title</h1>
<a href="index.html" data-icon="gear" class="ui-btn-right">Options</a>
</div>

自定义头退按钮的文字　Customizing the back button text

如果你想设置后退按钮的文字，需要给页面?page"元素增加data-back-btn-text="文字"的属性，或者通过程序来实现?$.mobile.page.prototype.options.backBtnText = "文字";
如果你想配置后退按钮的主题样式，使用 $.mobile.page.prototype.options.backBtnTheme = "a" 如果你要用这段程序，需要在mobileinit时间的处理程序中使用

自定义头部栏的配置　Custom header configurations

如果你想创建一个不遵循默认配置的头部栏，在header容器里用div包裹你的自定义内容就好，Jquery Mobile不会自动生成按钮，所以你可以给你的头部栏自定义你的样式


尾部?Footer bar

尾部栏结构 Footer bar structure

尾部栏除了使用的data-role的属性与头部栏不同之外，基本的结构与头部栏是相同的

<div data-role="footer">
   <h4>Footer content</h4>
</div>

尾部工具栏默认下应用的主题样式为"a"(黑色)，但是你可以很轻松的设置主题样式

默认的尾部栏

尾部栏的设置与头部栏基本相同。最大的不同是，尾部栏被设定为结构尽量简单，所以Jquery Mobile不会自动给尾部栏生成按钮

添加按钮 Adding buttons

给尾部栏添加任何有效的按钮标记的元素都都会生成按钮。为了节省空间，工具栏里的按钮都是内联按钮，所以按钮的宽度只容纳icon和里面的文字
默认情况下，工具栏内部容纳组件与导航时是不留padding的。如果要给工具栏增加padding,请增加一个ui-bar的class.

<div data-role="footer" class="ui-bar">
   <a href="index.html" data-role="button" data-icon="delete">Remove</a>
   <a href="index.html" data-role="button" data-icon="plus">Add</a>
   <a href="index.html" data-role="button" data-icon="arrow-u">Up</a>
   <a href="index.html" data-role="button" data-icon="arrow-d">Down</a>
</div>

要想把几个按钮打包成一个按钮组，则需要把这些按钮用一个容器包裹，并给该容器增加data-role="controlgroup"和data-type="horizontal"属性

<div data-role="controlgroup" data-type="horizontal">

尾部的成组按钮

增加表单元素 Adding form elements

表单元素和其他元素也可以添加进工具栏中。这是一个把select添加到尾部栏的实例：

持续的尾部栏 Persistent footers

有些情况下你需要一个尾部栏为全局导航元素，希望页面转场时尾部栏也固定并显示。创造一个持续的尾部栏可以做到这一点
给尾部栏添加data-id属性，并且在所有关联的页面的尾部栏设定同样的data-id的值，就可以使尾部栏在页面转场时也固定并显示， 例如给当前页面和目标页面的尾部栏添加id="myfooter" 属性，Jquery Mobile会在页面转场动画的时候保持尾部栏固定 请注意：这个效果只有在头部栏和尾部栏设定为固定的定位模式（data-position="fixed" ）时在才有用，这样他们在页面转场时才不被隐藏


导航?Navbar

简易的导航栏 Simple navbar

Jquery Mobile 提供了一个基本的导航栏组件，每一行可以最多放5个按钮，通常在顶部或者底部
导航栏的代码为一个ul列表，被一个容器包裹，这个容器需要有data-role="navbar"属性。要设定某一个链接为活动（selected）状态，给链接增加class="ui-btn-active" 即可。我们给尾部栏设置了一个导航栏，把one项设置为活动状态

<div data-role="footer">
   <div data-role="navbar">
     <ul>
       <li><a href="a.html" class="ui-btn-active">One</a></li>
       <li><a href="b.html">Two</a></li>
     </ul>
   </div><!-- /navbar -->
</div><!-- /footer -->

尾部工具栏默认下应用的主题样式为"a"(黑色)，但是你可以很轻松的设置主题样式
导航栏内每项的宽度都被设定为相同的，所以按钮的宽度为浏览器宽度 1/2.新增加一项的话，每项的宽度自动匹配为1/3,以此类推。如果导航栏多于5项，导航栏自动表现为多行

两个按钮的导航栏

三个按钮的导航栏

五个按钮的导航栏

多余5项的导航

头部的导航栏 Navbars in headers

如果要给页面头部增加一个导航栏，你也可以保留头部栏的页面标题和按钮。只需要把导航栏容器放进头部栏容器内

头部的导航栏

导航栏的图标 Icons in navbars

给导航栏的列表项链接增加data-icon属性，可以给链接设置一个标准的移动网站的图标。给列表项链接增加data-iconpos="top"属性，可以给链接的图标设置位置为在文字上方

导航栏的图标

使用第三方的图标?Using 3rd party icon sets

你可以可以把任何你喜欢的第三方的icon组库加入到自己的项目中。只需要在css中自定义icon的地址和位置就可以了。下面一个实例为使用了Glyphish icon组的导航栏

导航栏的图标

Icons by Joseph Wain / glyphish.com. Licensed under the Creative Commons Attribution 3.0 United States License.

给导航栏主题样式 Theming navbars

给导航栏设置data-theme属性，，可以给导航栏设置主题样式

导航栏的主题


固定定位的导航栏 Fixed toolbars

固定定位的工具栏会在滚屏后重新出现 Fixed toolbars will re-appear after you scroll

这个页面是一个使用Jquery Mobile设定了固定定位的头部栏和尾部栏的实例。页面的文档流是正常的，让我们能够正常的布局文档，而不用通过脚本写。头部栏和尾部栏在文档流中的正常位置，但是当他们被滚动出屏幕后，你可以通过点击屏幕，使他们重新出现。再次点击或者滚动屏幕会使他们重新出现在文档流中（在顶部或底部）
要给头部栏或底部栏设置这样的行为，需要给工具栏的容器增加data-position="fixed"属性

<div data-role="header" data-position="fixed">
   <h1>Fixed toolbars</h1>
</div>


全屏的工具栏 Fullscreen fixed toolbar

全屏的固定的工具栏　Fullscreen fixed toolbar

这个页面展示“全屏"工具栏模式。这个工具栏一般用在比较特殊的场合，比如想要把内容撑满全屏，然后头部栏和尾部栏随着点击页面而出现和消失-在图片，照片和视频浏览器经常需要这样
要打开工具栏的这种特性，给页面的"page"增加data-fullscreen="true"属性，然后给头部工具栏和尾部栏的容器增加data-position="fixed"属性
注意在这种模式下工具栏会遮住页面的内容，所以当工具栏可见时不是全部内容都能够看见的


持续的尾部导航栏 Persistent footer nav bar

持续的尾部栏　Persistent footer nav bar

这个页面是一个持续的尾部导航栏的示例。在页面的底部，你会看到一个持续的水平导航栏。点击任何链接，你会看到页面会转场到另一个，但是尾部栏保持了固定。因2个页面都是用了同样的data-id 属性


给工具栏样式主题 Bar theming

头部栏和尾部栏都默认都设”a"主题样式（黑色），因为这两个工具栏在视觉上为页面最首要的

给头部栏和尾部栏设置主题样式　Theming headers and footers

给头部栏和尾部栏设置data-theme属性，并指定不同的字母（a, b, c等）。下面一个例子是把头部栏的主题样式设?b"(蓝色)

<div data-role="header" data-theme="b">
   <h1>Page Title</h1>
</div>

给导航栏的按钮设置主题样式　Theming buttons in toolbars

头部栏里的任何加入的任何链接会自动设为与此工具栏相同的主题样式。给链接增加 data-theme属性并设置，可以让按钮的主题样式与工具栏的不相一致。例如：如果我们给头部栏设定的主题样式为"c"(浅灰)，里面的两个按钮的主题样式默认也会为"c",如果我们想让按钮有所区别，可以给按钮设置 data-theme?b"(蓝色)

<a href="add-user.php" data-theme="b">Save</a>

不同主题的头部栏

不同主题的尾部栏


按钮标记 Button markup options

按钮是Jquery Mobile的核心组件，在其他的组件中也广泛应用。起导航作用的按钮应该写为链接，在表单内起提交作用的按钮-Jquery Mobile会同样的样式来标记。

按钮标记选项 Button markup options

起导航作用的按钮应该写为链接，在表单内起提交作用的按钮,Jquery Mobile会同样的用样式来标记。

将链接样式化为按钮 Styling links as buttons

在page的区域内，可以通过给链接加data-role="button"的属性样式化为按钮。Jquery Mobile会给链接加一些必要的class来把他表现为按钮。

html代码：

<a href="index.html" data-role="button">Link button</a>

基于连接的按钮：

表单按钮 Form buttons

为了容易的样式化按钮，Jquery Mobile自动把type为submi,reset,button或image的按钮元素或输入元素样式化为按钮，所以没有必要增加data-role="button"的属性
基于表单(form-based)的按钮的原始按钮(input)是隐藏的，但是依然保留其标记。 当一个按钮的点击事件触发时，也会在原始的表单按钮上触发点击事件。

本手册由darklord整理编辑。


按钮的图标 Button icons

给按钮添加图标 Adding Icons to Buttons

Jquery Mobile框架包含了一组最常用的移动应用程序所需的图标，为了减少下载的大小，Jquery Mobile包含的是的白色的图标sprite图片，并自动在图标后添加一个半透明的黑圈以确保在任何背景色下图片都能够清晰显示。
给链接添加data-icon 属性，可以添加按钮的图标

html代码

<a href="index.html" data-role="button" data-icon="delete">Delete</a>

带有图标的按钮：

图标 Icon set

data-icon属性可以被用来创建如下所示的图标
左箭头data-icon="arrow-l"
右箭头data-icon="arrow-r"
上箭头data-icon="arrow-u"
下箭头data-icon="arrow-d"
删除 data-icon="delete"
添加 data-icon="Plus"
减少 data-icon="minus"
检查data-icon="Check"
齿轮 data-icon="gear"
前进 data-icon="Forward"
后退 data-icon="Back"
网格 data-icon="Grid"
五角?data-icon="Star"
警告 data-icon="Alert"
信息 data-icon="info"
首页 data-icon="home"
搜索 data-icon="Search"

图标组 Icon set

默认情况下，所有按钮图标出现在按钮的文本的左侧。
可以通过data-iconpos="top" / "bottom" 属性来覆盖此默认

<a href="index.html" data-role="button" data-icon="delete" data-iconpos="right">Delete</a>

一个图标在右边的按钮：

也可以用 data-iconpos="top"创建图标在文本上方的按钮

一个图标在文字上方的按钮：

也可以用 data-iconpos="bottom"创建图标在文本下方的按钮

一个图标在文字下方的按钮：

你可以通过data-iconpos="notext"创建一个只有图标的按钮。button插件会在屏幕上隐藏文本，但是会把文本作为title属性作为screen readers的问容和支持小提示的浏览器， 例如，把前例中的 data-iconpos="right"替换为data-iconpos="notext"

<a href="index.html" data-role="button" data-icon="delete" data-iconpos="notext">Delete</a>

一个只有图标的按钮

自定义图标 Custom Icons

要使用自定义图标，指定一个唯一的data-icon 值（比如data-icon=“myapp-email ”）?Jquery Mobile的button插件会生成一个class值添加上去，该值由ui-icon-与data-icon的值组合而成（ui-icon-myapp-email ），然后在css中指定这个类的背景图片地址。为了保持视觉效果的一致，请使用png-8格式的白色8*18的透明图标

图标和地址 Icons and themes

在白色图标后的半透明的黑色圆圈确保了在任何背景色下图片都能够清晰显示，也使它能很好的工作在Jquery Mobile主题系统中。以下是一些在不同主题样式下图标按钮的例子

"A"主题下的图标按钮

"B"主题下的图标按钮

"C"主题下的图标按钮


内联按钮 Inline buttons

默认情况下，body里的所有按钮都会被样式化为块级元素，撑大到与页面等宽
但是，如果你想让按钮外观紧凑，宽度只符合里面的文字和icon，那就给按钮添加data-inline="true"的属性

内联的按钮：

如果你有多个按钮想在一行横排，可以在按钮上增加data-inline="true"的属性，这样就可以把按钮样式化为最小宽度，并且浮动，使他们在同一行横排

<div data-inline="true">
   <a href="index.html" data-role="button">Cancel</a>
   <a href="index.html" data-role="button" data-theme="b">Save</a>
</div>

内联的按钮组

如果你想多个按钮在通过一行横排并且容器自动撑大到与页面同宽，可以使用 内容分栏 把多个普通的块级按钮 放入同一行内


组按?Grouped buttons

组按钮 Grouped buttons

有时候，你想把一组按钮放进一个单独的容器内，使他们看起来想一个独立的导航部件。你可以把一组按钮包裹在一个容器内，然后给该容器添加data-role="controlgroup"属性，Jquery Mobile会创建一个垂直的按钮组，删除掉按钮间的margin和阴影，然后只在第一个按钮和最后一个按钮产生圆角，使他们看起来是一组按钮

<div data-role="controlgroup">
  <a href="index.html" data-role="button">Yes</a>
  <a href="index.html" data-role="button">No</a>
  <a href="index.html" data-role="button">Maybe</a>
</div>

按钮组：

默认情况下，组按钮表现为垂直列表，如果给容器添加data-type="horizontal"的属性，则可以转换为水平按钮的列表，按钮会横向一个挨着一个地排列，容器会自动撑大到适应内容（所以要注意横排情况下按钮不要太多，按钮的字也不要太多）

水平的组按钮 Horizontal grouped buttons:


主题化按?Theming buttons

主题化按钮 Theming buttons

Jquery Mobile 内建了几套样式系统，给你定义样式时多种选择，在容器内添加一个按钮后，它就会自动应用他的容器使用的样式系统，使得按钮和页面看起来协调统一，像变色龙
所以放进一个样式主题为a系统（黑色主题）容器的按钮会自动应用a系统样式。如下为实例
a为黑，b为灰底蓝，c为灰底灰，d白底白色 ，e黄底黄色

A主题

B主题

C主题

D主题

E主题

分配系统样式 Assigning theme swatches

给按钮增加data-theme="字母"属性，可以手动的给按钮添加样式，使得按钮不一定非要与父容器的样式相符

<a href="index.html" data-role="button" data-theme="a">Theme a</a>

5个通过data-theme设定不同主题的按

A主题下的不同主题的按钮

B主题下的不同主题的按钮

C主题下的不同主题的按钮

D主题下的不同主题的按钮

E主题下的不同主题的按钮


html格式?HTML Formatting

在Jquery Mobilede页面的内容是完全开放的，但是Jquery Mobile框架提供了一些有用的工具及组件，比如可折叠的面板，多列网格布局等?方便地为移动设备格式化你的内容

html格式化 HTML Formatting

在Jquery Mobile中通过默认方法给内容添加样式是很简单的。我们的目标是让浏览器的默认渲染优先进行，然后我们加了一点小小的padding让页面看起来更有可读性，然后应用主题样式系统来分配字体和颜色
采用熟手优先原则给与了设计者和开发者一个干净的空间工作，而不是和一大堆复杂的样式代码战斗。

默认HTML标记样式 Default HTML markup styling

默认情况下，Jquery Mobile的主题样式为标准的html元素使用标准的html样式，字号，例如header,p,block quotos,a,ul,ol,dl,dt


布局网格 Layout grids

因为屏幕通常都比较窄，所以使用多栏布局的方法在移动设备上不是推荐的方法。但是总有时候你会想要把一些小的元素并排放置（比如按钮，或导航标签)
Jquery Mobile框架提供了一种简单的方法构建基于css的分栏布局，叫做ui-grid
Jquery Mobile提供了两种预设的配置布局：两列布局（class 含有 ui-grid-a）和三列布局 （class 含有 ui-grid-b）—几乎可满足需要列布局的任何情况。网格是100%宽的，不可见（没有背景或边框），也没有padding和margin，所以它们不会影响内部元素的样式

两栏布局 Two column grids

要构建两栏的布局（50/50%），先构建一个父容器，添加一个class名字为：ui-grid-a,内部设置两个字容器，分别给第一个子容器添加class：ui-block-a，第二个子容器添加class：ui-block-b
<div class="ui-grid-a">
   <div class="ui-block-a"><strong>I'm Block A</strong> and text inside will wrap</div>
   <div class="ui-block-b"><strong>I'm Block B</strong> and text inside will wrap</div>
</div><!-- /grid-a -->
如上所见，默认的两栏没有样式，并行排列。分栏的class可以应用到任何类型的容器上。下一个实例中，我们给表单的fieldset添加class="ui-grid-a"，然后给两个button的所在的子容器添
class="ui-block-a"和class="ui-block-b"。使两个容器各自50%的宽
在下面的区块中，我们增加了两个class,增加ui-bar的class给默认的bar padding，增?ui-bar-e的class应用背景渐变以及工具栏的主题e的字体样式。然后在每个网格的标签内增加style="height:120px"的属性来设置高度

三栏布局 Three-column grids

另一种布局的方式是三栏布局，给父容器添加”class="ui-grid-b"，然后分别给三个字容器添?加 class="ui-block-a"，“class="ui-block-b"，”class="ui-block-c"
<div class="ui-grid-b">
   <div class="ui-block-a">Block A</div>
   <div class="ui-block-b">Block B</div>
   <div class="ui-block-c">Block C</div>
</div><!-- /grid-a -->

就会生成一个 33/33/33% 的分栏布局

3列网格布局里面是按钮的示例

以此类推：如果是4栏布局，则给父容器添加class="ui-grid-c"（2栏为a，3栏为b, 4栏为c, 5栏为d。。。。），子容器分别添加class="ui-block-a"，”class="ui-block-b" “class="ui-block-c".....

多行的网格布局 Multiple row grids

网格化布局也适用于多栏布局的方式，比如，如果你指定了一列布局的父容器，里面有9个子容器，则会包裹为3行，每行3个。可以给每行的第一个容器设置为class=ui-block-a来清除浮动，这样9个子容器的class应为：class=ui-block-(a,b,c,a,b,c,a,b,c)重复


可折叠的内容 Collapsible content

可折叠的内容 Collapsible content markup

要创建一个可折叠的区块，先创建一个容器，然后给容器添加data-role="collapsible"属性
容器内直接的标题（h1-h6)子结点，Jquery Mobile会将之表现为可点击的按钮，并在左侧添加一个“+"按钮，表示是可以展开的
在头部后面你可以添加任何想要折叠的html标记。框架会自动把这些标记包裹在一个容器里用以折叠或显
<div data-role="collapsible">
   <h3>I'm a header</h3>
   <p>I'm the collapsible content. By default I'm open and displayed on the page, but you can click the header to hide me.</p>
</div>
如上所示：默认情况下，可折叠容器是展开的，可以通过通过点击头部收缩。给折叠的容器添加data-collapsed="true"的属性，可以设为默认收缩
<div data-role="collapsible" data-collapsed="true">

可折叠的内容采用了精简的样式，我们仅仅在内容和标题间添加了一些margin，标题则采用它所在容器的默认主题

嵌套的折叠 Nested Collapsibles

折叠组 Collapsible sets

通过给父容器添加data-role="collapsible-set"属?然后每一个子容器data-role="collapsible"属性，可以让容器展开时，其他容器被折叠的效果，类似手风琴组件


给内容主?Theming content

给内容主题 Theming content

页面的主题内容区域（标有 data-role="content"属性的容器），应该通过给data-role="page"属性的容器增加 data-theme属性来确保不管页面多高背景色都能够在整个页面都应用到 （如果你只为data-role="content"容器添加了data-theme属性，则背景色会在内容结束部分停止，可能会造成固定尾部栏和内容之间产生留白
<div data-role="page" data-theme="a">

给折叠区块主题 Theming collapsible blocks

给可折叠区块的容器添加data-theme属性，就可以给折叠块的标题设置主题。图标和折叠的内容目前还不能通过data-theme属性设置，但是可以通过自定义的css设置
<div data-role="collapsible" data-collapsed="true" data-theme="a">

主题的示例 Themed examples

主题a

主题b

主题c

主题d

主题e


表单元素 Form elements

所有的表单元素都是由标准的html元素控制的，然后又得到增强，使他们更吸引人并且容易使用。在不支持Jquery Mobile的浏览器下仍然是可用的，因为它们都是基于原生的html元素.

表单基础 Form basics

Jquery Mobile提供了一套完整的，适合触摸操作的表单元素，他们都是基于原生的html元素

表单结构 Form structure

所有的表单都应该被包裹在一个form标签内，这个标签应该指定好action和method 属性用来控制与服务器传送数据的方法

html代码

<form action="form.php" method="post"> ... </form>

标记的规约 Markup Conventions

在Jquery Mobile中组织表单时，大多数创建普通的 HTTP post ，get方式的表单是需要遵守的规约依然是适用的? 但是有一点要注意，form的id属性不仅需要在该页面内唯一? 也需要在整个网站的所有页面中是唯一的
这是因为Jquery Mobile的单页面内导航的机制使得多个不同"page"可以同时在DOM中出现，所以你必须给表单使用不同的id属性，以保证在每个DOM中的表单的ID都是不同的。（当然，请务必给内部的label元素合适的使用for属性）

表单元素的自动初始化 Auto-initialization of form elements

默认情况下，Jquery Mobile会自动把原生的表单元素增强为适合触摸操作的组件。这是它通过标签名寻找表单元素，然后对他们执行Jquery Mobile插件的方法内部实现的，所以比如说，select元素被找到后，Jquery Mobile通过用selectmenu插件进行初始化，而一个属性为type="checkbox"的input元素会被checkboxradio插件来增强。初始化完毕后，你可以用他们的Jquery UI的组件的方法通过程序进一步使用或设定他们的增强功能。（查看 查找可用的方法）

防止表单元素被自动初始化 Preventing auto-initialization of form elements

如果你需要某表单元素不被Jquery Mobile 处理，只需要给这个元素增加 data-role="none" 属性

html代码

<label for="foo">
  <select name="foo" id="foo" data-role="none">
   <option value="a" >A</option>
   <option value="b" >B</option>
   <option value="c" >C</option>
</select>
或者，如果你不想增加上述的属性，可以设置页面插件?keepNative选项（默认情况下为[data-role="none"]），来自定义用来防止初始化的选择器。请务必在mobileinit事件的处理程序中设置这个选项，能让第一个页面以及随后被加载的页面应用此设置

html代码

$(document).bind('mobileinit',function(){
$.mobile.page.prototype.options.keepNative = "select, input.foo, textarea.bar";
});
select元素情况比较特殊。如果select元素在表单当中，上例会阻止针对页面中select 元素的所有的增强行为。如果你想保持菜单本身的外观与表现，行为，同时又想通过Jquery Mobile增强select的按钮的视觉外观，你可以在mobileinit的回调函数中.mobile.nativeSelectMenu设为true作为全局设置或者在每个元素上逐个使用data-native="true"进行设置

动态的表单布局 Dynamic form layout

在Jquery Mobile中，所有的表单元素都被设计成弹性宽度以适应不同移动设备的屏幕宽度。在Jquery Mobile中内建的一个优化就是根据屏幕宽度的不同,label和表单元素的宽度是不同的
如果屏幕宽度相对窄（小于480px),label元素会被样式化为块级元素，使他们能够置于表单元素上方，节省水平空间
在比较宽的屏幕上，label和表单元素会被样式化为两列的网格布局的一行中，充分利用页面的空间

表单内区域容器　Field containers

我们建议把表单内的每一个label/表单元素对用div或fieldset容器包裹，然后增加data-role="fieldcontain"属?，以改善标签和表单元素在宽屏设备中的样式。Jquery Mobile会自动在容器底部添加一条细边框作为分隔线，使得label/表单元素对在快速扫视时看起来对齐

html代码

<div data-role="fieldcontain">
...label/input code goes here...
</div>

刷新表单元素 Refreshing form elements

每一个表单组件都有刷新方法。以下是实例

html代码

复选按钮

$("input[type='checkbox']").attr("checked",true).checkboxradio("refresh");

单选按钮组:

$("input[type='radio']").attr("checked",true).checkboxradio("refresh");

选择列表::

var myselect = $("select#foo");
myselect[0].selectedIndex = 3;
myselect.selectmenu("refresh");

滑动条

$("input[type=range]").val(60).slider("refresh");

开关 (they use slider):

var myswitch = $("select#bar");
myswitch[0].selectedIndex = 1;
myswitch .slider("refresh");


表单元素示例 Form element gallery

此页面包含了通过渐进增强驱动的表单元素。原生的表单元素有时被隐藏了，但他们的value值被保存了，所以表单可以正确的提交
不支持自定义组件的浏览器也能使用它们，因为所有表单组件都基于原生的html表单元素.

文本输入框 Text inputs

文本输入域 Textarea:

搜索输入框 Search inputs

滑动条 Slider

开关 Flip toggle switches

复选按钮 checkbox

文字设置

单选按钮组 radiobox

列表按钮?select

按钮 button


文本输入?Text inputs

文本输入框 Text inputs

文本输入框和文本输入域使用标准的html标记的，然后Jquery Mobile会让他们变得更吸引人而且易于触摸使用
要使用输入标准文字的输入框，给input增加type="text"属性。注意要把label的for属性设为input的id值，使他们能够在语义上相关联，并且要用div容器包裹它们，并给他设定data-role="fieldcontain"属性

HTML 代码:

<div data-role="fieldcontain">
    <label for="name">Text Input:</label>
    <input type="text" name="name" id="name" value=""  />
</div>

文本输入?Text Input:

密码输入框 Password inputs

给input设置type="password"属性，可以设置为密码框，注意要把label的for属性设为input的id值，使他们能够在语义上相关联，并且要用div容器包裹它们，并给他设定data-role="fieldcontain"属性

HTML 代码:

<div data-role="fieldcontain">
    <label for="password">Password Input:</label>
    <input type="password" name="password" id="password" value="" />
</div>

密码输入框 Password inputs

其他的标准的HTML5输入框类型 More standard HTML5 input types

在Jquery Mobile中，你可以使用新的HTML5输入框类型，比如email, tel, number。Jquery Mobile会把某些类型的输入框降级为普通的文字输入框（目前?range和search）。你可以在页面的插件选项里设置，把需要的input类型降级为普通的文字输入框

文本域 Textareas

对于多行输入可以使用textarea元素。Jquery Mobile框架会自动加大文本域的高度防止出现在移动设备中很难使用的滚动条的出现
注意要把label的for属性设为input的id值，使他们能够在语义上相关联，并且要用div容器包裹它们，并给他设定data-role="fieldcontain"属性

HTML 代码:

<div data-role="fieldcontain">
    <label for="textarea">Textarea:</label>
    <textarea cols="40" rows="8" name="textarea" id="textarea"></textarea>
</div>

文本域 Textareas

本手册由 七月，前端攻城师 整理编辑


搜索输入? Search inputs

搜索输入框 Search inputs

搜索输入框是一个新兴的html元素，外观为圆角，当你输入文字后右边会出现一个叉的图标，点击则会清除你输入的内容。给input增加type="search" 属性来定义
注意要把label的for属性设为input的id值，使他们能够在语义上相关联，并且要用div容器包裹它们，并给他设定data-role="fieldcontain"属性

HTML 代码:

<div data-role="fieldcontain">
    <label for="search">Search Input:</label>
    <input type="search" name="password" id="search" value="" />
</div>

搜索输入框 Search inputs

本手册由 七月，前端攻城师 整理编辑


滑动?Slider

滑动条 Slider

给input的设置一个新的HTML5属性为type="range"，可以给页面添加滑动条组件，可以指定它的value值（当前值），min和max属性的值配置滑动条。Jquery Mobile会解析这些属性来配置滑动条。当你滑动滑动条时，input会随之更新数值，反之亦然，使你能够很简单的在表单里提交数值。注意要把label的for属性设为input的id值，使他们能够在语义上相关联，并且要用div容器包裹它们，并给他设定data-role="fieldcontain"属性

HTML 代码:

<div data-role="fieldcontain">
    <label for="slider">Input slider:</label>
     <input type="range" name="slider" id="slider" value="0" min="0" max="100"  />
</div>

滑动条 Slider

设置min和max属性的值你可以配置滑动条上下能取到的值，而value值是用来指定滑动条初始的位置和input框内的值
滑动杆同样对键盘有响应。右箭头，上箭头，Page Up 键可以用来增加当前值，左箭头，下箭头 ，Page Down键则减少当前值。Home 键和 End 键则可以分别调到滑动条的最小值和最大值

刷新滑动条 Refreshing a slider

如果你想通过js手动控制滑动条，务必调用 refresh 方法刷新滑动条的样式
  $("input[type=range]").val(60).slider("refresh");


开?Flip toggle switches

开关 Flip toggle switches

开关在移动设备上是一个常用的ui元素，用来二元的切换开/关或者输入true/false类型的数据。你可以像滑动框一样拖动开关，或者点击开关任意一半进行操作
创建一个只有2个option的选择菜单就可以构造一个开关了。第一个option会被样式化为 开，第二个option会被样式化为 关，所以请注意代码书写顺序。注意要把label的for属性设为input的id值，使他们能够在语义上相关联，并且要用div容器包裹它们，并给他设定data-role="fieldcontain"属性。

HTML 代码:

<div data-role="fieldcontain">
    <label for="slider">Select slider:</label>
    <select name="slider" id="slider" data-role="slider">
        <option value="off">Off</option>
        <option value="on">On</option>
    </select>
</div>

开?Flip toggle switches

刷新开关 Refreshing a flip switch

如果你想通过js手动控制开关，务必调用 refresh 方法刷新样式
var myswitch = $("select#bar");
    myswitch[0].selectedIndex = 1;
    myswitch .slider("refresh");


复选按钮 Checkboxes

复选框用来提供一组选项，可以选中不止一个选项。传统的桌面程序的单选按钮组没有对触摸输入的方式进行优化，所以在Jquery Mobile中，label也被样式化为复选按钮，使按钮更长，容易点击。并添加了自定义的一组图标来增强视觉反馈。
单选按钮组和复选按钮组都是用标准的html代码写的，但是都被样式化得更容易点击。你所看见的控件其实是覆盖在input上的label元素， 所以如果图片没有正确加载，你仍然可以正常使用控件。在大多数浏览器里，点击label会自动触发在input上的点击，但是我们不得不为部分不支持该特性的移动浏览器人工去触发该点击。在桌面程序里，键盘和屏幕阅读器也可以使用这些控件。
要创建一组复选框，为input添加 type="checkbox"属性和相应的label即可。注意要把label的for属性设为input的id值，使他们能够在语义上相关联。
因为复选按钮使用label元素放置checkbox后，用来显示其文本，我们推荐把复选按钮组用fieldset容器包裹，并给fieldset容器内增加一个legend 元素，用来表示该问题的标题。
最后，还需将fieldset包裹在有data-role="controlgroup"属性的div 里以便于将该组元素和文本框，选择框等其他表单元素同时设置样式。

HTML 代码:

<div data-role="fieldcontain">
<fieldset data-role="controlgroup">
<legend>Agree to the terms:</legend>
<input type="checkbox" name="checkbox-1" id="checkbox-1" class="custom" />
<label for="checkbox-1">I agree</label>
</fieldset>
</div>

垂直成组的复选按钮组 Vertically grouped checkboxes

通常情况下，复选按钮组会置于标题下面。 Jquery Mobile会自动移除按钮间的margin，给按钮组上下添加圆角，使得单选按钮组看起来为一个整体。

水平的复选按钮组 Horizontal toggle sets

复选按钮组也可用作复选的水平按钮组，,可以同时选择多个按钮。比如说文字编辑器的粗体,斜体, 下划线。只需要为fieldset添加 data-type="horizontal"属性即可。

<fieldset data-role="controlgroup" data-type="horizontal" data-role="fieldcontain">

Jquery Mobile会自动将标签浮动，并排放置，并隐藏复选按钮的icon,并给左右两边的按钮增加圆角。

Refreshing a checkbox

复选按钮组也可用作复选的水平按钮组，,可以同时选择多个按钮。比如说文字编辑器的粗体,斜体, 下划线。只需要为fieldset添加 data-type="horizontal"属性即可。


复选按?Checkboxes

单选按钮组 Radio buttons

复选框用来提供一组选项，可以选中不止一个选项。传统的桌面程序的单选按钮组没有对触摸输入的方式进行优化，所以在Jquery Mobile中，label也被样式化为复选按钮，使按钮更长，容易点击。并添加了自定义的一组图标来增强视觉反馈
单选按钮组和复选按钮组都是用标准的html代码写的，但是都被样式化得更容易点击。你所看见的控件其实是覆盖在input上的label元素?所以如果图片没有正确加载，你仍然可以正常使用控件。在大多数浏览器里，点击label会自动触发在input上的点击，但是我们不得不为部分不支持该特性的移动浏览器人工去触发该点击。在桌面程序里，键盘和屏幕阅读器也可以使用这些控件
要创建一组复选框，为input添加 type="checkbox"属性和相应的label即可。注意要把label的for属性设为input的id值，使他们能够在语义上相关联
因为复选按钮使用label元素放置checkbox后，用来显示其文本，我们推荐把复选按钮组用fieldset容器包裹，并给fieldset容器内增加一个legend 元素，用来表示该问题的标题

最后，还需将fieldset包裹在有data-role="controlgroup"属性的div 里以便于将该组元素和文本框，选择框等其他表单元素同时设置样式?p>

HTML 代码:

<div data-role="fieldcontain">
  <fieldset data-role="controlgroup">
     <legend>Agree to the terms:</legend>
     <input type="checkbox" name="checkbox-1" id="checkbox-1" class="custom" />
     <label for="checkbox-1">I agree</label>
     </fieldset>
</div>

垂直成组的复选按钮组 Vertically grouped checkboxes

通常情况下，复选按钮组会置于标题下面,Jquery Mobile会自动移除按钮间的margin，给按钮组上下添加圆角，使得单选按钮组看起来为一个整体

水平的复选按钮组 Horizontal toggle sets

复选按钮组也可用作复选的水平按钮组，,可以同时选择多个按钮。比如说文字编辑器的粗体,斜体, 下划线。只需要为fieldset添加 data-type="horizontal"属性即可
<fieldset data-role="controlgroup" data-type="horizontal" data-role="fieldcontain">
Jquery Mobile会自动将标签浮动，并排放置，并隐藏复选按钮的icon,并给左右两边的按钮增加圆角

刷新复选按钮　Refreshing a checkbox

如果你想通过js手动控制复选按钮，务必调用 refresh 方法刷新样式
$("input[type='checkbox']").attr("checked",true).checkboxradio("refresh");


选择菜单 Select menus

选择菜单摒弃了原生的select 元素的样式，原生的select元素被隐藏，并被一个由jquery mobile框架自定义样式的按钮和菜单替代。菜单是ARIA的（即Accessible Rich Internet Applications)并且桌面电脑的键盘也是可访问的。
当被点击时，手机自带的原生的菜单选择器会打开。菜单内某个值被选中后，自定义的选择按钮的值更新为你选择的那一个。
要添加这样的选择菜单组件，使用标准的select 元素和位于其内的一组option元素。注意要把label的for属性设为select的id值，使他们能够在语义上相关联。把它们包裹在data-role="fieldcontain" 的div 里面进行分组。
框架会自动找到 所有的select 元素并自动把他们增强为自定义的选择菜单。

选择菜单 Select menus

<div data-role="fieldcontain">
   <label for="select-choice-1" class="select">Choose shipping method:</label>
   <select name="select-choice-1" id="select-choice-1">
     <option value="standard">Standard: 7 day</option>
     <option value="rush">Rush: 3 days</option>
     <option value="express">Express: next day</option>
     <option value="overnight">Overnight</option>
   </select>
</div>

选择菜单 Select menus

就会形成这样的列表菜单

注意：原生的选择菜单不能通过multiple="multiple" 属性进行多项选择，如果你有这个需求，我们建议使用自定义菜单。

使用自定义菜单的选项 Option to use custom menus

你可以自己选择使用自定义样式的选择菜单，而不是原生的。这样可以给菜单定义主题，使你的网站在视觉和体验上更加出色，而且在跨平台时也能够保持一致性。 并且，他提供了对菜单的多项选择，并且修复了某些平台缺失的功能，比如Android对于optgroup的支持，并且增加了一种优雅的方式来处理占位符值。（下面会解释）。最后，自定义的菜单在桌面电脑浏览器上视觉上会更出色，因为原生的菜单在桌面电脑上看上去比移动设备上要小一些，那如果你的项目主要面对桌面用户的话，那视觉上就有点奇怪了。

注意，把原生菜单解析为自定义菜单的话会有性能开销。如果你页面里面有很多选择菜单，，或者某个菜单有很多选项，就会影响页面性能，所以我们的建议是不要滥用自定义菜单。

给菜单添加data-native-menu="false"属性，就可以把菜单转为自定义菜单。或者，在页面的mobileinit事件的回调函数中将选择菜单的nativeMenu设为false也可以达到相同的效果。这将会在全局把所有的选择菜单都默认设为自定义菜单。以下代码必须在jQuery加载后且 jQuery Mobile加载前添加：

$(document).bind('mobileinit',function(){
    $.mobile.selectmenu.prototype.options.nativeMenu = false;
});

如果菜单的选项不多的话，会以小弹出框的形式和动画出现。

如果选择菜单太多的选项而不能显示在屏幕中，框架会自动创建一个新 "page"，表现为一个标准的列表，包含了所有的选项。使我们能通过设备原生的滚动条在很长的一个列表内选择所有的选项。页面的标题就是label的文本。

占位符选项 Placeholder options

• 没有值的option（或者一个空值属性）
• 没有文本节点的option
• 带有data-placeholder="true"属性的option。（使你将带有值以及文本节点的选项用来作为占位符。）

你可以通过插件的 hidePlaceholderMenuItems 选项禁用该特性，方法如下：

$.mobile.selectmenu.prototype.options.hidePlaceholderMenuItems = false;

禁用选项 Disabled options

jQuery Mobile会把带有disabled 属性的选项禁用并且在样式上标记。

在下面的实例中，第二个选项 "Rush: 3 days"被设置为禁用：

对于选项组的支持 Optgroup support

如果一个选择菜单包含 optgroup元素，jQuery Mobile会根据label的文本创建一个分割项的选项：

多项选择 Multiple selects

如果给你的选单加入multiple 属性，jQuery Mobile通过一系列的方式来增强元素：
• 菜单里面会创建一个header元素并在占位符文本旁边显示一个关闭按钮。
• 点击选项时不会关闭弹出菜单。
• 选项旁边会出现类似checkbox的图标。
• 超过2项被选择时会在选择按钮里出现一个表示当前选项数目的气泡。
• 选择的各项文本会在按钮里变成一行用逗号分隔的文本。如果按钮不够宽，多余的部分则会变成省略号。
• 如果没有选项被选择，按钮文本会保持占位符的文本
• 如果占位符元素不存在，默认按钮文本会是空白的，header也仅仅显示一个关闭按钮。因为这不是友好的用户体验， 我们建议你在使用多选菜单时总是指定一个占位符元素。。

当选项太多以至于菜单会在一个新的页面出现时，占位符文本会在没有选项是显示在按钮中，label文本会在菜单的header中显示。这与小对话框式的选择菜单不同的，小对话框式的选择菜单的占位符文本会同时显示在按钮和header中。

Data 属性的支持 Data attribute support

你可以对select指定jqmobile的针对button 的data- 属性。例如：我们给下面的例子添加了 theme, icon and inline 属性。

刷新选择菜单 Refreshing a select

如果你通过js操作了选择菜单，务必通过refresh 方法来更新他的样式。
var myselect = $("select#foo");
myselect[0].selectedIndex = 3;
myselect.selectmenu("refresh");


表单的主题样?Form themes

表单的主题样式 Form themes

Jquery Mobile内建了一套样式主题系统，让你给页面和表单添加样式时有丰富的选择。默认情况下所有的表单元素都会应用与父容器相同的主题样式。是的表单元素融合进他们的布局中。给表单元素单独地应用 data-theme 属性，可以指定它的主题样式，使他在布局中凸现出
下面实例中的所有表单的html都是相同的，并且没有为表单内的元素单独地指定主题样式。表单之间唯一的不同就是给表单父容器通过 data-theme 属性指定了不同的主题样式。这表现了表单元素自动应用父容器的主题样式的特性

BODY为A主题

BODY为B主题

BODY为C主题

BODY为D主题

BODY为E主题


表单的提?Form submission

ajax的表单提交 Ajax form submission

Jquery Mobile会自动通过ajax处理表单的提交，并在表单页面和结果页面之间创建一个平滑的转场效果。注意请在form元素上正确设定action 和method属性，保证表单的提交。如果没有指定，提交方法默认为get,action默认为当前页的相对路径（通过$.mobile.path.get()方法取得
表单也可以像链接一样指定转场效果的属性，比如data-transition="pop"，和data-direction="reverse".如果不希望通过ajax提交表单，可以在全局事件禁用ajax，或给form设定 data-ajax="false" 属性。target 属性也可以在form上设置，表单提交时默认为浏览器的打开规则。。而与链接不同，rel 属性不可以在form上设

非ajax的处理 Non-Ajax handling

要防止表单提交时自动通过ajax提交，给form元素增加 data-ajax="false"属性。也可以通过ajaxFormsEnabled方法在全局控制.

Simple Ajax form example

本页面展示了表单自动通过ajax处理的提交。下面的表单采用常规（get 方式提交）forms-sample-response.php 。在提交时，Jquery Mobile会确保指定的Url地址可以通过Ajax获取，并且适当的处理。请注意，就像普通的HTTP请求表单提交一样，Jquery Mobile允许通过get请求成功得到的结果页通过更新Url的哈希值被添加为收藏页。而就像普通的表单提交一样，post请求不包含查询参数，因此结果页不能被添加为收藏页


表单插件的方法 Form Plugin Methods

在将jquery mobile对表单控件进行自定义增强之后，你依然可以通过插件的方法手动的控制他们的许多属性。当前可用的方法已经列举在下面。你可以查看Github上的项目来检查更新，我们正在努力完成中

选择菜单 Select menus

open 打开一个选择菜单
$('select').selectmenu('open');

close 关闭一个选择菜单
$('select').selectmenu('close');

refresh: 更新自定义菜单来体现原生元素的值。如果自定义菜单的选项数目和原生的select元素option的数目不一样，它将会重建该自定义菜单。同样，如果你传递一个true参数，你可以强制执行该重建

//刷新选择菜单的?
$('select').selectmenu('refresh');

//刷新选择菜单的值并重建菜单
$('select').selectmenu('refresh', true);

enable:启用该选择菜单
$('select').selectmenu('enable');

disable: 禁用该选择菜单.
$('select').selectmenu('disable');

文本框 Textinput

enable: 启用文本域
$('input').textinput('enable');

disable: 禁用文本域
$('textarea').textinput('disable');

单选复选框 checkboxradio

enable: 启用单选复选框.
$('input').checkboxradio('enable');

disable: 禁用单选复选框.
$('input').checkboxradio('disable');

refresh: 刷新单选复选框的值
$('input').checkboxradio('refresh');

滑动条 slider

enable: 启用滑动
$('input').slider('enable');

disable: 禁用滑动
$('input').slider('disable');

refresh: 刷新滑动条的
$('input').slider('refresh');

表单按钮 Form buttons

enable: 启用 按钮.
$('input').button('enable');

disable: 禁用按钮
$('input').button('disable');

降级的表单输入框元素 Degraded Form Input Types

Jquery Mobile在应用了增强效果之后，会把几种html5输入框类型降级为了type=text或者type=number的输入框类型。例如，type=range的输入框被增强成为一个滑动条，类型被设置为数字，而type=search的输入框在我们添加了一些针对搜索输入文字的样式后会降级为type=text输入框
页面插件包含一组input的类型，这些input的类型可以设置为true，这意味着它们会降级成type=text输入框，或者false，意味着不处理，或者一个字符串比如"number"，意为将他们转化为该类型
你可以配置哪些类型可以通过页面插件 degradeInputs选项来改变，而哪一些是需要通过
$.mobile.page.prototype.options.degradeInputs 在外部手动操作，其中以下type可以使用 color, date, datetime, "datetime-local", email, month, number, range, search, tel, time, url, week.
请务必在 mobileinit 事件的处理函数里配置这些选项，以便于在加载第一个页面以及后续页面都能应用这些选项


Jquery UI's Datepicker

Jquery UI'的移动版日期拾取器插件 Jquery UI's Datepicker Styled for mobile

下面这个示例是Jquery UI 为移动设备开发的日期拾取器插件，这个插件并不包含在Jquery Mobile默认库当中，你需要自己手动include这些文件

日期拾取器 Datepicker

使用说明 Usage Instructions

日期拾取器自动从type="date"属性的输入框中生成

<label for="date">Date Input:</label>
<input type="date" name="date" id="date" value="" />

我们推荐将label和input包裹在data-role=fieldcontain的div中作为描述，而且这些元素应该添加form中以便在 C级浏览器也能够正常访问
注意：该插件并不包含在Jquery Mobile默认库当中，你需要包含以下文件来使用该插件：

<link rel="stylesheet" href="Jquery.ui.datepicker.mobile.css" />
<script src="Jquery.ui.datepicker.js"></script>
<script src="Jquery.ui.datepicker.mobile.js"></script>

你同样可能需要配置页面插件来使"date" input 转换为"text" input 以避免原生"date" input与我们自定义的datepicker所冲突，要实现这样的功能需要在"mobileinit"事件处理函数中使用如下代码：

<script>
      //reset type=date inputs to text
      $( document ).bind( "mobileinit", function(){
      $.mobile.page.prototype.options.degradeInputs.date = true;
      });
</script>

把这些代码放置在在Jquery加载后，Jquery Mobile加载前。你可以查看该页面的源代码是如何写的


列表 list

列表 List views

列表用来展示数据，导航，结果列表以及数据条目，所以Jquery Mobile提供了多种的列表类型以适应大多数的设计模式。

本手册由darklord整理编辑。


列表标记的规?List markup conventions

列表标记的规约List markup conventions

1.基本的带连接的列表 Basic linked list

列表的代码为一个含 data-role="listview" 属性无序列表ul。Jquery Mobile会把所有必要的样式(列表项右出现一个向右箭头，并使列表与屏幕同宽等)应用在列表上，使其成为易于触摸的控件。当你点击列表项时，Jquery Mobile 会触发该列表项里的第一个链接，通过ajax请求链接的URL地址，在DOM中创建一个新的页面并产生页面转场效果。

html代码

<ul data-role="listview">
    <li><a href="index.html">Acura</a></li>
    <li><a href="index.html">Audi</a></li>
</ul>

效果图：

2.嵌套的列列表 Nested list

通过“ul” “ol”的li中嵌套子 ul ，ol你可以创建嵌套列表。当一个拥有子列表的列表项被点击时，Jquery Mobile框架会生成一个新的ul页面充满屏幕，并自动生成一个为父列表项名称为标题的header,以及一个子列表。这个动态生成的嵌套的列表默认的主题样式“b"(蓝色)，提示你是在二级菜单里。列表可以嵌套多层，Jquery Mobile会自动处理这些链接和页面。

html代码

<ul>
  <li>Pets
     <ul>
      <li><a href="index.html">Canary</a></li>
       <li><a href="index.html">Cat</a></li>
     </ul>
   </li>
   <li>Farm animals
     <ul>
       <li><a href="index.html">Chicken</a></li>
       <li><a href="index.html">Cow</a></li>
     </ul>
   </li>
</ul>

效果图：

3.数字排序的列表Numbered list

通过有序列表ol可以创建数字排序的列表用来表现顺序序列比如说搜索结果或者电影排行榜时非常有用。当增强效果应用到列表时，Jquery Mobile优先使用css的方式给列表添加编号，当浏览器不支持这种方式时，框架会采用JavaScript将编号写入列表中。

html代码

<ol data-role="listview">
   <li><a href="index.html">The Godfather</a></li>
   <li><a href="index.html">Inception</a></li>
</ol>

效果图：

4.只读列表 Read-only list

列表也可以用来展示没有交互的条目，通常会是一个内嵌的列表。通过有序或者无序列表都可以创建只读列表，列表项内没有链接即可，Jqmobil默认将他们的主题样式为“c”白色无渐变色，并把字号设为比可点击的列表项的小，以节省空间。

html代码

<ul data-role="listview" data-inset="true">
   <li>Acura</li>
   <li>Audi</li>
</ul>

效果图：

5.拆分的按钮列表 Split button lists

有时每个列表项会有多于一个操作，这时拆分按钮用来提供2个独立的可点击的部分：列表项本身和列表项右边的小icon。要创建这种拆分按钮，在li 插入第二个链接即可，框架会创建一个竖直的分割线，并把链接样式化为一个只有icon的按钮，记得设置title属性以保证可访问性。
你可以通过指定data-split-icon属性来设置位于右边的分隔项的图标（图标详情参见 图标?分隔项的主题样式可以通过 data-split-theme属性来设置。

html代码

<ul data-role="listview" data-split-icon="gear" data-split-theme="d">
  <li>
    <img src="images/album-bb.jpg" />
    <h3><a href="index.html">Broken Bells</a></h3>
    <p>Broken Bells</p>
    <a href="lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album</a>
  </li>
  <li>
    <img src="images/album-hc.jpg" />
    <h3><a href="index.html">Warning</a></h3>
    <p>Hot Chip</p>
    <a href="lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album</a>
  </li>

</ul>

效果图：

6.列表分割项 List dividers

列表项也可以转化为列表分割项，用来组织列表，使列表项成组。给任意列表项添加data-role="list-divider" 属性即可。默认情况下列表项的主题样式为“b“浅灰)，但给列表（ul或ol）添加 data-dividertheme 属性可以设置列表分割项的主题样式。

html代码

<ul data-role="listview">
  <li data-role="list-divider">A</li>
   <li><a href="index.html">Adam Kinkaid</a></li>
   <li><a href="index.html">Alex Wickerham</a></li>
   <li><a href="index.html">Avery Johnson</a></li>
   <li data-role="list-divider">B</li>
   <li><a href="index.html">Bob Cabot</a></li>

</ul>

效果图：

7.搜索过滤框 Search filter

Jquery Mobile提供了一种非常方便的方式通过在客户端进行的搜索机制过滤列表。要使一个列表可过滤，只需为列表设置data-filter="true" 属性即可。框架会在列表上方增加一个搜索框，当用户在搜索输入框中输入时，Jquery Mobile会自动过滤掉不含输入字符的列表项。
搜索输入框默认的字符为 "Filter items...".通过设置mobileinit事件的绑定程序或者给 $.mobile.listview.prototype.options.filterPlaceholder 选项设置一个字符串，或者给列表设置data-filter-placeholder属性，可以设置搜索输入框的默认字符。

html代码

<ul data-role="listview" data-filter="true" >
    <li><a href="index.html">Acura</a></li>
    <li><a href="index.html">Audi</a></li>
</ul>

效果图：

8.文本格式和计数气泡 Text formatting & counts

Jquery Mobile支持通过HTML语义化的标签来显示列表项中所需常见的文本格式（比如 标题/描述，二级信息，计数等）
  • • 将数字用一个元素包裹，并添加ui-li-count的class,放置于列表项内，可以给列表项右侧增加一个计数气泡
    • ;
  • • 要添加有层次关系的文本可以使用标题来强调，用段落文本来减少强调
    • ;
  • • 补充信息（比如日期）可以通过包裹在class="ui-li-aside"的容器中来添加到列表项的右侧
    • ;

html代码

<ul data-role="listview">
  <li data-role="list-divider">Friday, October 8, 2010 <span class="ui-li-count">2</span></li>
  <li>
     <h3><a href="index.html">Stephen Weber</a></h3>
     <p><strong>You've been invited to a meeting at Filament Group in Boston, MA</strong></p>
     <p>Hey Stephen, if you're available at 10am tomorrow, we've got a meeting with the Jquery team.</p>
     <p class="ui-li-aside"><strong>6:24</strong>PM</p>
   </li>
   <li>
     <h3><a href="index.html">Jquery Team</a></h3>
     <p><strong>Boston Conference Planning</strong></p>
     <p>In preparation for the upcoming conference in Boston, we need to start gathering a list of sponsors and speakers.</p>
     <p class="ui-li-aside"><strong>9:18</strong>AM</p>
   </li>
</ul>

效果图：

html代码

<ul data-role="listview">
  <li><a href="index.html">Inbox</a> <span class="ui-li-count">12</span></li>
   <li><a href="index.html">Outbox</a> <span class="ui-li-count">0</span></li>
</ul>

效果图：

9.列表项的缩略图与图标 Thumbnails & icons

要在列表项左侧添加缩略图，只需在列表项中添加一幅图片作为第一个子元素即可。Jquery Mobile会自动缩放图片为大小80px的正方形，而要使用标准?6*16的图标作为缩略图的话，为图片元素添加ui-li-icon class即可

html代码

<ul data-role="listview">
  <li>
     <img src="images/album-bb.jpg" />
     <h3><a href="index.html">Broken Bells</a></h3>
     <p>Broken Bells</p>
   </li>
   <li>
     <img src="images/album-hc.jpg" />
    <h3><a href="index.html">Warning</a></h3>
     <p>Hot Chip</p>
   </li>
</ul>

效果图：

html代码

<ul data-role="listview">
  <li><img src="images/gf.png" alt="France" class="ui-li-icon"><a href="index.html">France</a> <span class="ui-li-count">4</span></li>
   <li><img src="images/de.png" alt="Germany" class="ui-li-icon"><a href="index.html">Germany</a> <span class="ui-li-count">4</span></li>
</ul>

效果图：

10.内嵌的列表 Inset lists

如果列表需要嵌入在有其他内容的页面中，内嵌列表会将列表设为边缘圆角，周围留有magin的块级元素。给列表（ul或ol）添加 data-inset="true"属性 即可

html代码

<ul data-role="listview" data-filter="true" >
    <li><a href="index.html">Acura</a></li>
    <li><a href="index.html">Audi</a></li>
</ul>

效果图：

更新列表 Updating lists

如果你给列表项添加了列表项，你需要调用refresh()方法将列表的样式更新并且将添加进的列表项生成嵌套列表。例如： $('ul').listview('refresh');
我们目前正在改进refresh方法，所以请关注Github。


Easy CHM - http://www.eTextWizard.com

您现在使用的CHM文件由Easy CHM的未注册版本制作而成。
注册版本不会在CHM里自动添加此页面。

制作时使用的Easy CHM程序版本号：v3.84
制作日期：2011/04/08

Easy CHM 软件 软件出品: 国华软件 中国北京 |  | 截屏图片
免费下载最新的试用版 | 文件大小: 2989k - 2.84MB | 软件类型: 共享软件 购买注册: 这里

关键词: make chm, create chm, chm制作工具, chm电子书制作工具,chm帮助文件制作工具

描述:

Easy CHM是国华软件推出的一款强大的CHM电子书或CHM帮助文件的快速制作工具。

使用EasyCHM只需要三个步骤就可以完成CHM的制作：
1、用户指定一个目录，EasyCHM会自动导入全部目录及文件;
2、设置CHM编译选项;
3、开始制作。

EasyCHM非常适合个人和单位制作高压缩比的带有全文检索及高亮显示搜索结果的网页集锦、CHM帮助文件、产品说明、公司介绍、CHM电子书等等。

主要功能：

  • 全自动的目录及文件导入（可以包括子目录）;
  • EasyCHM支持导入任意的文件类型;
  • EasyCHM操作速度快，性能稳定，EasyCHM因为上手容易深得广大用户好评;
  • EasyCHM自动生成CHM的目录列表并自动生成所有目录项;
  • 为CHM的目录列表自动添加多级编号;
  • 在编辑目录项、索引项时用到的移动、拖拽、替换等操作中Easy CHM完全支持多选及拖拽操作，避免了一项一项地操作，极大的减少用户手工 － 非常适合企业维护大型CHM帮助文档;
  • 支持批量查找替换多级目录各项的标题文字内容;
  • 允许用户指定从文本文件的第N行自动截取标题;
  • 易用的目录/索引编辑器;
  • 丰富实用的CHM制作选项帮助用户制作更加个性化的专业CHM电子书或CHM帮助文件;
  • EasyCHM自动生成输出Alias和Map头文件;
  • EasyCHM自动生成上下文相关的帮助文件（ContextID），适合于软件公司制作专业的支持Help Context ID的专业帮助文件;
  • EasyCHM可以保存工程文件，方便企业用户编辑维护文档。
  • 批量更换CHM目录各项的图标;
  • 内嵌CHM反编译工具
  • 更多功能

EasyCHM未注册版本的主要限制：

  1. EasyCHM的未注册版本可以制作带任意层级目录的CHM，但是每个CHM的工具栏上都会自动添加一个ABOUT按钮，以提醒用户注册。
    注册版本不会添加ABOUT按钮。
  2. EasyCHM的未注册版本无法保存CHM的通用工程文件，如*.HHP、*.HHC、*.HHK等。
    未注册版本的EasyCHM会自动删除*.HHP、*.HHC、*.HHK这几个文件。
  3. 未注册版本制作的CHM标题上会有Made by UNREGISTERED version of Easy CHM这样的提示您试用的是未注册版本的文字。

注册版本无任何限制，也不会再显示ABOUT按钮或者提示注册的文字。
如果EasyCHM可以为您的工作和学习提供帮助，请注册购买，感谢您给予软件作者的支持。
联系方式:
国华软件站点一: http://www.etextwizard.com
国华软件站点二: http://www.zipghost.com
技术支持信箱: webmaster@etextwizard.com
购买方式:
在线购买:（可提供发票，支持很多种支付方式，包括在线支付、银行电汇、邮政汇款等）
通过“共享软件注册中心”购买单用户企业版

通过“共享软件注册中心”购买单用户家庭版
直接向国华软件注册购买（共3种方式）：
1、招商银行划款:
开户行： 招商银行北京分行双榆树支行
帐 号： 001015570093
户 名： 冯国华
2、中国农业银行金穗卡转帐（注意是卡号）：
金穗卡卡号： 95599 8001 42061 34216
收 款 人： 冯国华
3、中国工商银行牡丹灵通卡转帐：

开户城市：北京
牡丹灵通卡卡号：9558 8202 0000 3186295 （注意是卡号9558820200003186295）
收 款 人： 冯国华

注意事项：
直接向作者注册的用户请在汇出足额的注册费后以EMAIL形式通知作者，同时请尽量提供

  • 汇款日期

  • 汇出城市

  • 您汇到哪个银行帐号？

  • 汇款人姓名

  • 用于接收注册码的信箱（请确保可以接收邮件，最好多提供）

  • 您希望使用的注册用户名（程序将授权给这个用户）

  • 要注册的软件名称及套数

您提供的资料详细些会比较方便确认。
作者在确认支付已完成后将会马上发出注册码。
用户在收到注册信后请尽量给软件作者发个类似“已收到注册码”的确认信 - 感谢您的配合！
免费下载最新的试用版:
http://www.etextwizard.com/cn/download/ecdown.html

系统需求: Win98, WinME, WinXP, Win2000,WinVista, Win7
安装支持: 支持安装及卸载