在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>源码下载：