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 回答