0

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

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

<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;}

我希望能够向右滑动并显示复选框，这是否可能？我希望它尽可能简单，没有太多的编码和杂乱，但找不到纤细的版本。

有人有任何可以帮助我的想法吗？

4

1 回答 1

1

首先，您的代码有一个错误，您将 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;
});
于 2013-06-19T08:44:15.120 回答