在JQuery中开始使用Progressbar UI小部件-CSDN博客

下面的例子展示了如何在ProgressBar UI 小部件上通过JQuery设置value选项来设置它的value。

<!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() {
            // Set the progressbar's initial value to 76%.
            $("#progressbar1").progressbar({value:76});
 
            // 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-event-ui-widget-in-jquery.zip