Индикатор выполнения jQuery встроенный текст
Я пытаюсь использовать основной индикатор выполнения однако, я не могу выяснить CSS/команду для фактического помещения некоторого текста в панели. Я использую этот индикатор выполнения: http://docs.jquery.com/UI/Progressbar однако, я открыт для других, если они так же просты реализовать. Я хочу, чтобы это отобразило в левом углу некоторую статическую информацию и затем процент полных где-нибудь в правильном разделе. Вся CSS я попытался сделать просто сделанный отображением информации ниже или стороне. Также я не уверен, как на самом деле иметь это изменение CSS на основе метода JQuery (в новинку для JQuery).
ниже мой фактический JQuery. Не пытайтесь понять, что значение URL просто предполагает, что возвращается 0-100.
1 ответ
Я не знаком с плагином, но с помощью CSS вы можете просто разместить div с буквами над индикатором выполнения. Я не уверен, будет ли это работать с вложенными div, поскольку внутренний div может быть удален при отображении содержимого для индикатора выполнения.
Вы можете поиграть с верхним и левым позициями, чтобы расположить текст именно там, где хотите. На лице вы можете динамически изменять левую часть, чтобы текст перемещался вместе с полосой, хотя это может быть немного сложнее.
Z-индекс не должен быть проблемой, но если вы хотите изменить порядок div, вам, возможно, придется убедиться, что текст имеет больший z-индекс, чем полоса.
CSS:
#bardivs {
width:400px; /* or whatever the of the porgress bar is */
/*
The position of #bardivs must be something other than
static (the default) so that its children will be positioned
relative to it.
*/
position:relative;
}
#progresstext {
position:absolute;
top:0;
left:0;
}
HTML:
<div id="bardivs">
<div id="progressbar"></div>
<div id="progresstext"></div>
</div>
JS:
$("#progressbar").progressbar("option", "value", data);
$("#progresstext").html("<p>Hard code or string here<p>");