jquery mobile 移动web(6)
jquery mobile 针对移动端设备的事件类型。
1.touch 事件。
tap 快速触摸屏幕并且离开,类似一种完整的点击操作。
taphold 触摸屏幕并保持一段时间。
swipe 在1秒内水平移动30px屏幕像素上时触发。
swipeleft 向左侧滑动
swiperight 像右侧滑动。
2.方向改变事件
orientationchange 事件函数当移动设备的方向发生改变触发,在事件的回调函数内的第二个参数返回一个用于识别当前方向的参数,
该参数有两种返回值:portrait(纵向)landscarp(横向)。
3.滚动事件,
scrollstart 开始滚动时候触发该事件。
scrollend 滚动结束时触发该事件。
4.显示/隐藏
pagebeforeshow 当视图通过动画效果开始显示在屏幕之前触发事件。
pagebeforehide 当视图通过动画效果开始隐藏之前触发事件,
pageshow 当视图通过动画效果显示在屏幕之后触发事件。
pagehide 当视图通过动画效果隐藏后触发。
示例代码:
$("div").live("pageshow",function(event,ui){
alert("this page just hidden"+ui.prevPage)
})
5.模拟鼠标事件
vmouseover 统一处理触摸和鼠标悬停事件。
vmousedown 统一处理触摸和鼠标按下事件。
vmousemove 统一处理触摸和鼠标移动事件。
vmouseup 统一处理触摸和鼠标按键松开事件。
vclick 统一处理触摸和鼠标点击事件。
vmousecancel 统一处理触摸和鼠标l离开事件。
页面视图辅助工具
1. $.mobile.changePage
通过函数编程的方式改变两个视图之间切换效果。通常在点击超链接或提交表单的时候自定义切换效果。
语法:
$.mobile.changePage(to,options);
to 是必选参数, 可以传递的参数类型包括字符串,对象。
options 可选,传递的是一个JSON 数据格式对象,
用法: 以下实例将改变decondPage.html 的页面效果
$.mobile.changePage("secondPage.html",{
transition:"slidedown"
})
表单提交操作
$.mobile.changePage("submit.php",{
type:"post";
data:$("form#add").seriaize();
})
2.$.mobile.loaPage
主要的作用是加载外部页面,并插入当前页面的DOM元素内。
$.mobile.loadPage(url,options);
url 是一个必选参数,传递一个绝对或者相对的 URL 地址
options 可选参数,传递的是一个JSON 数据对象。
示例:
$.mobile.loadPage("secomdPage.html");
提交表单并加载结果页面:
$.mobile.loadPage("result.php",{
type:"get",
data:$("form#search").serizlize();
})
数据存储:
1.jqmData()方法;
可以在元素上绑定任意数据。
$.mobile.jqmData(element,key,value)
element 参数是指定需要绑定数据的元素;
key 需要绑定数据的属性名,
value 绑定的数据。
2.jqmRemoveData() 方法:
该方法是移除绑定在元素上的data数据,
$.mobile.jqmRemoveData([name])
name 是可选参数,指定需要移除哪个data属性,如果不穿参数,则需要移除元素上的所有数据。
3.jqmHasData() 方法
判断元素上是否存在绑定 的数据,
$.mobile.jqmHasData(element);
element 参数是一个进行数据检查的DOM元素。
地址路径辅助工具:
1.解析URL 地址
$.mobile.path.parseUrl 函数解析一个Url 指定, 并返回一个含有所有参数值的对象,让我们很轻易的访问Url地址上的参数属性。
parseUrl 函数的语法
$.mobile.path.parseUrl(url);
url 参数是一个相对或者绝对的URL地址,必选传入的参数。
parseUrl 函数返回一个对象,对象内包含丰富的属性。
属性: hash 说明:#号后面的所有的字符内容,相当于location 的hash
属性: host 说明:URL的主机名和端口号
属性: hostname 说明:返回只包含URL 的主机名。
属性: href 说明:返回整个URL地址。
属性: pathname 说明:返回文件或目录的关联路径
属性: port 说明:请求返回Url的端口号
属性:portocol 说明:返回请求Url 地址的协议,如 http https
属性:search 说明:返回地址中“?”后面的请求参数
属性:authority 说明:返回用户名,密码,主机名,端口号组成的地址,
属性:directiry 说明:返回请求URL地址的目录路径,
属性:domain 说明:返回 protocal 协议和authority 组成的路径
属性:filename 说明:返回请求的Url文件名
属性:hrefOfHash 说明:返回不包含hash 值的URL 路径。
属性:hrefOfSearch 说明:返回不包含请求参数和hash值的URL 路径。
属性:password 说明:返回请求URL 中的密码 如ftp 协议密码。
属性: username 说明:返回请求URL中的用户名,如ftp 协议的用户名。
loading 显示/隐藏
显示loading 对话框的方法是
$.mobile.showPageLoadingMse();
隐藏loading 对话框的方法是
$.mobile.hidePageLoadingMse();
jquery mobile 移动web(6)的更多相关文章
- JQuery Mobile移动Web应用开发(1): UI开发工具RID介绍
工欲善其事,必先利其器. UI工具可以提高我们开发界面的效率,下面对几款工具做个对比: 1. Codiqa,在JQuery Mobile主页能看到这款工具,看到网上这么多人吹捧这个工具,不过是收费的. ...
- 利用JQuery Mobile开发web app
什么是web app web app 是基于web的应用程序,是针对移动设备优化后的web站点,它具有 开发成本低——采用web开发技术,不需要考虑跨平台以及底层适配问题: 升级简单——不需要通知用户 ...
- jquery mobile 移动web
轻量级框架jQuery Mobile 所需文件 <link rel="stylesheet" href="jquery.mobile-1.1.2/jquery.mo ...
- jQuery Mobile 移动 web 应用程序框架
在这里我们主要讲一下如何引用jQuery Mobile(引用了jQuery Mobile,你就能引用jQuery Mobile里已经封装好的代码,让开发更加快捷简单) 从 CDN 引用 jQuery ...
- jquery mobile 移动web(5)
有序列表 <div data-role="content"> <ol data-role="listview" data-theme=&quo ...
- jquery mobile 移动web(2)
button 按钮 data-role="button" 将超链接变成button. 具有icon 图标的button 组件. 提供了18常用的图标 data-icon =&quo ...
- jquery mobile 移动web(1)
轻量级框架jQuery Mobile 所需文件 <link rel="stylesheet" href="jquery.mobile-1.1.2/jquery.mo ...
- jquery mobile 移动web(4)
下拉菜单: 设置label 元素的for 属性为 select label 元素的文本内容作为选项的名称 定义div元素并设置data-role 属性值为 fieldcontain. <div ...
- jquery mobile 移动web(3)
可折叠功能块. div 元素的 data-role 属性设置为 collapsible 代码如下: <div data-role="collapsible"> < ...
随机推荐
- 《本博客将搬至CSDN》 博客主QQ 654436731 有关于本博客任何文章的问题欢迎打扰
地址 http://blog.csdn.net/sajiazaici
- Disruptor之粗糙认识
一 概述 1.Disruptor Disruptor是一个高性能的异步处理框架,一个“生产者-消费者”模型. 2.RingBuffer RingBuffer是一种环形数据结构,包含一个指向下一个槽点的 ...
- for计算位置坐标
代码1效果图: 代码2效果图: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"&g ...
- vim右键粘贴 等杂
putty连上linux,vim编辑个文件,我去,右键不能用用上下面的命令,就好了. set mouse-=a 今天发现mysql倒入utf-8的文件网站显示出来都是乱码,不过用utf-8的控制台看是 ...
- SharePoint 2013 - User Custom Action
1. User Custom Action包含Ribbon和ECB,以及Site Action菜单等,参考此处: 2. 系统默认ECB的Class为: ms-core-menu-box --> ...
- Android StickHeaderRecyclerView - 让recyclerview头部固定
介绍在项目中有时会需要recyclerview滑动式时某个view滑出后会固定在头部显示,比较常用的比如手机联系人界面.地区选择界面等. StickHeaderRecyclerView就是实现这个功能 ...
- MVG配置
MVG的配置:(前提是一个表的字段包含多值字段,一般是1:M或M:M的关系) 想要在学生界面显示多个教师的名称. 1.首先在一个Project中,建两张表学生表和教师表T_Stu与T_Tea和一张中间 ...
- redis复制集(sentinel)
https://www.jianshu.com/p/45ffd2a84143 内核配置 cat >> /etc/rc.local << EOF echo never > ...
- mysql_01_游标的使用
一.表的创建 1.直接创建表 DROP TABLE IF EXISTS shops_info; /*EMP产品版本版本信息表*/ CREATE TABLE shops_info ( ID INT PR ...
- 安装字体或直接调用非注册字体 z
1.安装字体//程序直接将字体文件安装的系统中.函数声明:[DllImport("kernel32.dll", SetLastError = true)] static exter ...