Gmail像列表視圖項目刪除 - jquerymobile

我正在構建與jqm 1.3的phonegap移動應用程序。我有一個listview元素，每個列表項有2個動作，當向右滑動時重命名，當向左滑動時刪除。我想要實現的是像gmail移動應用程序中的行爲。當某個列表項被拖到一邊時（超過某個閾值），將顯示另一個「圖層」和相關的按鈕。目前我使用的代碼從jquery移動swipe list demo，與彈出的滑動事件，但它不符合我的需要。Gmail像列表視圖項目刪除 - jquerymobile

這是怎麼實現的？是否有任何插件來實現該功能？

來源

2013-07-21 Victor

我不能說我已經注意到在安卓（4.2）這種行爲，這種行爲是針對特定的移動操作系統？ –

你想向右滑動時顯示一個按鈕？ '（'swingight'，function（）{do something}）;'這是爲了防止列表視圖項是靜態的，如果它們是動態插入的，'$（document）.on（'swiperight '，'li'，function（）{do something}）;' – Omar

@Omar我正在使用滑動事件，我在找的正是「{do something}」的東西。我不知道的是如何對幻燈片進行動畫處理並將其移動到手指在設備上的移動。 – Victor

我試圖做成這樣的東西。該工作演示是在這裏 - 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(); 
     }); 

});

來源

2013-07-22 11:36:59

Gmail像列表視圖項目刪除 - jquerymobile

回答

相關問題