jQuery UI: Как изменить цвет ProgressBar?

Я создал простой jQueryUI progressbar:

 $(function() { $("#progressbar").progressbar({ value: 35 }); });  

Теперь я хочу покрасить планку на основе ее значения (например, <10 красных, 50 зеленых). Как мне это сделать?

Примечание. Есть похожие вопросы , но ответы были недостаточно ясны, чтобы помочь мне сделать все. Надеюсь, кто-то может указать более простой способ или предоставить более подробные инструкции. Благодарю.

Я возился с ним, и вот что я нашел. Используя jQuery UI v1.8rc3, я могу переопределить цвета тем для индикатора выполнения.

alt text http://sofru.miximages.com/jquery/mt5v6p.png

Вот как это сделать: когда вы добавляете виджет progressbar в div, с чем-то вроде:

 $("#mydiv").progressbar({value:0}); 

… jQuery UI progressbar создает div внутри вашего div; этот внутренний div представляет строку значений. Чтобы установить цвет панели, установите фон дочернего (внутреннего) div.

Вы также можете установить цвет пустого пространства в строке выполнения, пробел справа от строки значений. Сделайте это, установив фон внешнего div.

Для любого из них вы можете использовать плоские цвета или изображения. Если вы используете изображения, то обязательно установите repeat-x. Код для этого выглядит следующим образом:

HTML:

 

ЯШ:

 function init(){ // four progress bars $("#pbar0").progressbar({ "value": 63 }); $("#pbar1").progressbar({ "value": 47 }); $("#pbar2").progressbar({ "value": 33 }); $("#pbar3").progressbar({ "value": 21 }); // the zero'th progressbar gets the default theme // set colors for progressbar #1 $("#pbar1").css({ 'background': 'url(images/white-40x100.png) #ffffff repeat-x 50% 50%;' }); $("#pbar1 > div").css({ 'background': 'url(images/lime-1x100.png) #cccccc repeat-x 50% 50%;' }); // set colors for progressbar #2 $("#pbar2").css({ 'background': 'url(images/lt-blue-40x100.png) #ffffff repeat-x 50% 50%' }); $("#pbar2 > div").css({ 'background': 'url(images/dustyblue-1x100.png) #cccccc repeat-x 50% 50%' }); // set colors for progressbar #3 $("#pbar3").css({ 'background': 'LightYellow' }); $("#pbar3 > div").css({ 'background': 'Orange' }); } 

ok, который заботится о настройке цветов. Теперь, если вы хотите динамически установить цвет панели с изменением значения, вы подключаете событие progressbarchange, например:

  $("#pbar0").bind('progressbarchange', function(event, ui) { var selector = "#" + this.id + " > div"; var value = this.getAttribute( "aria-valuenow" ); if (value < 10){ $(selector).css({ 'background': 'Red' }); } else if (value < 30){ $(selector).css({ 'background': 'Orange' }); } else if (value < 50){ $(selector).css({ 'background': 'Yellow' }); } else{ $(selector).css({ 'background': 'LightGreen' }); } }); 

Рабочая демонстрация: http://jsbin.com/atiwe3/3


Заметка:

Если вы хотите переопределить цвета для всех прогрессивных баров, используемые classы css - это ui-widget-content , для «background» или внешнего div и ui-widget-header для фактического бара (соответствующего внутреннему div). Как это:

  .ui-progressbar.ui-widget-content { background: url(images/white-40x100.png) #ffffff repeat-x 50% 50%; } .ui-progressbar.ui-widget-header { color: Blue; background: url(images/lime-1x100.png) #cccccc repeat-x 50% 50%; } 

Если вы исключите префикс .ui-progressbar , он переопределит цвета всех виджетах пользовательского интерфейса, в том числе progressbars.

Используйте следующий код:

 $( "#nahilaga" ).progressbar({ value: 20, create: function(event, ui) {$(this).find('.ui-widget-header').css({'background-color':'red'})} }); 

В jQuery Progressbar используются CSS и изображения.

В ответе Stackoverflow сказано то же самое:

есть css-запись с именем .ui-widget-overlay, которая ссылается на изображение ui-bg_diagonals-thick_20_666666_40x40.png, которое, я думаю, является образом, которое фактически управляет индикатором выполнения. Вам придется взломать css, чтобы вы могли добавить новый class, который ссылается на ваше новое изображение в другой строке выполнения; Я еще не понял, как это сделать.

Чтобы изменить цвет, вам нужно будет изменить png-изображение.

Или, как написано выше, вы можете скопировать изображение, добавив второй class и добавить их с помощью jquery:

 $(progressBar).addClass('secondImage'); 

Одна простая вещь была бы, когда вы инициализируете индикатор выполнения со значениями в вашем js, который вы делаете:

 $ (progressBarId) .children (). css ('backgroud',);

Так как вы хотите разные цвета для разных progressbars, вы можете сделать:

 if($(progressBarId).value() <10 ) //set a color if (..) //set another color 

Надеюсь, это ответит на ваш вопрос. Я попытался сделать то, что сказал парень в первом ответе, но не смог заставить его работать, поэтому попробовал это, и он начал работать.

Поскольку рабочий пример по принятым ответам, похоже, не работает, я оставляю это в своем ответе на случай, если кто-либо найдет его полезным.

https://jsfiddle.net/benjamintorr/a1h9dtkf/

 $(function() { $( ".progressbar" ).each(function(i, obj) { $( this ).progressbar({ value: false }); $( this ).bind('progressbarchange', function(event, ui) { updateColors( this ); }); }); $( "button" ).on("click", function(event) { $( ".progressbar" ).each(function(i, obj) { $( this ).progressbar("option", { value: Math.floor(Math.random() * 100) }); }); }); }); function updateColors( progressBar ) { var value = $( progressBar ).progressbar("value"); if ( value > 50 ) { progressColor = "green"; } else if (value > 10) { progressColor = "#FF9900"; } else { progressColor = "red"; } $( progressBar ).find(".ui-progressbar-value").css("background", progressColor); } 
  • Как создать индикатор выполнения NSURLConnection при загрузке файла?
  • Копирование файла с индикатором выполнения
  • Запуск метода в BackGroundWorker и отображение ProgressBar
  • Как мы можем показать индикатор выполнения для загрузки с помощью FtpWebRequest
  • Как показать прогресс во время цикла занятости?
  • Проблемы с SwingWorker и JProgressBar
  • Interesting Posts

    Рекомендации по попытке получить данные с жесткого диска, помещая их в морозильник

    Android NDK C ++ JNI (нет реализации для родных …)

    Где находится JAVA_HOME на macOS Sierra (10.12), Эль Капитан (10.11), Йосемити (10.10), Маверикс (10.9), Горный лев (10.8) или Лекс OSX (10.7)?

    Настроить рейд 1 после установки ОС

    CORS с Дартом, как мне заставить его работать?

    Android-разрешение не работает, даже если я его объявил

    ECC-плагин в материнской плате без ECC

    Сброс «Предупреждение HDD» с внешним корпусом Zalman ZM-VE400

    Что такое ярлык клавиатуры для перехода на последнее сообщение в Mac OS X Mail.app?

    Можно ли конвертировать из MBR в GPT, поддерживая установку и программы?

    Cygwin cygdrive и Windows Command Prompt

    Harddrive – уничтожить «скрытые области», такие как HPA и DCO, также после заражения вредоносными программами

    Отсутствует разрешение Windows 7

    Как работают указатели функций в C?

    Строка Node.js Mongoose.js для функции ObjectId

    Давайте будем гением компьютера.