使用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()函数表示,如果左边的元素属性为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');
    });
});