jQuery: добавить текст в индикатор выполнения

Question

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

ТНХ

Answer 1

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

$("#progressbar").progressbar({
    value: 37
}).append("<div class='caption'>37%</div>");​​​​​​​​​​

И немного CSS:

​#progressbar .caption​ { width: 50px; margin: 0 auto; }​

Вы можете попробовать здесь , просто используйте $("#progressbar .caption").html(value), чтобы обновить его.

Answer 2

Это больше вопрос CSS.Я получил ярлык для центрирования прямо над индикатором выполнения.Я сделал это следующим образом:

Оберните свой штрих-код прогресса в div с очищающим div в конце контейнера.Затем добавьте этикетку в контейнер и float влево.Добавьте немного места в метке, чтобы она не касалась боковой панели индикатора выполнения:

<div id='pb_container'>
    <div style='float: left' id='label'>&nbsp;&nbsp;&nbsp;My Label</div>
    <div id='pb'></div>
    <div style="clear: both;"></div>
</div>

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

Попробуйте здесь .Как вы можете видеть из моего кода CSS, для центрирования нужно немного потрудиться, но это выглядит красиво.

Answer 3

Попробуйте, это довольно просто:

<div id="progressBar" class="progressBar">
    <span class="progressBarText">In Progress</span>
</div>

CSS:

.progressBar {
width:80%;
margin:auto;
position:relative;
height:50px;
line-height:50px;
text-align:center;
}
.progressBarText {
    color: white;
    position: absolute;
    width: 50%;
    left:25%;
}
<script>
$('#progressBar').progressbar(
            {
                value: 80

            });
</script>