jQuery Mobile 滑动不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14933095/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery Mobile swipe not working
提问by Ashwin
I am working on to create my own image gallery for a project. For that I need swipe event. So found the below code on jsfiddle. Inserted all the necessary files. It shows the list and all.. But still the swipe is not working.? Am I writing the jquery code in the right place? Or something wrong? Here`s my code:
我正在为一个项目创建我自己的图片库。为此，我需要滑动事件。所以在jsfiddle上找到了下面的代码。插入了所有必要的文件。它显示了列表和所有内容。但仍然无法滑动。？我是否在正确的位置编写了 jquery 代码？或者有什么问题？这是我的代码：
<html>
<head>
<meta charset="utf-8" />
<title>Home</title>
<!-- Meta viewport tag is to adjust to all Mobile screen Resolutions-->
<meta name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1" />
<link rel="stylesheet" type="text/css" href="Css/style.css" />
<link rel="stylesheet" type="text/css" href="Css/Jstyle.css" />
<link rel="stylesheet" type="text/css" href="Css/jquery.mobile.theme-1.2.0.css" />
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.css" />
<script type="text/javascript" src="Javascript/jquery1.js"></script>
<script type="text/javascript" src="Javascript/jquery2.js"></script>
<script type="text/javascript" src="css/jq1.6.2.js"></script>
<script type="text/javascript">
$("#listitem").swiperight(function() {
$.mobile.changePage("#page1");
});
</script>
</head>
<body>
<div data-role="page" id="home">
<div data-role="content">
<ul data-role="listview" data-inset="true">
<li id="listitem"> Swipe Right to view Page 1</a></li>
</ul>
</div>
</div>
<div data-role="page" id="page1">
<div data-role="content">
<ul data-role="listview" data-inset="true" data-theme="c">
<li id="listitem">Navigation</li>
</ul>
<p>
Page 1
</p>
</div>
</div>
</body>
回答by Jai
Try with pageinithandler for jQuery mobile:
尝试使用pageinitjQuery 移动处理程序：
$(document).on('pageinit', function(event){
$("#listitem").swiperight(function() {
$.mobile.changePage("#page1");
});
});
Docs for pageinit@ jquery mobile.
From the docs:
从文档：
Take a look at Configuring Defaults
Because the jquery-mobile event is triggered immediately, you'll need to bind your event handler before jQuery Mobile is loaded. Link to your JavaScript files in the following order:
<script src="jquery.js"></script> <script src="custom-scripting.js"></script> <script src="jquery-mobile.js"></script>
因为 jquery-mobile 事件是立即触发的，所以您需要在加载 jQuery Mobile 之前绑定您的事件处理程序。按以下顺序链接到您的 JavaScript 文件：
<script src="jquery.js"></script> <script src="custom-scripting.js"></script> <script src="jquery-mobile.js"></script>
回答by Victor
This was driving me nuts too..I didn't have to use .on('pageinit') as suggested in previous post. Turns out my syntax was correct in my JQuery, but CASE SENSITIVTY was my issue. 'swiperight' didn't work, but 'swipeRight' did! The below code worked for me, and also fixed the issue of Swipe preventing up and down document scrolling in mobile browsers. Be sure to specify the swipeRight and swipeLeft methods seperately instead of one generic 'swipe' class and you're good to go! * Take note of the Exclude Elements line at the bottom, notice I took 'span' out of the list, to allow swiping on the commonly used, span element.
这也让我发疯了..我不必像上一篇文章中建议的那样使用 .on('pageinit') 。结果证明我的 JQuery 语法是正确的，但 CASE SENSITIVTY 是我的问题。“swiperight”不起作用，但“swipeRight”起作用了！下面的代码对我有用，还解决了在移动浏览器中防止上下滚动文档的问题。一定要分别指定 swipeRight 和 swipeLeft 方法，而不是一个通用的“swipe”类，你就可以开始了！* 注意底部的 Exclude Elements 行，注意我从列表中删除了“span”，以允许在常用的 span 元素上滑动。
$(function() {
$('.yourclassname').swipe(
{
swipeLeft:function(event, direction, distance, duration, fingerCount)
{
// do your swipe left actions in here, animations, fading, etc..
alert(direction);
},
swipeRight:function(event, direction, distance, duration, fingerCount)
{
// do your swipe right actions in here, animations, fading, etc..
alert(direction);
},
threshold:4,
// set your swipe threshold above
excludedElements:"button, input, select, textarea"
// notice span isn't in the above list
});
});
![jQuery 验证器 $.validator.methods[method] 未定义](/res/img/loading.gif)