jQuery Mobile 事件
来源:互联网 发布:打开php文件变成下载 编辑:程序博客网 时间:2024/05/21 17:57
一、jQuery Mobile 触摸事件
触摸事件在用户触摸屏幕(页面)时触发。触摸事件同样可应用与桌面电脑上:点击或者滑动鼠标!
1、jQuery Mobile 点击
点击事件在用户点击元素时触发。如下实例:当点击 <p> 元素时,隐藏当前的 <p> 元素:
<!DOCTYPE html><html><head><meta name="viewport" content="width=device-width, initial-scale=1"><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><link rel="stylesheet" href="../../css/jquery.mobile-1.4.5.min.css" /><script src="../../js/jquery.js"></script><script src="../../js/jquery.mobile-1.4.5.min.js"></script><script>$(document).on("pagecreate","#pageone",function(){ $("p").on("tap",function(){ $(this).hide(); }); });</script></head><body><div data-role="page" id="pageone"> <div data-role="header"> <h1>tap 事件</h1> </div> <div data-role="main" class="ui-content"> <p>敲击我,我会消失。</p> <p>敲击我,我会消失。</p> <p>敲击我,我也会消失。</p> </div> <div data-role="footer"> <h1>页脚文本</h1> </div></div></body></html>
2、jQuery Mobile 点击不放(长按)
点击不放(长按) 事件在点击并不放(大约一秒)后触发
<!DOCTYPE html><html><head><meta name="viewport" content="width=device-width, initial-scale=1"><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><link rel="stylesheet" href="../../css/jquery.mobile-1.4.5.min.css" /><script src="../../js/jquery.js"></script><script src="../../js/jquery.mobile-1.4.5.min.js"></script><script>$(document).on("pagecreate","#pageone",function(){ $("p").on("taphold",function(){ $(this).hide(); }); });</script></head><body><div data-role="page" id="pageone"> <div data-role="header"> <h1>taphold 事件</h1> </div> <div data-role="main" class="ui-content"> <p>如果您敲击并保持一秒钟,我会消失。</p> <p>敲击并保持住,我会消失。</p> <p>敲击并保持住,我也会消失。</p> </div> <div data-role="footer"> <h1>页脚文本</h1> </div></div></body></html>
3、jQuery Mobile 滑动
滑动事件是在用户一秒内水平拖拽大于30PX,或者纵向拖曳小于20px的事件发生时触发的事件:
<!DOCTYPE html><html><head><meta name="viewport" content="width=device-width, initial-scale=1"><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><link rel="stylesheet" href="../../css/jquery.mobile-1.4.5.min.css" /><script src="../../js/jquery.js"></script><script src="../../js/jquery.mobile-1.4.5.min.js"></script><script>$(document).on("pagecreate","#pageone",function(){ $("p").on("swipe",function(){ $("span").text("滑动检测!"); }); });</script></head><body><div data-role="page" id="pageone"> <div data-role="header"> <h1>swipe 事件</h1> </div> <div data-role="main" class="ui-content"> <p>在下面的文本或方框上滑动。</p> <p style="border:1px solid black;height:200px;width:200px;background-color: green;"></p> <p><span style="color:red"></span></p> </div> <div data-role="footer"> <h1>页脚文本</h1> </div></div></body></html>
4、jQuery Mobile 向左滑动
向左滑动事件在用户向左拖动元素大于30px时触发:
<!DOCTYPE html><html><head><meta name="viewport" content="width=device-width, initial-scale=1"><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><link rel="stylesheet" href="../../css/jquery.mobile-1.4.5.min.css" /><script src="../../js/jquery.js"></script><script src="../../js/jquery.mobile-1.4.5.min.js"></script><script>$(document).on("pagecreate","#pageone",function(){ $("p").on("swipeleft",function(){ alert("您向左滑动!"); }); });</script></head><body><div data-role="page" id="pageone"> <div data-role="header"> <h1>swipeleft 事件</h1> </div> <div data-role="main" class="ui-content"> <p style="border:1px solid black;margin:5px;background-color: green;color: white;padding: 10px;">向左滑动 - 不要超出边框!</p> </div> <div data-role="footer"> <h1>页脚文本</h1> </div></div></body></html>
5、jQuery Mobile 向右滑动
向右滑动事件在用户向右拖动元素大于30px时触发:
<!DOCTYPE html><html><head><meta name="viewport" content="width=device-width, initial-scale=1"><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><link rel="stylesheet" href="../../css/jquery.mobile-1.4.5.min.css" /><script src="../../js/jquery.js"></script><script src="../../js/jquery.mobile-1.4.5.min.js"></script><script>$(document).on("pagecreate","#pageone",function(){ $("p").on("swiperight",function(){ alert("向右滑动!"); }); });</script></head><body><div data-role="page" id="pageone"> <div data-role="header"> <h1>swiperight 事件</h1> </div> <div data-role="main" class="ui-content"> <p style="border:1px solid black;margin:5px;background-color: green;color: white;padding: 10px;">向右滑动 - 不要超出边框!</p> </div> <div data-role="footer"> <h1>页脚文本</h1> </div></div></body></html>
二、jQuery Mobile 滚屏事件
jQuery Mobile 提供了两种滚屏事件:滚屏开始时触发和滚动结束时触发。
1、jQuery Mobile 滚屏开始(Scrollstart)
scrollstart 事件是在用户开始滚动页面时触发:
<!DOCTYPE html><html><head><meta name="viewport" content="width=device-width, initial-scale=1"><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><link rel="stylesheet" href="../../css/jquery.mobile-1.4.5.min.css" /><script src="../../js/jquery.js"></script><script src="../../js/jquery.mobile-1.4.5.min.js"></script><script>$(document).on("pagecreate","#pageone",function(){ $(document).on("scrollstart",function(){ alert("开始滚动!"); }); });</script></head><body><div data-role="page" id="pageone"> <div data-role="header"> <h1>scrollstart 事件</h1> </div> <div data-role="main" class="ui-content"> <p><b>提示:</b>如果未出现滚动条,请尝试调整窗口尺寸。</p> <p>可用于滚动的文本。。可用于滚动的文本。。可用于滚动的文本。。可用于滚动的文本。。可用于滚动的文本。。可用于滚动的文本。。可用于滚动的文本。。可用于滚动的文本。。可用于滚动的文本。。可用于滚动的文本。。可用于滚动的文本。。可用于滚动的文本。。可用于滚动的文本。。可用于滚动的文本。。可用于滚动的文本。。可用于滚动的文本。。可用于滚动的文本。。可用于滚动的文本。。可用于滚动的文本。。可用于滚动的文本。。可用于滚动的文本。。可用于滚动的文本。。可用于滚动的文本。。可用于滚动的文本。。可用于滚动的文本。。可用于滚动的文本。。可用于滚动的文本。。可用于滚动的文本。。可用于滚动的文本。。可用于滚动的文本。。可用于滚动的文本。。可用于滚动的文本。。可用于滚动的文本。。可用于滚动的文本。。可用于滚动的文本。。可用于滚动的文本。。可用于滚动的文本。。可用于滚动的文本。。可用于滚动的文本。。可用于滚动的文本。。可用于滚动的文本。。</p> </div> <div data-role="footer"> <h1>页脚文本</h1> </div></div></body></html>
2、jQuery Mobile 滚屏结束(Scrollstop)
scrollstop 事件是在用户停止滚动页面时触发:
<!DOCTYPE html><html><head><meta name="viewport" content="width=device-width, initial-scale=1"><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><link rel="stylesheet" href="../../css/jquery.mobile-1.4.5.min.css" /><script src="../../js/jquery.js"></script><script src="../../js/jquery.mobile-1.4.5.min.js"></script><script>$(document).on("pagecreate","#pageone",function(){ $(document).on("scrollstop",function(){ alert("停止滚动!"); }); });</script></head><body> <div data-role="page" id="pageone"> <div data-role="header"> <h1>scrollstop 事件</h1> </div> <div data-role="main" class="ui-content"> <p><b>提示:</b>如果未出现滚动条,请尝试调整窗口尺寸。</p> <p>可用于滚动的文本。。可用于滚动的文本。。可用于滚动的文本。。可用于滚动的文本。。可用于滚动的文本。。可用于滚动的文本。。可用于滚动的文本。。可用于滚动的文本。。可用于滚动的文本。。可用于滚动的文本。。可用于滚动的文本。。可用于滚动的文本。。可用于滚动的文本。。可用于滚动的文本。。可用于滚动的文本。。可用于滚动的文本。。可用于滚动的文本。。可用于滚动的文本。。可用于滚动的文本。。可用于滚动的文本。。可用于滚动的文本。。可用于滚动的文本。。可用于滚动的文本。。可用于滚动的文本。。可用于滚动的文本。。可用于滚动的文本。。可用于滚动的文本。。可用于滚动的文本。。可用于滚动的文本。。可用于滚动的文本。。可用于滚动的文本。。可用于滚动的文本。。可用于滚动的文本。。可用于滚动的文本。。可用于滚动的文本。。可用于滚动的文本。。可用于滚动的文本。。可用于滚动的文本。。可用于滚动的文本。。可用于滚动的文本。。可用于滚动的文本。。可用于滚动的文本。。可用于滚动的文本。。可用于滚动的文本。。可用于滚动的文本。。可用于滚动的文本。。可用于滚动的文本。。可用于滚动的文本。。可用于滚动的文本。。可用于滚动的文本。。可用于滚动的文本。。可用于滚动的文本。。可用于滚动的文本。。可用于滚动的文本。。可用于滚动的文本。。可用于滚动的文本。。可用于滚动的文本。。可用于滚动的文本。。可用于滚动的文本。。可用于滚动的文本。。可用于滚动的文本。。可用于滚动的文本。。可用于滚动的文本。。可用于滚动的文本。。可用于滚动的文本。。可用于滚动的文本。。可用于滚动的文本。。可用于滚动的文本。。可用于滚动的文本。。可用于滚动的文本。。可用于滚动的文本。。</p> </div> <div data-role="footer"> <h1>页脚文本</h1> </div></div> </body></html>
三、jQuery Mobile 方向改变事件
jQuery Mobile 方向改变(orientationchange)事件。当用户垂直或水平旋转移动设备时,触发方向改变(orientationchange)事件。
如需使用方向改变(orientationchange)事件,请附加它到 window 对象:
$(window).on("orientationchange",function(){alert("方向有改变!");});
回调函数可有一个参数,event 对象,返回移动设备的方向:"纵向"(设备保持在垂直位置)或"横向"(设备保持在水平位置):
<!DOCTYPE html><html><head><meta name="viewport" content="width=device-width, initial-scale=1"><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><link rel="stylesheet" href="../../css/jquery.mobile-1.4.5.min.css" /><script src="../../js/jquery.js"></script><script src="../../js/jquery.mobile-1.4.5.min.js"></script><script>$(document).on("pagecreate",function(event){ $(window).on("orientationchange",function(event){ alert("方向改变为: " + event.orientation); }); });</script></head><body><div data-role="page"> <div data-role="header" data-position="fixed"> <h1>orientationchange 事件</h1> </div> <div data-role="main" class="ui-content"> <p>请试着旋转您的设备!</p> <p><b>注释:</b>您必须使用移动设备或者移动模拟器来查看该事件的效果。</p> </div> <div data-role="footer" data-position="fixed"> <h1>页脚文本</h1> </div></div></body></html>
由于方向改变(orientationchange)事件绑定到 window 对象,我们可以使用 window.orientation 属性来设置不同的样式,以便区分纵向和横向的视图:
<!DOCTYPE html><html><head><meta name="viewport" content="width=device-width, initial-scale=1"><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><link rel="stylesheet" href="../../css/jquery.mobile-1.4.5.min.css" /><script src="../../js/jquery.js"></script><script src="../../js/jquery.mobile-1.4.5.min.js"></script><script>$(document).on("pagecreate",function(event){ $(window).on("orientationchange",function(){ if(window.orientation == 0) { $("p").text("方向已经变为 portrait!").css({"background-color":"yellow","font-size":"300%"}); } else { $("p").text("方向已经变为 landscape!").css({"background-color":"pink","font-size":"200%"}); } }); });</script></head><body><div data-role="page"> <div data-role="header"> <h1> orientationchange 事件</h1> </div> <div data-role="main" class="ui-content"> <p>请试着旋转您的设备!</p> <p><b>注释:</b>您必须使用移动设备或者移动模拟器来查看该事件的效果。</p> </div> <div data-role="footer"> <h1>页脚文本</h1> </div></div></body></html>
0 0
- 【Jquery mobile】事件
- jquery mobile中的事件
- jQuery mobile 事件 swipe
- JQuery Mobile事件详解
- jQuery Mobile 基础事件
- jQuery Mobile 页面事件
- jquery mobile中的事件
- JS-jquery mobile事件
- jQuery Mobile中的事件
- jQuery Mobile orientationchange 事件
- jQuery Mobile 事件
- jquery mobile mobileinit事件
- jQuery Mobile 触摸事件
- jQuery Mobile 页面事件
- jQuery Mobile教程:jQuery Mobile基本事件
- jQuery Mobile基础12----jQuery Mobile 事件(常用事件
- jQuery Mobile的API事件
- jQuery Mobile的API事件
- Spring 框架之 基于注解式编程的spring mvc
- 构造方法
- 图片整理
- hdu5692Snacks
- MySQL联合查询
- jQuery Mobile 事件
- untiy 网格的应用—骰子的制作和技能冷却效果
- Git使用杂记
- 最优比例生成环---其实树也差不多
- Android的上下文菜单和子菜单
- [Leetcode]209. Minimum Size Subarray Sum
- unity3d 第九天
- 代码生成阶段的主要任务是:
- 七种排序的实现