jquery ui.progressbar label - изменить цвет текста на фоне проходящей буквы

Question

Я добавил ярлык в прогресс-панель jquery ui, используя эту демонстрацию.

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

Как я могу узнать, произошло ли это?

Answer 1

Это немного уродливо, но если вы продублируете этикетку, одну вне бара, а другую внутри, и используйте overflow: hidden Вы можете сделать это:

http://jsbin.com/ohiyo/21/

Проверено только в Chrome Dev и Firefox 4

Answer 2

Использовать change event из.progressbar вот так:

updateProgressColor = function() {
  if( $(this).progressbar('percentage').toFixed(0) == 100 ) {
    $(this).css('background', '#F000');
  }
}

$('#progressbar').progressbar({
  change: updateProgressColor
});

Answer 3

if (newVal >= 50)
    $('.pblabel').css('color', newColor);
else
    $('.pblabel').css('color', defaultColor);