添加 jquery 移动滑动事件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7293220/
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
Adding jquery mobile swipe event
提问by bollo
I have a listview and what I am trying to do is add a swipe event on the links. For example, if a user swipes the first link it goes to that page. Is this possible with listview elements. I have tried div,href,a,li,ul but still no alert. It works with body. Thanks
我有一个列表视图，我想要做的是在链接上添加一个滑动事件。例如，如果用户滑动第一个链接，它会转到该页面。这可能与列表视图元素。我试过 div,href,a,li,ul 但仍然没有警报。它适用于身体。谢谢
<div>
<ul data-role="listview" data-inset="true">
<li class="rqstpage"><a href="./requests.php">Requests</a></li>
<li><a href="./speakers.php" data-transition="pop">Control Panel</a></li>
<li><a href="./schedule.html">Schedule</a></li>
<li><a href="./information.html">Information</a></li>
</ul>
</div>
<script>
$("div ul li.rqstpage").bind('swipe',function(event, ui){
$.mobile.changePage("requests.php", "slide");
});
</script>
回答by Phill Pafford
Live Example:
现场示例：
JS:
JS：
$("#listitem").swiperight(function() {
$.mobile.changePage("#page1");
});
HTML:
HTML：
<div data-role="page" id="home">
<div data-role="content">
<p>
<ul data-role="listview" data-inset="true" data-theme="c">
<li id="listitem">Swipe Right to view Page 1</li>
</ul>
</p>
</div>
</div>
<div data-role="page" id="page1">
<div data-role="content">
<ul data-role="listview" data-inset="true" data-theme="c">
<li data-role="list-divider">Navigation</li>
<li><a href="#home">Back to the Home Page</a></li>
</ul>
<p>
Yeah!<br />You Swiped Right to view Page 1
</p>
</div>
</div>
Related:
有关的：
回答by Robin Maben
Have you tried using binding using live()?
您是否尝试过使用绑定live()？
UPDATE: .live()will be deprecated and the correct usage is .on()
更新：.live()将被弃用，正确的用法是.on()
It attaches the handler to the event for all current matching elements as well as those that might match later on.
它将处理程序附加到所有当前匹配元素以及以后可能匹配的事件的事件。
pageCreate() {
$(parent).on('swipe', 'li.rqstpage', function() {
$.mobile.changePage("requests.php", "slide");
}
}
Have you considred using this library for gestures?
您是否考虑过使用此库进行手势操作？
回答by Грозный
does it work if you bind it directly on the control, like so:
如果直接将其绑定在控件上，它是否有效，如下所示：
pageCreate() {
$("li.rqstpage").swipe() {
$.mobile.changePage("requests.php", "slide");
}
}
回答by Brian
If you want the page to slide in the natural direction that the user swipes, then do it like this:
如果您希望页面向用户滑动的自然方向滑动，请执行以下操作：
// For a left swipe: page slides from right to left
$('#listitem').on('swipeleft', function() {
$.mobile.changePage('#page-to-left', { transition: slide});
});
// For a right swipe: page slides from left to right (add "reverse: true")
$('#listitem').on('swiperight', function() {
$.mobile.changePage('#page-to-right', { transition: slide, reverse: true});
});
回答by user3723522
if you want transition you need to specify that you want transition also such as
如果你想要过渡，你需要指定你也想要过渡，比如
$.mobile.changePage('#page1', { transition: 'flip' });
