如何在计数器具有某些值时触发事件？

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... 
    } 
});