javascript - 使用JQuery Mobile滑动和删除列表元素

Question

我正在试验一个设置了简单列表的 JQuery Mobile 页面:

当我单击列表元素时，它们会突出显示并按 id 存储到本地数组中。是否有一种简单(或不那么简单)的方法可以使所选元素向右滑动到屏幕之外，而其余元素折叠以填补空白？

相关代码:

var selectedItems = []; // This is updated as items are selected

var deleteButtonTapped = function() {
    // code here
};

编辑:如果有任何相关性，在页面的实际实现中，我填充列表的项目将从数据库中提取，因此我将能够重新加载页面，并且删除的元素将不再出现。

Answer 1

jsFiddle - 这很接近您正在寻找的东西...... 使用.animate()

编辑:添加代码...

.animate()函数的意思是，如果元素的 left 属性为 0，则将其向右移动与宽度相同的像素，然后使用 .fadeOut() 隐藏它功能。如果需要，也可以使用相同的公式将元件滑回原位。

HTML

<ul id="list" data-role="listview">
    <li>Acura</li>
    <li>Audi</li>
    <li>BMW</li>
    <li>Cadillac</li>
    <li>Ferrari</li>
</ul>
<button id='btnDelete'>Delete</button>

CSS

.yellow{
    background-color: yellow;
}

jQuery

$('#list li').click(function(){
    $(this).addClass('yellow'); 
});

$('#btnDelete').click(function(){
    $('.yellow').each(function(){
       $(this).animate({ marginLeft: parseInt($(this).css('marginLeft'),10) === 0 ?   $(this).outerWidth() : 0 }).fadeOut('fast');
    });
});