转载  孟祥月 博客

http://blog.cshttp://blog.csdn.net/mengxiangyue/article/category/1313478/2dn.http://blog.csdn.net/mengxiangyue/article/category/1313478/2net/mengxiangyue/article/category/1313478/2

data-role参数表:

page        页面容器,其内部的mobile元素将会继承这个容器上所设置的属性

header     页面标题容器,这个容器内部可以包含文字、返回按钮、功能按钮等元素

footer       页面页脚容器,这个容器内部也可以包含文字、返回按钮、功能按钮等元素

content     页面内容容器,这是一个很宽容的容器,内部可以包含标准的html元素和jQueryMobile元素

controlgroup     将几个元素设置成一组,一般是几个相同的元素类型

fieldcontain       区域包裹容器,用增加边距和分割线的方式将容器内的元素和容器外的元素明显分隔

navbar     功能导航容器,通俗的讲就是工具条

listview     列表展示容器,类似手机中联系人列表的展示方式

list-divider      列表展示容器的表头,用来展示一组列表的标题,内部不可包含链接

button      按钮,将链接和普通按钮的样式设置成为jQueryMobile的风格

none        阻止框架对元素进行渲染,使元素以html原生的状态显示,主要用于form元素。

data-transition参数表:

slide    从右侧向左滑入页面

slideup    从底部向上滑入

slidedown      从上向下滑入

pop     从中心渐显展开

fade     渐显

flip       翻转

data-icon参数表:

data-iconpos参数表:

right    图标在文字的右侧

top    图标在文字上面

bottom      图标在文字下面

pop     从中心渐显展开

fade     渐显

flip       翻转

jQuery Mobile

jQuery Mobile是jQuery 在手机上和平板设备上的版本。jQuery Mobile 不仅会给主流移动平台带来jQuery核心库,而且会发布一个完整统一的jQuery移动UI框架。支持全球主流的移动平台。jQuery Mobile开发团队说:能开发这个项目,我们非常兴奋。移动Web太需要一个跨浏览器的框架,让开发人员开发出真正的移动Web网站。

简单介绍

今天,jQuery 驱动着 Internet 上的大量网站,在浏览器中提供动态用户体验,促使传统桌面应用程序越来越少。现在,主流移动平台上的浏览器功能都赶上了桌面浏览器,因此 jQuery 团队引入了 jQuery Mobile(或 JQM)。JQM 的使命是向所有主流移动浏览器提供一种统一体验,使整个 Internet 上的内容更加丰富 - 不管使用哪种查看设备。

JQM 的目标是在一个统一的 UI 中交付超级 JavaScript 功能,跨最流行的智能手机和平板电脑设备工作。与 jQuery 一样,JQM 是一个在 Internet 上直接托管、免费可用的开源代码基础。事实上,当 JQM 致力于统一和优化这个代码基时,jQuery 核心库受到了极大关注。这种关注充分说明,移动浏览器技术在极短的时间内取得了多么大的发展。

与 jQuery 核心库一样,您的开发计算机上不需要安装任何东西;只需将各种 *.js 和 *.css 文件直接包含到您的 web 页面中即可。这样,JQM 的功能就好像被放到了您的指尖,供您随时使用。

基本特性

一般简单性

框架简单易用。页面开发主要使用标记,无需或仅需很少 JavaScript。

折叠优雅降级

尽管 jQuery Mobile 利用最新的 HTML5、CSS3 和 JavaScript,但并非所有移动设备都提供这样的支持。jQuery Mobile 的哲学是同时支持高端和低端设备,比如那些没有 JavaScript 支持的设备,尽量提供最好的体验。

折叠Accessibility

jQuery Mobile 在设计时考虑了访问能力,它拥有 Accessible Rich Internet Applications (WAI-ARIA) 支持,以帮助使用辅助技术的残障人士访问 web 页面。

折叠小规模

jQuery Mobile 框架的整体大小比较小,JavaScript 库 12KB,CSS 6KB,还包括一些图标。

折叠主题设置

框架还提供一个主题系统,允许您提供自己的应用程序样式。

浏览器

我们在移动设备浏览器支持方面取得了长足的进步,但并非所有移动设备都支持 HTML5、CSS 3 和 JavaScript。这个领域是 jQuery Mobile 的持续增强和优雅降级支持发挥作用的地方。如前所述,jQuery Mobile 同时支持高端和低端设备,比如那些没有 JavaScript 支持的设备 。持续增强(Progressive Enhancement)包含以下核心原则:

所有浏览器都应该能够访问全部基础内容。

所有浏览器都应该能够访问全部基础功能。

增强的布局由外部链接的 CSS 提供。

增强的行为由外部链接的 JavaScript 提供。

终端用户浏览器偏好应受到尊重。

所有基本内容应该(按照设计)在基础设备上进行渲染,而更高级的平台和浏览器将使用额外的、外部链接的 JavaScript 和 CSS 持续增强。

jQuery Mobile 目前支持以下移动平台: 教程

Apple iOS:iPhone、iPod Touch、iPad(所有版本)

Android:所有设备(所有版本)

Blackberry Torch(版本 6)

Palm WebOS Pre、Pixi

Nokia N900(进程中)

事件

jQuery Mobile 也提供了针对移动端浏览器的事件:

下面的表格列出了所有 jQuery Mobile 事件。

注意:请使用 on() 方法绑定事件。

事件

描述

hashchange

启用可标记 #hash 历史,哈希值会在一次独立的点击时发生时变化,比如一个用户点击后退按钮,会通过 hashchange事件进行处理。

navigate 包裹了 hashchange 和 popstate 的事件

orientationchange

方向改变事件,在用户垂直或者水平旋转移动设备时触发。

pagebeforechange

在页面切换之前,触发的事件。使用$.mobile.changePage()来切换页面,此方法触发2个事件,切换之前的pagebeforechange事件,和切换完成后pagechange(成功)或者pagechangefailed(失败)。

pagebeforecreate

页面初始化时,初始化之前触发。

pagebeforehide

在页面切换后旧页面隐藏之前,触发的事件。

pagebeforeload

在加载请求发出之前触发

pagebeforeshow

在页面切换后显示之前,触发的事件。

pagechange

在页面切换成功后,触发的事件。使用$.mobile.changePage()来切换页面,此方法触发2个事件,切换之前的pagebeforechange事件,和切换完成后pagechange(成功)或者pagechangefailed(失败)。

pagechangefailed

在页面切换失败时,触发的事件。使用$.mobile.changePage()来切换页面,此方法触发2个事件,切换之前的pagebeforechange事件,和切换完成后pagechange(成功)或者pagechangefailed(失败)。

pagecreate

在页面创建成功之后,触发的事件,但增强完成之前。

pagehide

在页面切换后老页面隐藏之后,触发的事件。

pageinit

在页面页面初始化时,触发的事件。

pageload

在页面完全加载成功后触发。

pageloadfailed

如果页面请求失败触发。

pageremove

在窗口视图从 DOM 中移除外部页面之前触发。

pageshow

在过渡动画完成后,在"到达"页面触发。

scrollstart

当用户开始滚动页面时触发。

scrollstop

当用户停止滚动页面时触发。

swipe

当用户在元素上水平滑动时触发。

swipeleft

当用户从左划过元素超过 30px 时触发。

swiperight

当用户从右划过元素超过 30px 时触发。

tap

当用户敲击某元素时触发。

taphold

当元素敲击某元素并保持一秒时触发。

throttledresize

启用可标记 #hash 历史记录

updatelayout

由动态显示/隐藏内容的 jQuery Mobile 组件触发。

vclick

虚拟化的 click 事件处理器

vmousecancel

虚拟化的 mousecancel 事件处理器

vmousedown

虚拟化的 mousedown 事件处理器

vmousemove

虚拟化的 mousemove 事件处理器

vmouseout

虚拟化的 mouseout 事件处理器

vmouseover

虚拟化的 mouseover 事件处理器

vmouseup

虚拟化的 mouseup 事件处理器

收起

jQuery Mobile 总结的更多相关文章

  1. jQuery Mobile入门

    转:http://www.cnblogs.com/linjiqin/archive/2011/07/17/2108896.html 简介:jQuery Mobile框架可以轻松的帮助我们实现非常好看的 ...

  2. 解决Jquery mobile点击较长文本body的时候Header和footer会渐入渐出的问题

         在做一个Phonegap+Jqm工程的时候,出现了如题的问题,相信很多人都遇到过Jquerymobile点击body时候header和footer会闪烁的显示和隐藏问题,fixed却并不能真 ...

  3. jquery mobile 问问多多

    jquery mobile  问题多多,兼容性太差.android4.1下完全崩溃.以后再也不用jquery mobile了

  4. jquery.mobile手机网页简要

    先上最终效果: 最近做了一个用手机浏览器访问的web应用,采用较流行的HTML5,为了提高开发效率节省时间决定采用现有开源框架,免去了自己做设计与兼容性. 一些比较优秀的框架:10大优秀的移动Web应 ...

  5. jQuery Mobile案例,最近用Moon.Web和Moon.Orm做了一套系统

      一.简介 先说说,我们的主题.jQuery Mobile,最近用Moon.Web和Moon.Orm做了一套系统 jQuery Mobile是jQuery 在手机上和平板设备上的版本.jQuery ...

  6. JQuery mobile中按钮自定义属性的改变

    1..ui-mobile-viewport是jquery mobile默认给body加的class,这样的话包含选择符优先级高一点 <style> .ui-mobile-viewport ...

  7. JQuery Mobile 页面参数传递

    在单页模版中使用基于HTTP的方式通过POST和GET请求传递参数,而在多页模版中不需要与服务器进行通信,通常在多页模版中有以下三种方法来实现页面间的参数传递. 1.GET方式:在前一个页面生成参数并 ...

  8. jQuery Mobile学习笔记

    1.获取jQuery mobile 文件,访问jQuerymobile网站下载 (貌似使用jquery mobile后,jquery会自动在网页中添加一些class类,第一次知道的我是被吓呆的!!) ...

  9. Jquery Mobile开发以及Js对象动态绑定

    动态创建对象并绑定属性: var instantiate = function (Type, args) { var Constructor = function () { }; Constructo ...

  10. jquery mobile系列问题汇总整理(传播知识,利己利人)

    我在用jquery mobile做项目时,遇到jm在下拉框等组件里不能正常动态更新内容,查找了相关资料,在这里抛砖引玉,先提供一个解决下拉框内容写入更新的解决方法: jm解决下拉框内容写入的方法可以这 ...

随机推荐

  1. javascript递归、循环、迭代、遍历和枚举概念

    javascript递归.循环.迭代.遍历和枚举概念 〓递归(recursion)在数学与计算机科学中,是指在函数的定义中使用函数自身的方法.递归一词还较常用于描述以自相似方法重复事物的过程.例如,当 ...

  2. nginx rewrite目录对换

    /123/xxx----->xxx?id=123 [root@web01 default]# pwd /app/www/default [root@web01 └── sss └── index ...

  3. 02、Universal app 中按钮图标使用

    前言,windows10 昨天凌晨发布了,windows store 开发模型比以前的 silverlight 模型由很多优势, 我也小兴奋了一把. 正文: 在 windows phone 8.0 以 ...

  4. CM本地Yum源的搭建

    CM本地Yum源的搭建 以本地yum源安装CM5为例,解释本地yum源的安装和利用本地yum源安装CM5. Cloudera Manager 5(以下简称CM)默认采用在线安装的方式,给不能联互联网或 ...

  5. vuex 开始

    每一个vuex的应用的核心都是store(仓库),store基本上就是一个容器,它包含着你的应用中大部分的状态(state),vuex和单纯的全局对象有以下两点不同: 1,vuex的状态存储是响应式的 ...

  6. Phoenix的数据类型和操作符、函数

    其实官方文档已经有这些东西了,如下: http://phoenix.apache.org/language/functions.html http://phoenix.apache.org/langu ...

  7. SSL/TLS协议运行机制的概述_转

    转自:SSL/TLS协议运行机制的概述 作者: 阮一峰 日期: 2014年2月 5日 互联网的通信安全,建立在SSL/TLS协议之上. 本文简要介绍SSL/TLS协议的运行机制.文章的重点是设计思想和 ...

  8. NAT--Network Address Translator

    定义 Nat用于在本地网络中使用私有地址,在连接互联网时转而使用全局IP地址的技术.除了转换IP地址外,还出现了可以转换TCP.UDP端口号的NAPT(Network Address Ports Tr ...

  9. TensorFlow基础笔记(0) 参考资源学习文档

    1 官方文档 https://www.tensorflow.org/api_docs/ 2 极客学院中文文档 http://www.tensorfly.cn/tfdoc/api_docs/python ...

  10. 011杰信-创建购销合同Excel报表系列-4-建立合同货物(修改,删除):合同货物表是购销合同表的子表

    前面的一篇文章做的是修改删除,这篇文章做的是合同货物的修改和删除. 业务功能如下: