在JQuery中开始使用Progressbar UI小部件
下面的例子展示了如何在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