The progressbar exposes a single event, the change
event, which is fired by the widget every time the value of the progressbar is changed. As with the other widgets, we can supply an anonymous callback function as the value of this event in a configuration object and the component will call the function for us automatically each time the event fires.
To see this event in action, add the following <button>
to the page in progressbar2.html
:
<button id="increase">Increase by 10%</button>
Next change the final <script>
block to this:
<script type="text/javascript"> $(function() { var progressOpts = { change: function(e, ui) { var val = $(this).progressbar("option", "value"); if(val <= 100) { ($("#value").length === 0) ? $("<span>").text(val + "%").attr("id", "value").css({ float: "right", marginTop: -28, marginRight:10 }).appendTo("#progress") :$("#value").text(val + "%"); } else...