Xiaoqiang의 HTML5 모바일 개발 도로(52) - jquerymobile의 터치 상호작용
- 黄舟원래의
- 2017-02-15 14:00:161520검색
터치 작업을 위해 모바일 장치를 사용할 때 가장 일반적으로 사용되는 작업은 화면 누르기, 누르기 및 제스처 작업입니다. jQuery Mobile은 바인딩된 터치 이벤트를 통해 사용자의 특정 터치 동작에 응답할 수 있습니다.
1.
을 길게 눌러 코드를 직접 입력하세요(모든 것이 코드에 있으니 자세히 살펴보세요!)
<!DOCTYPE html>
<html>
<head>
<title>练习</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" />
<link href="css/jquery.mobile-1.0.1.min.css"
rel="stylesheet" type="text/css"/>
<script src="js/jquery-1.6.4.js"
type="text/javascript" ></script>
<script src="js/jquery.mobile-1.0.1.js"
type="text/javascript" ></script>
<script type="text/javascript">
$('#page1').live('tap', function(){
$.mobile.changePage('#page2');
});
$('#page2').live('tap', function(){
$.mobile.changePage('#page1');
});
$('#page1').live('taphold', function(){
alert('taphold事件被触发');
});
$('#page2').live('taphold', function(){
$.mobile.changePage('#about');
});
</script>
</head>
<body>
<section id="page1" data-role="page">
<header data-role="header">
<h1>Tap事件处理</h1>
</header>
<p class="content" data-role="content">
轻击页面进入下一页<br/>
按住不放，打开关于对话框
</p>
<footer data-role="footer"></footer>
</section>
<section id="page2" data-role="page">
<header data-role="header">
<h1>Tap事件处理</h1>
</header>
<p class="content" data-role="content">
轻击页面返回前一页
</p>
<footer data-role="footer">
</footer>
</section>
<p id="abut" data-role="dialog">
<p data-role="header">
<h1>关于本程序</h1>
</p>
<p data-role="content">
演示轻击触控事件响应
</p>
</p>
</body>
</html>tap: 탭 이벤트
taphold: 길게 누르기 이벤트
2. 스와이프
스와이프는 손가락이나 손으로 쓰는 것을 말합니다. 펜이 화면에서 왼쪽이나 오른쪽으로 빠르게 미끄러지면 왼쪽으로 밀기 이벤트 또는 오른쪽으로 밀기 이벤트가 트리거됩니다.
<!DOCTYPE html>
<html>
<head>
<title>练习</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" />
<link href="css/jquery.mobile-1.0.1.min.css"
rel="stylesheet" type="text/css"/>
<script src="js/jquery-1.6.4.js"
type="text/javascript" ></script>
<script src="js/jquery.mobile-1.0.1.js"
type="text/javascript" ></script>
<script type="text/javascript">
$('#page1').live('swiperight', function(){
$.mobile.changePage('#page2');
});
$('#page2').live('swiperight', function(){
$.mobile.changePage('#page1');
});
$('#page1').live('swipeleft', function(){
$('#lnkDialog').click();
});
$('#page2').live('swiperleft', function(){
$.mobile.changePage('#about');
});
</script>
</head>
<body>
<section id="page1" data-role="page">
<header data-role="header">
<h1>swipe事件处理</h1>
</header>
<p class="content" data-role="content">
向右滑动页面进入下一页<br/>
向左滑动页面，打开关于对话框
</p>
<footer data-role="footer"></footer>
</section>
<section id="page2" data-role="page">
<header data-role="header">
<h1>swipe事件处理</h1>
</header>
<p class="content" data-role="content">
向右滑动页面进入前一页br/>
向左滑动页面，打开关于对话框
</p>
<footer data-role="footer">
</footer>
</section>
<p id="abut" data-role="dialog">
<p data-role="header">
<h1>关于本程序</h1>
</p>
<p data-role="content">
演示swipeleft&swiperight触控事件响应
</p>
</p>
<a id="lnkDialog" href="#about" data-rel="dialog" data-transition="pop" style="display:none;"></a>
</body>
</html>위 코드에서는 인터페이스 전환 과정에서 전환 효과를 변경해야 하는 경우 하이퍼링크를 사용하여 구현해야 합니다. 링크의 표시 속성이 없으면 청취 함수에서 click() 메소드를 호출하여 인터페이스 전환을 수행한 다음 링크에 데이터 전환을 추가하여 전환 효과를 설정합니다.
3. 가상 마우스 이벤트
| 事件 | 含义 |
| vmouseover | 触控或者滑动DOM容器之上 |
| vmoseout | 触控或者滑动离开 |
| vmousedown | 触摸或者按下 |
| vmoseup | 触摸结束或者鼠标按键释放 |
| vclick | 触摸结束或鼠标按键被释放 |
| vclick事件通常在vmouseup事件后300ms触发 | |
| vmousecancel | 触控事件中发起mousecancel事件时触发 |
| ...... | ...... |
| ...... | ...... |
<!DOCTYPE html>
<html>
<head>
<title>练习</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" />
<link href="css/jquery.mobile-1.0.1.min.css"
rel="stylesheet" type="text/css"/>
<script src="js/jquery-1.6.4.js"
type="text/javascript" ></script>
<script src="js/jquery.mobile-1.0.1.js" type="text/javascript" ></script>
<script type="text/javascript">
$('#page1').live('vmouseup', function(event, ui){
alert("当前点击位置" + "\n" +
"\npageX:" + event.pageX + //当前HTML页面横坐标
"\npageY:" + event.pageY + //当前HTML页面纵坐标
"\nscreenX:" + event.screenX + //当前屏幕横坐标
"\nscreenY:" + event.screenY + //当前屏幕纵坐标
"\nclientX:" + event.clientX + //当前窗口区域横坐标
"\nclientY:" + event.clientY); //当前窗口区域纵坐标
});
</script>
</head>
<body>
<section id="page1" data-role="page">
<header data-role = "header">
<h1>vMouse事件处理</h1>
</header>
<p class="content" data-role="content">
轻击页面，显示点击位置
</p>
<p style="height: 500px;"></p>
内容底部
<footer data-role="footer"></footer>
</section>
</body>
</html>위는 Xiaoqiang의 HTML5 모바일 개발 경로입니다(52 ). ——jquerymobile의 터치 상호작용 내용에 대한 자세한 내용은 PHP 중국어 웹사이트(www.php.cn)를 참고하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.