jQuery进度条内联文本

Question

我正在尝试使用基本进度条，但我无法找出如何在进度条内放置文本的CSS/命令。我正在使用这个进度条：http://docs.jquery.com/UI/Progressbar，但如果其他实现方式同样简单，我也愿意尝试。

我希望它能在左上角显示一些静态信息，然后在右侧的某个位置显示完成百分比。所有我的CSS尝试都只是让信息显示在下方或侧面。同时，我不确定如何根据JQuery方法实际更改此CSS（对JQuery新手来说）。

以下是我的实际JQuery代码。请不要尝试理解url值，只需假定它返回0-100。

<script type="text/javascript">

  var url = "%%$protocol_url%%/bin/task_status?id=%%$tid%%&cmd=percent_done";

  $(function() {
    var progress = 0;
    //alert("some value" + value, value);
    $("#progressbar").progressbar({ progress: 0 });
    setTimeout(updateProgress, 500);

});


function updateProgress() {
    var progress;
    $.get(url, function(data) {
        // data contains whatever that page returns     

        if (data < 100) {
            $("#progressbar")
              .progressbar("option", "value", data);
            setTimeout(updateProgress, 500);
        } else {
            $("#progressbar")
              .progressbar("option", "value", 100);
        }

        });     
}

谢谢

- Craig

Answer 1

我不熟悉这个插件，但是使用CSS，您可以将带字母的div放在进度条上方。我不确定它是否适用于嵌套的div，因为当为进度条渲染内容时，内部div可能会被擦除。

您可以尝试调整顶部和左侧位置，以精确定位文本。实际上，您可以动态更改左侧位置，以使文本随着进度条移动，但这可能有点棘手。

z-index不应该成为问题，但是如果要更改div的顺序，您可能需要确保文本具有比进度条更大的z-index。

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

- Peter Ajtai

---

当我尝试这样做时，它会将进度文本绘制在进度条下方而不是内部。 - Craig

我修改了上面的CSS，现在文本应该在顶部右侧。 - Peter Ajtai

Answer 2

我对一个已经开发好的进度条概念进行了改进，它仅基于jquery和CSS（但不使用jquery-ui）。 如果你愿意，可以查看以下链接以获取详细信息：

http://progressbar-simple.blogspot.com/

希望这有所帮助。

- Faisal Mq