javascript - JQuery 进度条内联文本

Question

我正在尝试使用基本进度条，但是我无法弄清楚要在进度条中实际放置一些文本的 css/命令。我正在使用这个进度条:http://docs.jquery.com/UI/Progressbar但是，如果它们实现起来同样简单，我对其他人持开放态度。 我希望它在左 Angular 显示一些静态信息，然后在右侧部分某处显示完成百分比。我尝试做的所有 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);
        }

        });     
}

谢谢

Answer 1

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

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

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