jquery - 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);