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