介绍

jQuery Mobile是一款架构在jQuery核心基础上具有友好触摸交互界面的前端开发框架，jQuery Mobile能够兼容所有流行的手机，平板电脑和桌面（浏览器）平台。

介绍(Introduction)

jQuery Mobile是一个基于jQuery的用户界面框架，兼容所有流行的手机，平板电脑，电子阅读器和桌面（浏览器）平台。为了建立可访问性及普及性访问性和普及，我们遵循渐进增强和响应式网页设计(RWD)原则 。HTML5标签结构使它容易上手，但是一个强大的API却能让你轻松的深入定制。

页面和对话(Pages & Dialogs)

在 jQuery Mobile 中每个页面(page)容器(通常是div标签)都包含一个 data-role="page" 属性。在“页面”容器内，可以使用任何有效的HTML标记，但在典型的jQuery Mobile页面里至少有俩data-role为“header”(页头)和“ footer”(页脚)属性的div，其余部分为可选内容。

页面可以设计成dialog(对话框)的样子，让页面看起来像是模态叠加的方式。想要以模态对话框的外观呈现一个标准页面只需添加 data-rel =“dialog” 属性。转场也可以设置在对话框的链接上。

AJAX导航和转场(AJAX Navigation & Transitions)

jQuery Mobile 有个 AJAX导航系统(AJAX navigation system) ，该系统通过自动“劫持”把标准的链接和表单提交转化为一个AJAX请求，并使其支持一组丰富的转场(page transitions )动画样式。在这里后退按钮是被完全支持的，并且具有预读取、缓存、动态注入及高级用例脚本页面等特性。

每当单击链接或表单提交的时候，AJAX导航系统将自动拦截这些事件，然后发出一个基于href或表单事件的AJAX请求，而不是重新加载页面(刷新)，在框架等待AJAX响应的时候会显示一个加载遮罩。

请求页加载时，jQuery Mobile会解析document中含有 data-role="page"属性元素并将这段代码插入到请求页的DOM中。接下来，插入页面的任何部件的增强将适用于所有的样式和行为。这个页面其余部分(未被含有 data-role="page"属性元素包裹的内容)如所有的脚本、样式表或其他信息将不被加载。当新的页面(page)转场到当前视角的时候框架也将更新标题为插入页的标题。

现在，被请求的页面已经插入到了当前的DOM节点中，它有个动画转场(transition).默认情况下，框架使用淡入淡出过渡转场效果。若要设置自定义的过渡效果，需在链接中添加 data-transition属性。

内容和组件(Content & Widgets)

在你的内容容器中，你可以添加任何标准的HTML元素——标题、列表、段落等等。当然你也可以编写自定义样式来创建自定义布局，这需要在head 中的jQuery Mobile样式表之后增加一个额外的样式表。

jQuery Mobile有广泛且交互友好的用户界面组件：form elements(表单元素)， collapsibles(折叠组件)， collapsible sets(折叠组件集) (accordions[手风琴])， popups(弹出窗口)， dialogs(对话框)， responsive tables(响应表)以及更多。为了获取最佳性能，建议用 download builder来生成所需的组件。

 

列表(Listviews)

如需使用jQuery Mobile自带的不同样式通用列表(listviews)则需在编辑列表时加上data-role="listview"属性，下边是一个简单的链接列表，为了让它看起来有嵌入效果，我们需要加上一个 data-inset="true"属性，然后再添加一个动态搜索过滤器 data-filter="true" 和一个文本输入框(text field)。

表单元素(Form elements)

该框架包含了一套完整的表单元素(form elements)，能够自动优化表单使其成为友好的触摸组件。这里有一个用HTML5做的滑块，不需要添加 data-role 即可实现。务必要将这些 form 中的元素总是与正确的 label 关联。(这句翻译不好，附上原文:Be sure to wrap these in a form element and always properly associate a label with every form element.)

响应式网页设计(Responsive Design)

jQuery Mobile一直都是为了服务于响应式网页responsive web design (RWD)的制作而设计的，而且我们的文档和窗体在一开始就有一些响应元素。所有的组件都可以在宽度为100%的网页里灵活的自适应，轻松满足任何你选择建立响应布局的系统。

这个库还包括一些响应性组件如响应式网格(responsive grids)，自扩展表(reflow tables)，列选择器表(column chooser tables)和滚动面板(sliding panels)。

主题(Theming)

jQuery Mobile有一个强大的主题框架(theme framework)，支持多达26套的工具栏、内容和按钮的颜色，被称为“swatch(样本)”。只需添加一个data-theme="b"属性到任何部件上它在此网页里的颜色就会变成黑色。

JQM炫酷技巧：添加主题swatch到page里，然后看看是不是所有小部件内的内容都自动继承了主题样式？

当你已经准备好构建一个自定义主题，你可以使用ThemeRoller 工具，只需拖拽就能定制你自己的主题样式，然后下载定制的主题即可。