jquery mobile是一款应用框架程序,类似于国内的织梦、DZ和帝国,主要用在移动端设备上,本程序支持创建WEB应用,使其良好地在手机和平板电脑上运行,通过对HTML5和CSS3减少脚本语言让前端更流畅和稳定,支持响应式布局,兼容超过100多种外部设备,比如MP3、MP4、手机、PSP、平板电脑、穿戴式手表等等,在电子阅读器上的表现尤为出彩,大大提高可访问性和普及性,本站提供jquery mobile免费下载,还有详细的使用方法,有需要的赶快试试吧!
功能特色
1、jQuery Mobile是一个基于jQuery的用户界面框架,兼容所有流行的手机,平板电脑,电子阅读器和桌面(浏览器)平台。为了建立可访问性及普及性访问性和普及,我们遵循渐进增强和响应式网页设计(RWD)原则 。HTML5标签结构使它容易上手,但是一个强大的API却能让你轻松的深入定制。
2、页面和对话(Pages & Dialogs)
在 jQuery Mobile 中每个页面(page)容器(通常是div标签)都包含一个 data-role="page" 属性。在“页面”容器内,可以使用任何有效的HTML标记,但在典型的jQuery Mobile页面里至少有俩data-role为“header”(页头)和“ footer”(页脚)属性的div,其余部分为可选内容。
页面可以设计成dialog(对话框)的样子,让页面看起来像是模态叠加的方式。想要以模态对话框的外观呈现一个标准页面只需添加 data-rel =“dialog” 属性。转场也可以设置在对话框的链接上。
3、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属性。
4、内容和组件(Content & Widgets)
在你的内容容器中,你可以添加任何标准的HTML元素——标题、列表、段落等等。当然你也可以编写自定义样式来创建自定义布局,这需要在head 中的jQuery Mobile样式表之后增加一个额外的样式表。
jQuery Mobile有广泛且交互友好的用户界面组件:form elements(表单元素), collapsibles(折叠组件), collapsible sets(折叠组件集) (accordions[手风琴]), popups(弹出窗口), dialogs(对话框), responsive tables(响应表)以及更多。为了获取最佳性能,建议用 download builder来生成所需的组件。
5、列表(Listviews)
如需使用jQuery Mobile自带的不同样式通用列表(listviews)则需在编辑列表时加上data-role="listview"属性,下边是一个简单的链接列表,为了让它看起来有嵌入效果,我们需要加上一个data-inset="true"属性,然后再添加一个动态搜索过滤器 data-filter="true" 和一个文本输入框(text field)。
6、表单元素(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.)
7、响应式网页设计(Responsive Design)
jQuery Mobile一直都是为了服务于响应式网页responsive web design (RWD)的制作而设计的,而且我们的文档和窗体在一开始就有一些响应元素。所有的组件都可以在宽度为100%的网页里灵活的自适应,轻松满足任何你选择建立响应布局的系统。
这个库还包括一些响应性组件如响应式网格(responsive grids),自扩展表(reflow tables),列选择器表(column chooser tables)和滚动面板(sliding panels)。
8、主题(Theming)
jQuery Mobile有一个强大的主题框架(theme framework),支持多达26套的工具栏、内容和按钮的颜色,被称为“swatch(样本)”。只需添加一个data-theme="b"属性到任何部件上它在此网页里的颜色就会变成黑色。
JQM炫酷技巧:添加主题swatch到page里,然后看看是不是所有小部件内的内容都自动继承了主题样式?
当你已经准备好构建一个自定义主题,你可以使用ThemeRoller 工具,只需拖拽就能定制你自己的主题样式,然后下载定制的主题即可。
9、所有浏览器都应该能够访问全部基础内容。
10、所有浏览器都应该能够访问全部基础功能。
11、增强的布局由外部链接的 CSS 提供。
12、增强的行为由外部链接的 JavaScript 提供。
13、终端用户浏览器偏好应受到尊重。
14、所有基本内容应该(按照设计)在基础设备上进行渲染,而更高级的平台和浏览器将使用额外的、外部链接的 JavaScript 和 CSS 持续增强。
安装方法
下载并解压,本程序无需安装,只是在您的页面中引入jquery mobile包即可。
使用方法
1、将整个“jquerymo”文件夹里面的文件放入网站目录,请注意是文件夹内的内容,
2、在您需要的页面引入“jquery mobile包”,具体格式为,
3、关于文件名称和路径请根据实际情况修改。
∨ 展开