2

プログレスバー コントロールにキャプションを追加する微調整はありますか? 現在のパーセンテージを表示するキャプションを中央に配置したいと思います。

どうも

4

3 に答える 3

3

これはよりCSSの質問です。進行状況バーの真上にラベルが中央に配置されるようにしました。私が行った方法は次のとおりです。

プログレス バー コードを で囲みdiv、divコンテナの最後に空白を付けます。次に、ラベルをコンテナfloatの左側に追加します。進行状況バーの側面に触れないように、ラベルにスペースを追加します。

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

プログレス バーをインスタンス化すると、ラベルがプログレス バーの少し左に浮いているはずです。必要な場所にフロートさせるには、要素のパディングと幅/高さを調整する必要があります。(例えば、バーの中心のように)

ここで試してみてください。私の CSS コードからわかるように、中央に配置するには少し手を加える必要がありますが、見栄えは良いです。

于 2010-09-07T22:19:34.683 に答える
3

<div>次のように、下に中央揃えのキャプションを取得するために、いくつかのスタイリングを追加するだけです。

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

そしていくつかの CSS:

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

ここで試してみることができます。使用$("#progressbar .caption").html(value)して更新してください。

于 2010-09-07T22:20:13.327 に答える