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>

当用户拖动元素arround时，进度条会被填充。我正在寻找的是一个事件，当进度条被填满时（值达到100）。具体来说，我想在进度条下方显示一个段落，但这是可选的。

我正在寻找一个js if / else语句，但我无法弄清楚，如何将其设置为触发器。

任何帮助（直接或作为资源的链接）都可以很好地查看。

Answer 1

根据the documentation，您可以在progressbar初始化方法中提供方法，也可以订阅progressbarcomplete事件。

因此，将代码更改为：

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

说明了其中一种用法。

显示完成div的实例：http://jsfiddle.net/CCGxW/

Answer 2

您可以使用进度条API的complete事件（请参阅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 3

请参阅complete event of the progressbar：

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

当计数器有一些价值时如何触发事件？

3 个答案: