JQuery 进度条内嵌文本答案

【问题标题】：JQuery Progress Bar Inline TextJQuery 进度条内嵌文本
【发布时间】：2010-06-10 20:38:19
【问题描述】：

我正在尝试使用基本进度条，但是我无法弄清楚 css/命令实际上将一些文本放入进度条中。我正在使用这个进度条：http://docs.jquery.com/UI/Progressbar 但是，如果它们同样易于实现，我对其他人持开放态度。我希望它在左角显示一些静态信息，然后在右侧某处显示完成百分比。我尝试做的所有 css 只是将信息显示在下方或侧面。同样，我不确定如何基于 JQuery 方法（JQuery 的新方法）实际进行这种 CSS 更改。

下面是我的实际 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);
        }

        });     
}

谢谢

【问题讨论】：

标签： javascript jquery progress-bar

【解决方案1】：

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

您可以随意调整顶部和左侧的位置，以将文本准确定位在您想要的位置。在 face 中，您可以动态地向左移动，以便文本随条形移动，尽管这可能有点棘手。

Z-index 应该不是问题，但是如果你想改变 div 的顺序，你可能需要确保文本的 z-index 比 bar 大。

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

【讨论】：

当我尝试这样做时，它会在栏的正下方而不是在栏内绘制进度文本。
我更改了上面的 CSS，现在文本应该在最上面。

【解决方案2】：

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

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

希望对您有所帮助。

【讨论】：