不能滑动为jQuery Mobile工作
[英]can't get swiping to work for jquery mobile
问题描述
newbie here, sorry if I don't understand all the correct ins and outs of posting... I have visited a few pages to try to understand swiping left and right for jquery mobile. 
新手在这里，如果我不了解发布的所有正确内容，对不起...我已经访问了几页，以尝试了解向左滑动和向右滑动jquery mobile。 I visited this page for my script - http://designicu.com/jquery-mobile-swipe/ for whatever dumb reason, I can't get it to work, at all. 我出于脚本目的访问了此页面-http: //designicu.com/jquery-mobile-swipe/出于任何愚蠢的原因，我根本无法正常工作。 I am sure I am missing something small and stupid... Can anyone see my issue? 我确定我缺少一些小而愚蠢的东西...谁能看到我的问题？ thanks 谢谢
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
<link rel="stylesheet" href="_/css/jquery.mobile.css" />
<script src="_/javascript/jquery.js"></script>
<script src="_/javascript/jquery.mobile.js"></script>
<script>
$('div.ui-page').live("swipeleft", function(){
var nextpage = $(this).next('div[data-role="page"]');
if (nextpage.length > 0) {
$.mobile.changePage(nextpage, "slide", false, true);
}
});
$('div.ui-page').live("swiperight", function(){
var prevpage = $(this).prev('div[data-role="page"]');
if (prevpage.length > 0) {
$.mobile.changePage(prevpage, {transition: "slide",
reverse: true}, true, true);
}
});
</script>
</head>
<body>
<div data-role="page" id="editor">
<div>bucker</div>
</div>
<div data-role="page" id="innovation1">
<div>bunk</div>
</div>
</body>
</html>
1 个解决方案
解决方案1
4 已采纳 2013-03-21 08:43:47
I made you a working example: http://jsfiddle.net/Gajotres/NV6Py/ 我为您提供了一个有效的示例： http : //jsfiddle.net/Gajotres/NV6Py/
$(document).on('swipeleft', '[data-role="page"]', function(event){
if(event.handled !== true) // This will prevent event triggering more then once
{
var nextpage = $(this).next('[data-role="page"]');
// swipe using id of next page if exists
if (nextpage.length > 0) {
$.mobile.changePage(nextpage, {transition: "slide", reverse: false}, true, true);
}
event.handled = true;
}
return false;
});
$(document).on('swiperight', '[data-role="page"]', function(event){
if(event.handled !== true) // This will prevent event triggering more then once
{
var prevpage = $(this).prev('[data-role="page"]');
if (prevpage.length > 0) {
$.mobile.changePage(prevpage, {transition: "slide", reverse: true}, true, true);
}
event.handled = true;
}
return false;
});
And you version is working just fine. 您的版本运行正常。 I have replaced only js and css initialization with jQuery 1.8.2 and jQuery Mobile 1.2. 我仅用jQuery 1.8.2和jQuery Mobile 1.2替换了js和css初始化。 Here take a look: 看一下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://www.dragan-gaic.info/js/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<script>
$('div.ui-page').live("swipeleft", function(){
var nextpage = $(this).next('div[data-role="page"]');
if (nextpage.length > 0) {
$.mobile.changePage(nextpage, "slide", false, true);
}
});
$('div.ui-page').live("swiperight", function(){
var prevpage = $(this).prev('div[data-role="page"]');
if (prevpage.length > 0) {
$.mobile.changePage(prevpage, {transition: "slide",
reverse: true}, true, true);
}
});
</script>
</head>
<body>
<div data-role="page" id="editor">
<div>bucker</div>
</div>
<div data-role="page" id="innovation1">
<div>bunk</div>
</div>
</body>
</html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.