如何流畅地制作动画、自定义颜色和控制 jQuery UI 进度条
How to smoothly animate, customize color and control jQuery UI progressbar?
如何动画,自定义jQuery UI进度条并通过简单的输入值控制它,例如为了选中复选框将导致进度条的增加,并且未选中,它会减少栏(平滑)。
以下是我尝试过的代码,它有效,只是想与大家分享。
只是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>
相关文章:
- 如果类不是一个选项,如何在使用 jQuery 时控制(避免)嵌套 html 元素的样式
- 使用jQuery控制来自图像的音频
- JQuery代码语法问题?(“不允许内联控制结构”)
- 使用 jquery 控制两个选择输入的组合值
- 使用 CSS 和 jQuery 控制切换按钮
- 使用 Jquery 控制文本值
- 如何使用 Jquery 控制要在下拉列表中显示的选项
- 使用javascript/JQuery控制Piecemaker 2
- 使用jQuery控制HTML5<音频>要素
- 当我使用append函数附加某个内容时,我无法使用jquery控制它
- 使用onhashchange或jquery控制Back按钮
- 如何用jquery控制响应模板
- 如何使用jquery控制渐变速度
- 用JQuery控制CSS浮动
- Javascript/jQuery:控制执行顺序(还没有ajax/php)
- jQuery控制标签的边框颜色
- 如何用jquery控制第二个父元素
- 使用jQuery控制. fadeout()
- 使用jQuery控制HTML5视频
- 使用Jquery控制动态内容