Gmail like listview item removing - jquerymobile - jquery-ui

Question

I'm building a phonegap mobile app with jqm 1.3.
I have a listview element, each list item have 2 actions, rename when swipe right, and delete when swipe left. What I want to achieve is a behavior like in gmail mobile application. When some list item is dragged aside (more than some threshold), another "layer" is shown with related buttons. currently I'm using code from jquery mobile swipe list demo, with popup on swipe event, but it is not fulfill my needs.
How this stuff can be implemented ?
Is there any plugin to achieve that functionality?

Answer 1

I tried to make something like this. The working demo is here - http://jsfiddle.net/Q9htn/19/
First HTML:
<ul id="list" data-role="listview"></ul>
Then some CSS. I am not very happy with having to define row height this way and I am sure there must be better ways how to do this fully dynamically, but hopefully it should be OK for this purpose. It makes sure that the row stays as it is during the animations which happen.
.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();
});
});