滑动显示复选框

Swipe to show checkbox

本文关键字：复选框 显示      更新时间：2023-09-26

我看到了我喜欢的这段代码，它使您能够滑动显示列表视图中的删除按钮，如下所示:http://ankane.github.io/swipeout/demo.html

现在我有了一个像这样在div中显示的列表视图jsfiddle 

<div id="maincontent">
    <div id="title">Title 1</div>
    <div id="delbutton"><input type="checkbox"></div>
</div>
<div id="maincontent">
        <div id="title">Title 2</div>
    <div id="delbutton"><input type="checkbox"></div>
</div>
<div id="maincontent">
    <div id="title">Title 3</div>
    <div id="delbutton"><input type="checkbox"></div>
</div>
<div id="maincontent">
    <div id="title">Title 4</div>
    <div id="delbutton"><input type="checkbox"></div>
</div>
body{margin:0;}
#maincontent{width:100%; height:81px; border-bottom:1px solid #ccc;}
#title{font-size:20px; float:left; margin-left:20px; margin-top:10px;}
#delbutton{float:right; margin-right:20px; margin-top:30px;}

我想能够向右滑动和复选框出现，这是可能的吗?我希望它尽可能简单，不要太多的代码和混乱，但无法找到一个细长的版本。

谁有什么主意可以帮助我?

首先，你的代码有一个错误，你使用id的maincontent和其他东西。当一个元素重复出现时，你应该使用类来代替。每个页面的Id限制为一个(例如，一个#maincontent，一个#title等)，无论如何，对于你的问题，有一种方法:

http://jsfiddle.net/jonigiuro/QDH6Z/2/

当用户按下鼠标按钮(或触摸)时，脚本检查光标的位置:

element.on('mousedown', function(e) {
    self.startPosition = e.clientX;
});

，当用户释放鼠标按钮

时，它也会做同样的事情
element.on('mouseup', function(e) {
    self.endPosition = e.clientX;
});

，然后计算两个值之间的差值，以查看用户是否已经滑动:

if( self.endPosition - self.startPosition > threshold ) {
     self.currentElement.find('input').addClass('visible');
}

或者你可以使用像这样的jquery插件:https://github.com/mattbryson/TouchSwipe-Jquery-Plugin

希望对您有所帮助

编辑!上面的代码没有工作，因为我没有正确使用触摸事件。这里是正确的小提琴:

http://jsfiddle.net/jonigiuro/QDH6Z/33/

element.on('touchstart', function(event) {
    element.find('input').removeClass('visible'); //hide all the checkboxes when the swipe begins
    self.startPosition = event.originalEvent.changedTouches[0].pageX;
});
相关文章：