Вариант использования: -
На самом деле, я хочу использовать несколько индикаторов прогресса на одной странице, и я хочу, чтобы каждый индикатор прогресса был разного цвета.
Я знаю, что мы можем изменить CSS-класс "ui-progressbar-value", но это приводит к изменению цвета для всех индикаторов выполнения на этой странице.
Так есть ли способ достижения прогресс-баров с несколькими цветами.
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI ProgressBar functionality</title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<style>
.ui-widget-header {
background: #cedc98;
border: 1px solid #DDDDDD;
color: #333333;
font-weight: bold;
}
.ui-progressbar-value{
background: yellow !important;
}
</style>
<script>
$(function() {
var progressbar = $( "#progressbar-2" );
$( "#progressbar-2" ).progressbar({
value: 30,
max:30,
classes: {
"ui-progressbar-value": "test"
}
}).addClass('test');
function progress() {
var val = progressbar.progressbar( "value" ) || 0;
progressbar.progressbar( "value", val + 1 );
if ( val < 99 ) {
setTimeout( progress, 100 );
}
}
var progressbar2 = $( "#progressbar-3" );
$( "#progressbar-3" ).progressbar({
value: 30,
max:30
}).addClass("trst");
function progress() {
var val = progressbar.progressbar( "value" ) || 0;
progressbar.progressbar( "value", val + 1 );
if ( val < 99 ) {
setTimeout( progress, 100 );
}
}
setTimeout( progress, 3000 );
});
$('#progressbar-2').css({background: '#9CFF29'});
</script>
</head>
<body>
<p>
Progress 1
</p>
<div id = "progressbar-2" class="test"></div>
<p>
Progress 2
</p>
<div id = "progressbar-3"></div>
</body>
</html>