Индикатор прогресса Jquery UI со значениями HTML

Question

Я занят некоторыми индикаторами прогресса и простыми, с которыми я могу работать, но как мне поместить значения индикатора в HTML?

Пример того, что я хочу:

<span>here the value</span>
<div class="progressbar" value="50"></div>

Вот JS, что у меня сейчас есть

$("div.progressbar").each(function() {
    var element = this;

    $(element).progressbar({
        value: parseInt($(element).attr("value"))
    });
});

И как я могу позволить им расти?(Как от 0 до 50)

Answer 1

Вы можете установить значение индикатора выполнения следующим образом:

$ (".progressbar") .progressbar ({ значение: 50 });

или вы можете получить значение min и max следующим образом:

 var value = parseInt($(".progressbar").attr('value'));
 var min = parseInt($(".progressbar").attr('min'));
 var max = parseInt($(".progressbar").attr('max'));

и затем установите значение для прогресбара.

Например:

if ( value >= min && value <= max)
{
  $( ".progressbar" ).progressbar({
      value: value
  });
}

Для анимации чисел см .: Плагин Jquery для анимации чисел

Answer 2

Это работает для меня:

HTML :

<div class="progressbar" value="20%"></div>

JavaScript :

$(".progressbar-count").each(function() {
    $(this).progressbar({
        value: parseInt($(this).attr("value"))
    }), $(".progressbar-count .ui-progressbar-value").animate({
        width: 0
    }, 0).stop().animate({
        width: $(".progressbar-count").attr("value")
    }, 3500)
});

Сейчася могу установить значение в HTML, и оно рассчитывает до этого числа!

Answer 3

Укажите диапазон и используйте событие изменения:

$("div.progressbar").each(function() {
    var element = this;

    $(element).progressbar({
        value: parseInt($(element).attr("value")),
        change: function (e, ui) {
            $("#id_of_your_span").text(ui.value);
        }
    });
});