Jquery Mobile事件
on()方法用于添加事件处理程序
1.Touch类事件
在用户触摸屏幕时触发
1.1 tap事件 用户敲击某个元素时发生
$("p").on("tap",function(){
$(this).hide();
})
1.2 taphold事件 用户敲击某个元素并保持一秒被触发
$("p").on("taphold",function(){
$(this).hide();
})
1.3 swipeleft 用户在某个元素上左滑动超过30px时触发
$("p").on("swipeleft",function(){
alert("You swiped left!");
});
2.滚动事件
2.1 scrollstart 事件在用户开始滚动页面时被触发
$(document).on("scrollstart",function(){
alert("开始滚动!");
});
2.2 scrollstop 事件在用户停止滚动页面时被触发
$(document).on("scrollstop",function(){
alert("停止滚动!");
});
3.方向事件
orientationchange 事件 用户水平或垂直旋转屏幕时触发
使用orientationchange 事件,需要把它添加到window对象
$(window).on("orientationchange",function(){
alert("方向已改变!");
});
由于该事件与window对象绑定,就有window.orientation属性
if(window.orientation==0){
说明屏幕是portrait的
}
提示:window.orientation 属性对 portrait 视图返回 0,对 landscape 视图返回 90 或 -90
4.页面事件
在 jQuery Mobile 中与页面打交道的事件被分为四类:
- Page Initialization - 在页面创建前,当页面创建时,以及在页面初始化之后
- Page Load/Unload - 当外部页面加载时、卸载时或遭遇失败时
- Page Transition - 在页面过渡之前和之后
- Page Change - 当页面被更改,或遭遇失败时
4.1 Initialization事件
事件 | 描述 |
---|---|
pagebeforecreate | 当页面即将初始化,并且在 jQuery Mobile 已开始增强页面之前,触发该事件。 |
pagecreate | 当页面已创建,但增强完成之前,触发该事件。 |
pageinit | 当页面已初始化,并且在 jQuery Mobile 已完成页面增强之后,触发该事件。 |
$(document).on("pagebeforecreate",function(event){
alert("触发 pagebeforecreate 事件!");
});
$(document).on("pagecreate",function(event){
alert("触发 pagecreate 事件!");
});
$(document).on("pageinit",function(event){
alert("触发 pageinit 事件!")
});
4.2 Load事件 外部页面加载
事件 | 描述 |
---|---|
pagebeforeload | 在任何页面加载请求作出之前触发。 |
pageload | 在页面已成功加载并插入 DOM 后触发。 |
pageloadfailed | 如果页面加载请求失败,则触发该事件。默认地,将显示 "Error Loading Page" 消息。 |
$(document).on("pageload",function(event,data){
alert("触发 pageload 事件!\nURL: " + data.url);
});
$(document).on("pageloadfailed",function(event,data){
alert("抱歉,被请求页面不存在。");
});
4.3 过渡事件 从一页过渡到下一页时触发
事件 | 描述 |
---|---|
pagebeforeshow | 在“去的”页面触发,在过渡动画开始前。 |
pageshow | 在“去的”页面触发,在过渡动画完成后。 |
pagebeforehide | 在“来的”页面触发,在过渡动画开始前。 |
pagehide | 在“来的”页面触发,在过渡动画完成后。 |
$(document).on("pagebeforeshow","#pagetwo",function(){ // 当进入页面二时
alert("页面二即将显示");
});
$(document).on("pageshow","#pagetwo",function(){ // 当进入页面二时
alert("现在显示页面二");
});
$(document).on("pagebeforehide","#pagetwo",function(){ // 当离开页面二时
alert("页面二即将隐藏");
});
$(document).on("pagehide","#pagetwo",function(){ // 当离开页面二时
alert("现在隐藏页面二");
});
Jquery Mobile事件的更多相关文章
- [转]使用 jQuery Mobile 与 HTML5 开发 Web App —— jQuery Mobile 事件详解
在前文<使用 jQuery Mobile 与 HTML5 开发 Web App —— jQuery Mobile 默认配置与事件基础>中,Kayo 对 jQuery Mobile 事件的基 ...
- jQuery Mobile事件,开发全解+完美注释
全栈工程师开发手册 (作者:栾鹏) jQuery Mobile事件全解 jQuery Mobile 所有class选项 jQuery Mobile 所有data-*选项 jQuery Mobile事件 ...
- jquery mobile Touch事件
Touch事件在用户触摸屏幕(页面)时触发 1.jquery mobile tap tap事件在用户敲击某个元素时触发 $("p").on("tap",fucn ...
- jQuery Mobile 页面事件
jQuery Mobile 页面事件 在 jQuery Mobile 中与页面打交道的事件被分为四类: Page Initialization - 在页面创建前,当页面创建时,以及在页面初始化之后 P ...
- jQuery Mobile学习笔记
1.获取jQuery mobile 文件,访问jQuerymobile网站下载 (貌似使用jquery mobile后,jquery会自动在网页中添加一些class类,第一次知道的我是被吓呆的!!) ...
- jQuery Mobile笔记
1.获取jQuery mobile 文件,访问jQuerymobile网站下载 (貌似使用jquery mobile后,jquery会自动在网页中添加一些class类,第一次知道的我是被吓呆的!!) ...
- 第十三篇、jQuery Mobile
API-->搜索data 0.page data-transition="slide" // 页面切换效果 data-position="fixed" / ...
- jQuery Mobile 入门基础教程
jQuery Mobile是jQuery在手机上和平板设备上的版本.jQuery Mobile 不仅会给主流移动平台带来jQuery核心库,而且会发布一个完整统一的jQuery移动UI框架. jQue ...
- jQuery Mobile 所有class选项,开发全解+完美注释
全栈工程师开发手册 (作者:栾鹏) jQuery Mobile事件全解 jQuery Mobile 所有class选项 jQuery Mobile 所有data-*选项 jQuery Mobile 所 ...
随机推荐
- 老男孩python学习自修第十三天【md5加密】
示例代码如下: hashlib_test.py #!/usr/bin/env python # _*_ coding:UTF-8 _*_ import hashlib def genPasswd(na ...
- linux 查看路由表
随便转载,保留出处:http://www.cnblogs.com/aaron-agu/ route –n
- vue開發環境搭建
npm(node package manager),nodejs的包管理器,用於nodejs插件的安裝.卸載和管理依賴. 安裝npm: 檢查npm是否安裝成功及版本:npm -v 卸載npm: 更新n ...
- 训练赛-Building Numbers
题意:首先告诉你,一个数字从1开始有两种变换方式:1.当前数字的值加1 2.当前的数字值乘2: 思路:首先把数组里的数字需要的变换次数算出来,然后用前缀和解决: 代码: #include<ios ...
- Linux下git的使用——将已有项目放到github上
本地已经有一个项目了,需要将该项目放到github上,怎么操作? 步骤: 本地安装git,有github账号是前提. (1)先在github创建一个空的仓库,并复制链接地址.使用https,以.git ...
- 错误代码 0x800700b7 配置错误定义了重复的“system.web.extensions/scripting/scriptResourceHandler”节
如果是运行VS时就报错,改个端口号就可以解决问题,改完以下两个地方重新运行
- 利用kali破解wifi密码
准备工具 1.笔记本 2.USB无线上网卡(必备) 3.kali系统 4.密码字典 第一种方法 暴力破解法 何为暴力破解呢,其实就是一个一个密码去试,直到正确的密码. 现在的wifi一般加密都是: 1 ...
- Luogu5205 【模板】多项式开根(NTT+多项式求逆)
https://www.cnblogs.com/HocRiser/p/8207295.html 安利! 写NTT把i<<=1写成了i<<=2,又调了一年.发现我的日常就是数组开 ...
- 【XSY2524】唯一神 状压DP 矩阵快速幂 FFT
题目大意 给你一个网格,每个格子有概率是\(1\)或是\(0\).告诉你每个点是\(0\)的概率,求\(1\)的连通块个数\(\bmod d=0\)的概率. 最开始所有格子的概率相等.有\(q\)次修 ...
- bzoj 4542: [Hnoi2016]大数 (莫队)
Description 小 B 有一个很大的数 S,长度达到了 N 位:这个数可以看成是一个串,它可能有前导 0,例如00009312345.小B还有一个素数P.现在,小 B 提出了 M 个询问,每个 ...