标签：前端 jquerymobile 框架
以下列举了jQueryMobile的常用事件：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>page示例</title>
<link rel="stylesheet" type="text/css" href="jquery.mobile-1.4.5.min.css">
<script src="jquery-1.11.1.min.js"></script>
<script src="jquery.mobile-1.4.5.min.js"></script>
<script>
//页面加载事件
$(document).on("pageinit",function(){
//触摸事件
$("#p1").on("tap",function(){
$(this).hide();
});
//长按事件
$("#p2").on("taphold",function(){
$(this).hide();
});
//左右滑动事件
$("#p3").on("swipe",function(){
$(this).hide();
});
//右滑动事件
$("#p4").on("swiperight",function(){
$(this).hide();
});
//滑动开始事件
$(document).on("scrollstart",function(){
alert("开始滑动")
});
//滑动停止事件
$(document).on("scrollstop",function(){
alert("停止滑动")
});
});
</script>
</head>
<body>
<div data-role="page" id="page_one">
<div data-role="header" data-position="fixed">
<h1>欢迎来到主页</h1>
</div>
<div data-role="main">
<p id="p1">点击我隐藏</p>
<p id="p2">长按我隐藏</p>
<p id="p3">滑动我隐藏</p>
<p id="p4">右滑我隐藏</p>
<p>嘻嘻哈哈</p>
<p>嘻嘻哈哈</p>
<p>嘻嘻哈哈</p>
<p>嘻嘻哈哈</p>
<p>嘻嘻哈哈</p>
<p>嘻嘻哈哈</p>
<p>嘻嘻哈哈</p>
<p>嘻嘻哈哈</p>
<p>嘻嘻哈哈</p>
<p>嘻嘻哈哈</p>
<p>嘻嘻哈哈</p>
<p>嘻嘻哈哈</p>
<p>嘻嘻哈哈</p>
<p>嘻嘻哈哈</p>
<p>嘻嘻哈哈</p>
</div>
<div data-role="footer" data-position="fixed">
<h1>底部</h1>
</div>
</div>
</body>
</html>
版权声明：本文为博主原创文章，未经博主允许不得转载。
标签：前端 jquerymobile 框架
原文地址：http://blog.csdn.net/bboyjoe/article/details/48110235
