如何平滑地動畫，自定義顏色和控制jQuery UI進度條？

如何動畫，自定義jQuery UI進度條，並通過簡單的輸入值控制它，例如，爲了檢查複選框將導致進度條增加，同樣通過未選中，它會減少（平滑地）。如何平滑地動畫，自定義顏色和控制jQuery UI進度條？

2013-09-21 Faisal

以下是我嘗試過的代碼，它的工作原理，只是想與大家分享。

只是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>

來源

2013-09-21 11:46:24 Faisal

真的很感激，如果任何一個可以通過使用一些圖片或自定義CSS定製該進度條幫助碼。謝謝 – Faisal

如何平滑地動畫，自定義顏色和控制jQuery UI進度條？

回答

相關問題