web-dev-qa-db-ja.com

jQueryUIProgressBarに値を表示する

簡単なjQueryUIProgressBarを設定しました。

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

特に、プログレスバーにテキストを表示したいと思います（初心者の場合は、「値」を使用します）。

これを機能させることができないようです。

ボーナス質問：表示されたテキスト（色、配置など）をフォーマットするにはどうすればよいですか？

javascriptjquery-uiprogress-bar
27
Thorsten

別の要素（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は、値が0の場合に要素に_display: none_を設定します）。

デモ のソースを見ると、_<div class="ui-progressbar-value">_が追加されていることがわかります。次のように、独自のCSSでこのクラスをオーバーライドするだけです。

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

私がそれをした方法は：

<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がある要素にprogressbarプラグインを適用します

この助けを願っています

9
Tri

ここでの答えに基づいて、いくつかの解決策をいじった後、私はこれに行き着きました：

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

このソリューションでは、テキストに基づいた柔軟な幅、テキストの中央揃え、テキストのスタイル設定などが可能です。互換モードの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/

3
Clay
    <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
basitjee

私はこれを使用しました：

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