如何在計數器具有某些值時觸發事件？

Question

簡單地說 - 我找不到這個具體問題的答案，我的jquery/js經驗仍然很低。

我有這個在我的代碼：

$(function() { 
    $("#progressbar").progressbar({ 
     value: 0 
    }); 

    $("#draggable").draggable({ 
     drag: function() { 
      var val = $("#progressbar").progressbar("option", "value"); 
      $("#progressbar").progressbar("option", "value", val+0.4); 

     }, 
    }); 
}); 
</script> 

<div id="progressbar"></div> 
<br/> 
<div id="draggable" class="ui-widget ui-widget-content"> 
    <p>Drag me arround like a mad man.</p> 
</div> 

當用戶拖動角落找尋元素，進度條得到填補。我正在尋找的是一個事件，當進度條被填充時（值達到100）。具體而言，我希望在進度條下方顯示一段，但這是可選的。

我正在尋找一個js if/else語句，但我無法弄清楚，如何將其設置爲觸發器。

任何幫助（直接，或作爲資源的鏈接）將被很好地觀看。

Answer 1

您可以使用complete事件進度的API（見documentation）：

$("#progressbar").progressbar({ 
    complete: function(event, ui) { ... } 
}); 

[編輯]你完整的代碼會可以（按照您的要求在進度條後添加一段）：

$(function() { 
    $("#progressbar").progressbar({ 
     value: 0 
     complete: function(event, ui) { 
      $('<p>The progressbar is complete</p>').insertAfter('#progressbar'); 
     } 
    }); 

    $("#draggable").draggable({ 
     drag: function() { 
      var val = $("#progressbar").progressbar("option", "value"); 
      $("#progressbar").progressbar("option", "value", val+0.4); 
     }, 
    }); 
}); 
</script> 

Answer 2

根據the documentation，您可以提供progressbar初始化方法中的方法或訂閱progressbarcomplete事件。

因此，改變你的代碼是這樣的：

$("#progressbar").progressbar({ 
    value: 10, 
    complete: function(){ alert("complete"); } 
}); 

說明這些用法之一。

顯示在完成一個div的活生生的例子：http://jsfiddle.net/CCGxW/

Answer 3

見complete event of the progressbar：

$("#progressbar").progressbar({ 
    value: 0, 
    complete: function(event, ui) 
    { 
     // here is the event that you are looking for... 
    } 
});