javascript – JQuery进度条内联文本

我正在尝试使用基本进度条但是我无法弄清楚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",100);
        }

        });     
}

谢谢

解决方法

我不熟悉这个插件,但是使用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",data);
$("#progresstext").html("<p>Hard code or string here<p>");