在jQueryUI的进度显示值(Display value in jQueryUI Progress

我已经建立了一个简单的jQuery UI进度：

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

别的不说，我想以显示进度条某些文本（对于初学者来说，我只是用“值”）。

我似乎无法得到这个工作。

奖金问题：我如何格式化显示文本（例如颜色，对齐）？

Answer 1:

而是引入其他元素（的span ）和一个新的风格，利用的是已经有这样的：

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

的css("display", "block")是处理其中的值是0的情况下（jQuery的UI设置一个display: none在元件上时的值是0）。

如果你看一下源演示，你会发现，一个<div class="ui-progressbar-value">添加。你可以简单地覆盖这个类在你自己的CSS，如：

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

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

从而使文本在进度条的中心可以调整边距和保证金左。然后在应用进度插件具有类进度页面的JavaScript部分元素

希望这有助于

Answer 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;
}

好处：

字幕居中，没有harcoded定位（如果必要字幕dinamically宽度的变化）
没有JS奇怪操纵
简单的和最小的CSS

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

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

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

文章来源: Display value in jQueryUI ProgressBar