刷卡顯示覆選框

我已經看到了這個代碼，我喜歡讓你刷卡的一種列表視圖中露出一個刪除按鈕，如下圖所示：http://ankane.github.io/swipeout/demo.html 刷卡顯示覆選框

現在我已經在申報單顯示的列表視圖這樣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;}

我希望能夠向右滑動，然後複選框出現，這是可能的呢？我希望它儘可能簡單，不要太多編碼和混亂，但不能找到一個細長版本。

任何人有任何想法，可以幫助我嗎？

來源

2013-06-19 mrmason

首先，你的代碼有一個錯誤，你使用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-19 08:44:15

刷卡顯示覆選框

回答

相關問題