如何动画、自定义 jQuery UI 进度条并通过简单的输入值控制它,例如为了选中复选框将导致进度条增加,同样,如果未选中,它会减少进度条(平滑)。
问问题
1507 次
1 回答
3
以下是我尝试过的代码,它有效,只是想与大家分享。
只是 jquery-ui.css 的一点点变化:
.ui-progressbar .ui-progressbar-value {
margin: -1px;
height: 100%;
transition: width 0.5s;
-webkit-transition: width 0.5s;
}
代码:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Progressbar - Default functionality</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<!--<link rel="stylesheet" href="/resources/demos/style.css" />-->
<script>
var x=0.1;
/* Just display progress bar at 1st*/
$(function() {
$( "#progressbar" ).progressbar({
value: x
});
});
function update(){
// For 25% increase
var c1 = $('input[name="c1"]:checked').length > 0;
if(c1){
x=25;
$( "#progressbar" ).progressbar({ value: x });
x+=25;
}
if(!c1){
x-=24.9;
$( "#progressbar" ).progressbar({ value: x });
}
// For 50% increase
var c2 = $('input[name="c2"]:checked').length > 0;
if(c2){
$( "#progressbar" ).progressbar({ value: x });
x+=25;
}
if(!c2){
$( "#progressbar" ).progressbar({ value: x-25 });
}
// For 75% increase
var c3 = $('input[name="c3"]:checked').length > 0;
if(c3){
$( "#progressbar" ).progressbar({ value: x });
x+=25;
}
if(!c3){
$( "#progressbar" ).progressbar({ value: x-25 });
}
// For 100% increase
var c4 = $('input[name="c4"]:checked').length > 0;
if(c4){
$( "#progressbar" ).progressbar({ value: x });
x+=25;
}
if(!c4){
$( "#progressbar" ).progressbar({ value: x-25 });
}
}
</script>
</head>
<body>
<div id="progressbar" style="width:400px; height:15px; box-shadow:#666 0px 2px 2px"></div>
<br />
25% <input type="checkbox" name="c1" id="c1" onChange="update();" />
50% <input type="checkbox" name="c2" id="c2" onChange="update();" />
75% <input type="checkbox" name="c3" id="c3" onChange="update();" />
100% <input type="checkbox" name="c4" id="c4" onChange="update();" />
</body>
</html>
于 2013-09-21T11:46:24.407 回答