当前位置：文江博客话题详情

在 jQuery 中向进度条添加文本

发布于 2024-09-18 07:46:55 字数 48 浏览 6 评论 0原文

是否有一些调整可以向进度条控件添加标题？我很乐意放置一个显示当前百分比的居中标题。

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

魂归处 2024-09-25 07:46:55

您只需添加带有一些样式的

即可在下方获得居中标题，如下所示：

$("#progressbar").progressbar({
    value: 37
}).append("<div class='caption'>37%</div>");

以及一些 CSS：

#progressbar .caption { width: 50px; margin: 0 auto; }

您可以在这里尝试一下，只需使用 $("#progressbar .caption").html(value) 来更新它。

You can just add a <div> with some styling to get a centered caption underneath, like this:

$("#progressbar").progressbar({
    value: 37
}).append("<div class='caption'>37%</div>");

And some CSS:

#progressbar .caption { width: 50px; margin: 0 auto; }

You can give it a try here, just use $("#progressbar .caption").html(value) to update it.

回复收藏 0 原文

夜未央樱花落 2024-09-25 07:46:55

这更多的是一个 CSS 问题。我已经将标签直接置于进度条上方。我这样做的方法是：

将进度条代码包装在 div 中，并在容器末尾有一个清除 div 。然后，在容器中添加标签并将其浮动到左侧。在标签中添加一些空间，这样它就不会接触进度条的侧面：

<div id='pb_container'>
    <div style='float: left' id='label'>   My Label</div>
    <div id='pb'></div>
    <div style="clear: both;"></div>
</div>

实例化进度条，标签应该浮动在进度条中，向左一点。您必须调整元素的填充和宽度/高度，以使其浮动到您想要的位置。（例如，像栏的中心）

在这里尝试。正如您从我的 CSS 代码中看到的，需要稍微调整一下才能将其居中，但看起来不错。

This is more a CSS question. I've gotten the label to be centered directly over the progress bar. The way I've done it is to:

Wrap your progress bar code in a div with a clearing div at the end of the container. Then, prepend your label in the container and float it to the left. Add some space in the label so it's not touching the side of the progress bar:

<div id='pb_container'>
    <div style='float: left' id='label'>   My Label</div>
    <div id='pb'></div>
    <div style="clear: both;"></div>
</div>

Instantiate the progress bar and the label should be floating in the progress bar, to the left a little. You will have to play with padding and width/height of the elements to get it to float where you want it. (Like the center of the bar, for example)

Try it here. As you can see from my CSS code, it takes a little fiddling to center it just right, but it looks nice.

回复收藏 0 原文

靖瑶 2024-09-25 07:46:55

试试这个，很简单：

<div id="progressBar" class="progressBar">
    <span class="progressBarText">In Progress</span>
</div>

CSS：

.progressBar {
width:80%;
margin:auto;
position:relative;
height:50px;
line-height:50px;
text-align:center;
}
.progressBarText {
    color: white;
    position: absolute;
    width: 50%;
    left:25%;
}
<script>
$('#progressBar').progressbar(
            {
                value: 80

            });
</script>

Try this, it's quite simple:

<div id="progressBar" class="progressBar">
    <span class="progressBarText">In Progress</span>
</div>

CSS:

.progressBar {
width:80%;
margin:auto;
position:relative;
height:50px;
line-height:50px;
text-align:center;
}
.progressBarText {
    color: white;
    position: absolute;
    width: 50%;
    left:25%;
}
<script>
$('#progressBar').progressbar(
            {
                value: 80

            });
</script>

回复收藏 0 原文

~没有更多了~