使用 jQuery 进度条的奇怪事情答案

【问题标题】：Strange thing using jQuery progressbar使用 jQuery 进度条的奇怪事情
【发布时间】：2012-10-23 12:35:42
【问题描述】：

我试图在 jQuery 进度条中只使用一种颜色，但它会填满整个 div。

这就是问题所在，我只是使用这些功能。

$(document).ready(function(){
    $("#progressbar").css({ "background": '#FF0000' });
    $("#progressbar").progressbar({  value: 10  });    
});

http://jsfiddle.net/jtf7M/1/

如何一步一步正确填充？

【问题讨论】：

标签： jquery-ui colors jquery-ui-progressbar

【解决方案1】：

CSS 文件丢失。将http://code.jquery.com/ui/1.9.0/themes/base/jquery-ui.css添加到您的资源中就可以了。

编辑：

如果您不想加载整个 CSS 文件，只需在您的页面中添加此代码 http://jsfiddle.net/jtf7M/21/:

<style>
    .ui-progressbar { height:2em; text-align: left; overflow: hidden; }
    .ui-progressbar .ui-progressbar-value {margin: -1px; height:100%; }
    .ui-widget-content {
        border: 1px solid #AAA;
        background: white;
    }
    .ui-corner-all {
        -moz-border-radius: 4px/*{cornerRadius}*/;
        -webkit-border-radius: 4px/*{cornerRadius}*/;
        -khtml-border-radius: 4px/*{cornerRadius}*/;
        border-radius: 4px/*{cornerRadius}*/;
    }
    .ui-widget-header {
        border: 1px solid #AAA/*{borderColorHeader}*/;
        background: #CCC;
    }
</style>

【讨论】：

哦，谢谢，它有效。但是，你知道不使用 jquery-ui css 的方法吗？
不想加载jquery-ui-css的可以自己添加css。

【解决方案2】：

我认为该 jsfiddle 上没有 jQuery ui lib 加载。但你做得对。

http://jqueryui.com/progressbar/#animated

【讨论】：