Question

如何设置动画，自定义jQuery UI进度条并通过简单的输入值控制它，例如为了检查复选框将导致进度条增加，同样通过取消选中，它会减少条形（平滑）。

Answer 1

以下是我的代码，我尝试过并且有效，只是想与大家分享。

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();" /> 
&nbsp;
50% <input type="checkbox" name="c2" id="c2" onChange="update();" /> 
&nbsp;
75% <input type="checkbox" name="c3" id="c3" onChange="update();" />  
&nbsp;
100% <input type="checkbox" name="c4" id="c4" onChange="update();" />  
</body>
</html>

如何平滑地动画，自定义颜色和控制jQuery UI进度条？

1 个答案: