在 jQueryUI ProgressBar 中显示值答案

【问题标题】：Display value in jQueryUI ProgressBar在 jQueryUI ProgressBar 中显示值
【发布时间】：2010-12-01 09:12:52
【问题描述】：

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

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

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

我似乎无法让它工作。

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

【问题讨论】：

标签： javascript jquery-ui progress-bar

【解决方案1】：

不要引入另一个元素 (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）。

如果您查看The demo 的来源，您会注意到添加了<div class="ui-progressbar-value">。您可以在自己的 CSS 中简单地覆盖该类，例如：

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

【讨论】：

现在看起来演示链接中的代码与此处的代码不同。演示中的代码运行良好。
如何在非进度区域显示具有一定价值的内容，（总进度）区域。

【解决方案2】：

我的做法是：

<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 部分中为具有类进度条的元素应用进度条插件

希望有帮助

【讨论】：

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

此解决方案允许基于文本的灵活宽度以及居中文本、设置文本样式等。在兼容模式下可在 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/

【讨论】：

【解决方案5】：

我用过这个：

<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>

【讨论】：

【解决方案6】：

    <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>

【讨论】：