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

});

像listview项目删除Gmail - jquerymobile

1 个答案: