Отображать значение в jQueryUI ProgressBar

Я установил простой jQuery UI ProgressBar:

<script type="text/javascript">
    $(function() {
        $("#progressbar").progressbar({
                value: 35
        });
    });
</script>
<div id="progressbar">  </div>

Кроме всего прочего, я хотел бы отобразить некоторый текст в строке выполнения (для начала я просто использовал бы "значение" ).

Я не могу заставить это работать.

Бонусный вопрос: как отформатировать отображаемый текст (например, цвет, выравнивание)?

Ответы

Ответ 1

Вместо того, чтобы вводить другой элемент (span) и новый стиль, используйте то, что уже существует:

var myPer = 35;
$("#progressbar")
    .progressbar({ value: myPer })
    .children('.ui-progressbar-value')
    .html(myPer.toPrecision(3) + '%')
    .css("display", "block");

css("display", "block") должен обрабатывать случай, когда значение равно 0 (jQuery UI устанавливает a display: none в элементе, когда значение равно 0).

Если вы посмотрите на источник демо, вы заметите, что добавлен <div class="ui-progressbar-value">, Вы можете просто переопределить этот класс в своем собственном CSS, например:

.ui-progressbar-value {
    font-size: 13px;
    font-weight: normal;
    line-height: 18px;
    padding-left: 10px;
}

Ответ 2

Как я это делал:

<div class="progressbar"><span style="position:absolute; margin-left:10px; margin-top:2px>45% or whatever text you want to put in here</span></div>

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

Надеемся на эту помощь

Ответ 3

После поиска некоторых решений, основанных на ответах здесь, я закончил с этим:

Html:

<div id="progress"><span class="caption">Loading...please wait</span></div>

JS:

$("#progress").children('span.caption').html(percentage + '%');

(для вызова внутри функции, которая обновляет значение progressbar)

CSS

#progress {
  height: 18px;
}

#progress .ui-progressbar {
  position: relative;
}

#progress .ui-progressbar-value {
  margin-top: -20px;
}

#progress span.caption {
  display: block;
  position: static;
  text-align: center;
}

Преимущества:

Подпись сосредоточена без привязки к привязке (необходимо, если ширина заголовка изменяется динамически)
Никакая странная манипуляция JS
Простой и минимальный CSS

Ответ 4

Это решение обеспечивает гибкую ширину, основанную на тексте, а также центрирование текста, стилизацию текста и т.д. Работает в Chrome, FF, IE8 и IE8 в режиме совместимости. Не тестировал IE6.

Html:

 <div class="progress"><span>70%</span></div>

Script:

$(".progress").each(function() {
    $(this).progressbar({
        value: 70
    }).children("span").appendTo(this);
});

CSS

.progress.ui-progressbar {position:relative;height:2em;}
.progress span {position:static;margin-top:-2em;text-align:center;display:block;line-height:2em;padding-left:10px;padding-right:10px;}
.progress[aria-valuenow="0"] span {margin-top:0px;}

Рабочий пример: http://jsfiddle.net/hasYK/

Ответ 5

Я использовал это:

<div id="progressbar" style="margin: 0px 0px 16px 0px; "><span style="position: absolute;text-align: center;width: 269px;margin: 7px 0 0 0; ">My %</span></div>

Ответ 6

    <style>
        #progress {
            height: 18px;
        }

        #progress .ui-progressbar {
            position: relative;
        }

        #progress .ui-progressbar-value {
            margin-top: -20px;
        }

        #progress span.caption {
            display: block;
            position: static;
            text-align: center;
        }

    </style>
</head>
<body>
    test
    <div id="progressbar"></div>
    <br>
    test2
    <div id="progressbar2"></div>

    <script>
        $("#progressbar").progressbar({
            max : 1024,
            value : 10
        });

        $("#progressbar2").progressbar({
            value : 50
        });

        $(document).ready(function() {
            $("#progressbar ").children('div.ui-progressbar-value').html('10');
            $("#progressbar2 ").children('div.ui-progressbar-value').html('50%');

        });

    </script>

</body>