在JQuery监听Progressbar UI小部件的完成事件

下面的例子展示了如何在ProgressBar UI 小部件上监听完成事件。

 

<!DOCTYPE html>
<html>
<head>
    <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        function progressBar_completeHandler(event, ui) {
            alert(event.type);
        }
        $(function() {
            // Set the progressbar's initial value to 76%, and define an event listener for the "complete" event.
            $("#progressbar1").progressbar({value:76, complete:progressBar_completeHandler});
 
            // Set the progressbar's value to 18%.
            $("#button1").click(function() {
                $('#progressbar1' ).progressbar( 'option', 'value', 18);
            });
 
            // Increment the progressbar's current value by 10%.
            $("#button2").click(function() {
                var val = $("#progressbar1").progressbar("option", "value");
                $("#progressbar1").progressbar("option", "value", val+10);
            });
 
            // Decrement the progressbar's current value by 10%.
            $("#button3").click(function() {
                var val = $("#progressbar1").progressbar("option", "value");
                $("#progressbar1").progressbar("option", "value", val-10);
            });
        });
    </script>
</head>
<body>
 
    <div style="padding:20px;">
        <input id="button1" type="button" value="value = 18" />
        <input id="button2" type="button" value="value += 10" />
        <input id="button3" type="button" value="value -= 10" />
    </div>
 
    <div id="progressbar1" style="width:300px; height:80px;" />
 
</body>
</html>

 

源码下载:

 progressbar-ui-widget-in-jquery.zip

 

 

你可能感兴趣的:(jquery)