jquery-ui - Gmail 喜欢 listview 项目删除 - jquerymobile

Question

我正在用 jqm 1.3 构建一个 phonegap 移动应用程序。我有一个 listview 元素，每个列表项有 2 个动作，向右滑动时重命名，向左滑动时删除。我想要实现的是 gmail 移动应用程序中的行为。当某些列表项被拖到一边（超过某个阈值）时，会显示另一个带有相关按钮的“层”。目前我正在使用 jquery mobile swipe list demo中的代码，并在滑动事件上弹出，但它不能满足我的需求。

这些东西如何实现？是否有任何插件可以实现该功能？

Answer 1

我试着做这样的东西。工作演示在这里 - http://jsfiddle.net/Q9htn/19/

第一个 HTML：

<ul id="list" data-role="listview"></ul>

然后是一些 CSS。我对必须以这种方式定义行高不是很满意，我确信必须有更好的方法来完全动态地执行此操作，但希望它应该可以用于此目的。它确保该行在发生的动画期间保持原样。

.row {
    height: 1em;
}

.item {
    position: absolute;
    display: inline-block;
    width: 100%;
    right: -1em; /* This makes the item to fly out to the right */
}

.menu {
    width: 100%;
    display: inline-block;
    text-align: center;
}

JavaScript：

var items = ["Audi", "Mercedes", "Skoda", "Rover", "Nisan", "Mazda", "Toyota"];

$.each(items, function(index, item) {
    var li = $("<li class='row'>");
    var contents = $("<span class='item'>" + item + "</span>");
    contents.attr("data-customid", index); // Set some id
    li.append(contents);
    $("#list").append(li);
});

$("#list").listview("refresh");

// Attach swiperight handler on the list
$("#list").on("swiperight",">li",function(e){
    var li = $(this);
    var contents = $(li.children()[0]);
    var item = contents.text(); // Get the item value
    var itemId = contents.attr("data-customid");

    var delButton = $("<a>").text("Yes").click(function(e){ 
            // Delete handler, fade out menu and remove the row
            menu.fadeOut(function(){
                li.remove();
                alert("Deleted " + item + " with ID = " + itemId);
            });
        });
        var cancelButton = $("<a>").text("No").click(function(e){
            // Cancel Handler, remove menu and show the item
            menu.fadeOut(function(){
               contents.animate({width: 'toggle'}, function(){
                   menu.remove();
                });
            }); 
        });

        // Create the menu
        var menu = $("<span />").append("Sure? - ").append(delButton).append(" | ").append(cancelButton)
            .css("display", "none")
            .addClass("menu");

        // Insert the menu
        contents.after(menu);   
        // Slide the item 
        contents.animate({width: 'toggle'}, function(){
            // And fade in the menu
            menu.fadeIn();
        });

});