我有一个列表视图,我想要做的是在链接上添加一个滑动事件。例如,如果用户滑动第一个链接,它会转到该页面。这可能与列表视图元素。我已经尝试过div,href,a,li,ul但仍然没有提示。它适用于身体。添加jQuery的移动滑动事件
pageCreate() {
$("li.rqstpage").swipe() {
$.mobile.changePage("requests.php", "slide");
}
}
我有一个列表视图,我想要做的是在链接上添加一个滑动事件。例如,如果用户滑动第一个链接,它会转到该页面。这可能与列表视图元素。我已经尝试过div,href,a,li,ul但仍然没有提示。它适用于身体。添加jQuery的移动滑动事件
pageCreate() {
$("li.rqstpage").swipe() {
$.mobile.changePage("requests.php", "slide");
}
}
直播示例:
JS:
$("#listitem").swiperight(function() {
$.mobile.changePage("#page1");
});
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>
相关:
@bollo你有没有想过如何将这个发送到一个新的URL而不是DIV? – SnowboardBruin
不,如果你直接绑定它的控制,像这样工作?
UPDATE:.live()
将被弃用,并在正确的用法是.on()
它连接的处理程序事件目前所有匹配元素以及那些可能匹配以后。
pageCreate() {
$(parent).on('swipe', 'li.rqstpage', function() {
$.mobile.changePage("requests.php", "slide");
}
}
你considred使用这个库gestures?
您是否尝试过使用结合使用live()
:谢谢
<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>
如果您希望页面的自然方向滑动,用户刷卡,然后再去做这样的:
// 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});
});
,如果你想转换你需要指定你想过渡也如
$.mobile.changePage('#page1', { transition: 'flip' });
+1我要去尝试创建一个照片库与滑动手势 – Tsar