我正在尝试使用基本进度条但是我无法弄清楚css /命令实际上在栏中放置了一些文本.我正在使用这个进度条：
http://docs.jquery.com/UI/Progressbar但是如果它们实现起来那么简单,我会对其他人开放.
我希望它在左侧显示一些静态信息,然后在右侧部分的某处显示完成百分比.我试图做的所有css只是将信息显示在下方或侧面.我也不确定如何基于JQuery方法(JQuery新手)实际进行CSS更改.
我希望它在左侧显示一些静态信息,然后在右侧部分的某处显示完成百分比.我试图做的所有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>");
