jQuery的TimeCircles事件偵聽範圍

我從here測試出了jQuery計時器「TimeCircles」，我已經能夠生產出分/秒計時器30分鐘用一種警告在25分鐘 ，我試圖在20分鐘上添加一個閾值事件，這會改變圓圈的顏色。jQuery的TimeCircles事件偵聽範圍

我不完全確定如何在實例化後訪問TimeCircles()屬性。我們實例化像這樣：

$('#idle_timer').attr('data-timer',1800); 
$('#idle_timer').TimeCircles({ time: { 
    Days: { show:false }, 
    Hours: { show:false }, 
    Minutes: { color: '#4D8DC1' }, 
    Seconds: { color: '#4D8DC1' } } }) 
    .addListener(
    function(unit,value,total) { 
     if (total == 1200) { 

      // CHANGE COLOUR OF TimeCircles HERE 

     } else if (total == 1500) { 
      alert('Your session will expire in 5 minutes, you should save your work and/or reload the page.'); 
     } 
    } 
);

在測試"total == 1200"，我怎麼能訪問例如分鐘/秒顏色屬性這樣既可以轉變爲紅色？ $(this)似乎不可用？

來源

2014-01-10 oucil

我能找到原始開發人員的解決方案。部分問題在於，動態設置的.data（）屬性在代碼中未被考慮，並且已更新。從那裏，這很容易，只需添加一個偵聽器，然後在它測試一個total值，然後只是實例化一個新的實例，它會覆蓋原有的...

$(document).ready(function() { 
var idle_timer = $('div#idle_timer',window.parent.document); 
idle_timer.data('timer',15); 
idle_timer.TimeCircles({ time: { Days: { show:false }, Hours: { show:false }, Minutes: { color: '#4D8DC1' }, Seconds: { color: '#4D8DC1' } } }) 
.addListener(
    function(unit,value,total) { 
     if (total == 10) { 
      idle_timer.data('timer',10); 
      idle_timer.TimeCircles({ time: { Days: { show:false }, Hours: { show:false }, Minutes: { color: '#900' }, Seconds: { color: '#900' } } }) 
     } else if (total == 5) { 
      alert('Your session will expire in 5 seconds, you should save your work and/or reload the page.'); 
     } 
    } 
); 
});

來源

2014-01-10 16:49:46 oucil

不知道這是否是理想的，但工作原理：

$('#idle_timer').data('TimeCircles_config', { time: { 
    Days: { show:false }, 
    Hours: { show:false }, 
    Minutes: { color: '#4D8DC1' }, 
    Seconds: { color: '#4D8DC1' } } } 
); 

$('#idle_timer').TimeCircles($('#idle_timer').data('TimeCircles_config')) 
    .addListener(
    function(unit,value,total) { 
     if (total == 1200) { 
      var config = $(this).data('TimeCircles_config'); //If thid doesn't work, use $('#idle_timer').data(...) 
      var minColor = config.Minutes.color; 

      // CHANGE COLOUR OF TimeCircles HERE 

     } else if (total == 1500) { 
      alert('Your session will expire in 5 minutes, you should save your work and/or reload the page.'); 
     } 
    } 
);

希望這有助於。歡呼聲

來源

2014-01-10 06:48:54

感謝您的建議，遺憾的是$（本）在監聽器中是不可用的，這是另一個問題，我在GitHub上提出了這個問題，但另一個是我不相信TimeCircles（）受到實例化後配置數組更改的影響，它的聲音，它可能需要被銷燬並重新創建，並留下相同的時間和新的顏色數組。 JSfiddle無法讓我爲我做任何事情，你有沒有正在運行的測試？ – oucil

我與開發人員合作更新了他的代碼，我們發現了另一種解決方案，請參閱我的答案。謝謝你的幫助。 – oucil

jQuery的TimeCircles事件偵聽範圍

回答

相關問題