jquery ui - Gmail like listview item removing - jquerymobile -

i'm building phonegap mobile app jqm 1.3. have listview element, each list item have 2 actions, rename when swipe right, , delete when swipe left. want achieve behavior in gmail mobile application. when list item dragged aside (more threshold), "layer" shown related buttons. i'm using code jquery mobile swipe list demo, popup on swipe event, not fulfill needs.

how stuff can implemented ? there plugin achieve functionality?

i tried make this. working demo here - http://jsfiddle.net/q9htn/19/

first html:

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

then css. not happy having define row height way , sure there must better ways how dynamically, should ok purpose. makes sure row stays during animations happen.

.row {     height: 1em; }  .item {     position: absolute;     display: inline-block;     width: 100%;     right: -1em; /* makes item fly out 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 id     li.append(contents);     $("#list").append(li); });  $("#list").listview("refresh");  // attach swiperight handler on list $("#list").on("swiperight",">li",function(e){     var li = $(this);     var contents = $(li.children()[0]);     var item = contents.text(); // item value     var itemid = contents.attr("data-customid");      var delbutton = $("<a>").text("yes").click(function(e){              // delete handler, fade out menu , remove row             menu.fadeout(function(){                 li.remove();                 alert("deleted " + item + " id = " + itemid);             });         });         var cancelbutton = $("<a>").text("no").click(function(e){             // cancel handler, remove menu , show item             menu.fadeout(function(){                contents.animate({width: 'toggle'}, function(){                    menu.remove();                 });             });          });          // create menu         var menu = $("<span />").append("sure? - ").append(delbutton).append(" | ").append(cancelbutton)             .css("display", "none")             .addclass("menu");          // insert menu         contents.after(menu);            // slide item          contents.animate({width: 'toggle'}, function(){             // , fade in menu             menu.fadein();         });  });