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

Answer 2

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

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

希望有所帮助。

JQuery进度栏内联文本

2 个答案: