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

        });     
}

谢谢

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