什么是 jQuery Mobile

什么是 jQuery Mobile

jQuery Mobile 是创建移动 web 应用程序的框架。

jQuery Mobile 适用于所有流行的智能手机和平板电脑。

jQuery Mobile 使用 HTML5 和 CSS3 通过尽可能少的脚本对页面进行布局。

Jquery mobile是一个基于HTML5，拥有响应式网站特性，兼容所有主流移动设备平台的统一UI接口系统，与前端开发框架。可以运行在所有智能手机，平板电脑和桌面设备上。 jQuery Mobile秉承 “write less, do more”的原则到了一个新的高度：不需要为每一个移动设备或者操作系统单独开发应用，jQuery Mobile框架可以使您设计一个高度响应式的网站或应用运行于所有流行的智能手机，平板电脑和桌面系统。

jqueyr 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请求，并使其支持一组丰富的转场(pagetransitions)动画样式。在这里后退按钮是被完全支持的，并且具有预读取、缓存、动态注入及高级用例脚本页面等特性。

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

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

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

内容和组件(Content & Widgets)

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

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 aformelement and always properly associate alabelwith 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工具，只需拖拽就能定制你自己的主题样式，然后下载定制的主题即可。