在 jQueryUI ProgressBar 中显示值

发布于 2024-08-06 05:53:20 字数 370 浏览 2 评论 0原文

我已经设置了一个简单的 jQuery UI ProgressBar：

<script type="text/javascript">
    $(function() {
        $("#progressbar").progressbar({
                value: 35
        });
    });
</script>
<div id="progressbar">  </div>

除此之外，我想在进度栏中显示一些文本（对于初学者，我只使用“值”）。

我似乎无法让它发挥作用。

额外问题：如何设置显示文本的格式（例如颜色、对齐方式）？

原文

I've set up a simple jQuery UI ProgressBar:

<script type="text/javascript">
    $(function() {
        $("#progressbar").progressbar({
                value: 35
        });
    });
</script>
<div id="progressbar">  </div>

Among other things, I'd like to display some text in the progress-bar (for starters, I'd just use the "value").

I can't seem to get this to work.

Bonus Question: How do I format the displayed text (e.g. color, alignment)?

分享到QQ

分享到微博

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

发布评论

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

陪我终i 2024-08-13 05:53:20

不要引入另一个元素 (span) 和新样式，而是利用已有的元素，如下所示：

var myPer = 35;
$("#progressbar")
    .progressbar({ value: myPer })
    .children('.ui-progressbar-value')
    .html(myPer.toPrecision(3) + '%')
    .css("display", "block");

css("display", "block") 用来处理值为 0 的情况（当值为 0 时，jQuery UI 在元素上设置 display: none）。

如果您查看演示的源代码，您会注意到添加了

。您可以简单地在自己的 CSS 中重写此类，例如：

.ui-progressbar-value {
    font-size: 13px;
    font-weight: normal;
    line-height: 18px;
    padding-left: 10px;
}

Instead of introducing another element (span) and a new style, leverage what is already there like this:

var myPer = 35;
$("#progressbar")
    .progressbar({ value: myPer })
    .children('.ui-progressbar-value')
    .html(myPer.toPrecision(3) + '%')
    .css("display", "block");

The css("display", "block") is to handle the case where the value is 0 (jQuery UI sets a display: none on the element when the value is 0).

If you look at the source of The demo, you'll notice that a <div class="ui-progressbar-value"> is added. You can simply override this class in your own CSS, like:

.ui-progressbar-value {
    font-size: 13px;
    font-weight: normal;
    line-height: 18px;
    padding-left: 10px;
}

回复收藏 0 原文

木落 2024-08-13 05:53:20

我的方法是：

<div class="progressbar"><span style="position:absolute; margin-left:10px; margin-top:2px>45% or whatever text you want to put in here</span></div>

您可以调整 margin-top 和 margin-left ，使文本位于进度条的中心。
然后，您为页面的 javascript 部分中具有类 Progressbar 的元素应用进度条插件

希望这有帮助

The way I did it was:

<div class="progressbar"><span style="position:absolute; margin-left:10px; margin-top:2px>45% or whatever text you want to put in here</span></div>

You can adjust the margin-top and margin-left so that the text is in the center of the progress bar.
Then you apply the progressbar plugin for the elements which have class progressbar in the javascript section of the page

Hope this help

回复收藏 0 原文

久光 2024-08-13 05:53:20

在摆弄了一些解决方案之后，根据这里的答案，我最终得到了这个：

Html：

<div id="progress"><span class="caption">Loading...please wait</span></div>

JS：（

$("#progress").children('span.caption').html(percentage + '%');

在更新进度条值的函数内部调用）

CSS：

#progress {
  height: 18px;
}

#progress .ui-progressbar {
  position: relative;
}

#progress .ui-progressbar-value {
  margin-top: -20px;
}

#progress span.caption {
  display: block;
  position: static;
  text-align: center;
}

优点：

标题居中，没有编码定位（如果标题宽度动态变化，这是必要的）
没有 JS 奇怪的操作
简单和最小的 CSS

After fiddling around with some solutions, based on the answers here, I've ended up with this one:

Html:

<div id="progress"><span class="caption">Loading...please wait</span></div>

JS:

$("#progress").children('span.caption').html(percentage + '%');

(To be called inside the function that updates the progressbar value)

CSS:

#progress {
  height: 18px;
}

#progress .ui-progressbar {
  position: relative;
}

#progress .ui-progressbar-value {
  margin-top: -20px;
}

#progress span.caption {
  display: block;
  position: static;
  text-align: center;
}

Advantages:

Caption is centered with no harcoded positioning (necessary if caption width changes dinamically)
No JS strange manipulation
Simple and minimal CSS

回复收藏 0 原文

林空鹿饮溪 2024-08-13 05:53:20

该解决方案允许基于文本的灵活宽度以及文本居中、文本样式等。适用于 Chrome、FF、IE8 和 IE8 的兼容模式。没有测试IE6。

Html：

 <div class="progress"><span>70%</span></div>

脚本：

$(".progress").each(function() {
    $(this).progressbar({
        value: 70
    }).children("span").appendTo(this);
});

CSS：

.progress.ui-progressbar {position:relative;height:2em;}
.progress span {position:static;margin-top:-2em;text-align:center;display:block;line-height:2em;padding-left:10px;padding-right:10px;}
.progress[aria-valuenow="0"] span {margin-top:0px;}

工作示例： http://jsfiddle.net/hasYK/

This solution allows for a flexible width based on the text as well as centering the text, styling the text, etc. Works in Chrome, FF, IE8, and IE8 in compatibility mode. Didn't test IE6.

Html:

 <div class="progress"><span>70%</span></div>

Script:

$(".progress").each(function() {
    $(this).progressbar({
        value: 70
    }).children("span").appendTo(this);
});

CSS:

.progress.ui-progressbar {position:relative;height:2em;}
.progress span {position:static;margin-top:-2em;text-align:center;display:block;line-height:2em;padding-left:10px;padding-right:10px;}
.progress[aria-valuenow="0"] span {margin-top:0px;}

Working sample: http://jsfiddle.net/hasYK/

回复收藏 0 原文

伴梦长久 2024-08-13 05:53:20

我用过这个：

<div id="progressbar" style="margin: 0px 0px 16px 0px; "><span style="position: absolute;text-align: center;width: 269px;margin: 7px 0 0 0; ">My %</span></div>

I used this:

<div id="progressbar" style="margin: 0px 0px 16px 0px; "><span style="position: absolute;text-align: center;width: 269px;margin: 7px 0 0 0; ">My %</span></div>

回复收藏 0 原文

猥琐帝 2024-08-13 05:53:20

    <style>
        #progress {
            height: 18px;
        }

        #progress .ui-progressbar {
            position: relative;
        }

        #progress .ui-progressbar-value {
            margin-top: -20px;
        }

        #progress span.caption {
            display: block;
            position: static;
            text-align: center;
        }

    </style>
</head>
<body>
    test
    <div id="progressbar"></div>
    <br>
    test2
    <div id="progressbar2"></div>

    <script>
        $("#progressbar").progressbar({
            max : 1024,
            value : 10
        });

        $("#progressbar2").progressbar({
            value : 50
        });

        $(document).ready(function() {
            $("#progressbar ").children('div.ui-progressbar-value').html('10');
            $("#progressbar2 ").children('div.ui-progressbar-value').html('50%');

        });

    </script>

</body>

    <style>
        #progress {
            height: 18px;
        }

        #progress .ui-progressbar {
            position: relative;
        }

        #progress .ui-progressbar-value {
            margin-top: -20px;
        }

        #progress span.caption {
            display: block;
            position: static;
            text-align: center;
        }

    </style>
</head>
<body>
    test
    <div id="progressbar"></div>
    <br>
    test2
    <div id="progressbar2"></div>

    <script>
        $("#progressbar").progressbar({
            max : 1024,
            value : 10
        });

        $("#progressbar2").progressbar({
            value : 50
        });

        $(document).ready(function() {
            $("#progressbar ").children('div.ui-progressbar-value').html('10');
            $("#progressbar2 ").children('div.ui-progressbar-value').html('50%');

        });

    </script>

</body>

回复收藏 0 原文

~没有更多了~