在動態列表視圖上生成動畫

我試圖向每個列表項添加一個單擊的60秒動畫餅形按鈕計時器。每個列表視圖都是由javascript生成的。在動態列表視圖上生成動畫

我已經嘗試了不同的東西，但我永遠不能讓它工作生成與餅計時器內的每一行，每個人有不同的時間取決於點擊。

爲了更好地理解什麼，我想在這裏完成的計時器動畫與列表行創建：FIDDLE LINK

列表視圖創建一些代碼：

var listCreated = false; 

function appendToList() { 

    //Create the listview if not created 
    if (!listCreated) { 
     $("#content").append("<ul id='list' data-role='listview' data-inset='true'></ul>"); 
     listCreated = true; 
     $("#content").trigger("create"); 
    } 
    $("#list").append("<li>Item</li>"); 
    $("#list").listview("refresh"); 

}

我是新到jQuery的移動，所以幫助將不勝感激:)

來源

2014-12-05 Bruno

您可以添加多個餡餅這樣的：http://jsfiddle.net/qye2bamp/4/;不過，您的插件只允許一個餅圖一次運行。如果您在另一個運行時啓動另一個，則第一個停止在該點。 – ezanker 2014-12-05 18:19:20

您使用的代碼將無法正常工作，因爲您爲每個計時器使用相同的ID。在使用ID時，他們需要使用唯一的名稱。解決方法是有2個類（定時器和timera）和uppon單擊您用定時器動畫替換列表項並啓動它。

演示

http://jsfiddle.net/furhpjah/

新代碼

$(document).on("click", "li", function() { 
$(".timer").replaceWith("<div class='timera'>0</div>"); 
$(this).replaceWith("<li><a><div class='timer'></div>Timer Running</a></li>"); 
$("#list").listview("refresh"); 
runTimer() 
});

來源

2014-12-05 18:37:38 Tasos

不錯的工作Tasos！但是，如果計時器已在運行，並且您添加了第二個計時器。點擊第二個重置第一個，而不是讓它同時運行... – ezanker 2014-12-05 18:52:05

我還沒有走過那麼遠的M8。 :)）但是你可以刪除（$（「。timer」）。replaceWith（「

」）;）至少你看到計時器已經停止。演示 - http://jsfiddle.net/3nv6hm7k/ – Tasos 2014-12-05 18:59:23

在動態列表視圖上生成動畫

回答

相關問題