Как стилизовать индикатор выполнения jQuery, когда он достигает определенного значения, а также как удалить определенный сероватый фон?

Question

Как стилизовать индикатор выполнения jQuery, когда он достигает определенного значения, а также как удалить определенный сероватый фон?

0

Я попробовал фрагмент, и он работает благодаря всем вам, ребята. Но более того, когда я пытаюсь загрузить страницу, наступает серый фон. Почему это так и как его удалить? И я хочу, чтобы его цвет изменился, когда он достиг значения, скажем, 50.

мой фрагмент -

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>jQuery UI Progress Bar</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<!-- jQuery -->
<script src="/jquery.min.js" type="text/javascript"></script>

<!-- jQuery UI -->
<link rel="stylesheet" href="/jquery-ui.css"   />
<script src="/jquery-ui.min.js" type="text/javascript"></script>

<script type="text/javascript">

$(function () {
  //call progress bar constructor    
  $(".text_input_case").keyup(function () {
      var len = $(this).val().length;

      var total = null;
      total = len * 10;

      $("#container").progressbar({ value: len});
  });

});
</script>

<style type="text/css">
.ui-progressbar .ui-progressbar-value {
    width:auto;
    background-image: url(http://bit.ly/13wIQuG);
 }
</style>


</head>

<body>
<input type="button" class="button_progress" value="Update Progress Bar"/><br />
<div id="container"></div>
<input type="text" class="text_input_case" />
</body>
</html>

recmach 01 май 2014, в 09:32

Источник

Теги:

jquery

jquery-ui

1 ответ

Ещё вопросы

Ryan.Hunt · Accepted Answer · 2014-05-01T06-37-00.000Z

Вы можете обновить его css, связанное с total значением, как это

$('.ui-progressbar .ui-progressbar-value').css({
   "background" : (total <= 50) ? "#369" : "#963"
});

FIDDLE