jQuery进度栏颜色更改 [英] Jquery progress bar color change
本文介绍了jQuery进度栏颜色更改的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
这是我的jquery进度条,我想将进度条的颜色更改,将Acceptedbar
类更改为绿色,将Declinedbar
类更改为红色
This is my jquery progress bar i want to the change the color for the progress bar with class of Acceptedbar
to green and class of Declinedbar
to Red
<head runat="server">
<title>Idea Storm</title>
<link href="css/CSS.css" rel="stylesheet" type="text/css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/jquery-ui.min.js"
type="text/javascript"></script>
<script src="script/ui.progressbar.js" type="text/javascript"></script>
<style type="text/css">
.AcceptedBar > .ui-progressbar-value {
background:green;
}
.DeclinedBar > .ui-progressbar-value {
background: red;
}
</style>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/smoothness/jquery-ui.css">
<%-- <link href="App_Themes/HRIS-Theme/jquery.ui.core.css" rel="stylesheet" type="text/css" />
<link href="App_Themes/HRIS-Theme/jquery.ui.theme.css" rel="stylesheet" type="text/css" />--%>
</head>
<script type="text/javascript">
$(function ()
{
$('.Accepted').each(function()
{
var valueFromHiddenField = $('input[type=hidden]', this).val();
$('.Acceptedbar', this).progressbar({ value: valueFromHiddenField});
});
});
$(function ()
{
$('.Declined').each(function() {
// We assume that there is only 1 hidden field under 'pbcontainer'
var valueFromHiddenField = $('input[type=hidden]', this).val();
$('.Declinedbar', this).progressbar({ value: valueFromHiddenField });
});
});
</script>
推荐答案
您应该使用CSS设置进度栏样式,详细信息在这里主题:
You should use CSS to style your progress bars, details on theming here :
.AcceptedBar > .ui-progressbar-value {
background: green;
}
.DeclinedBar > .ui-progressbar-value {
background: red;
}
您不能使用background-color
作为主题设置background-image
,因此必须使用background
You cannot use background-color
as the themes set a background-image
so you must use background
这篇关于jQuery进度栏颜色更改的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文