0

ボタンをプログレスバーに変える方法を見つけようとしています。たとえば、次のようなブートストラップボタンの場合：

<button class="btn btn-large btn-primary" type="button">Load</button>

現在、従来のブートストラッププログレスバーを使用しており、JQuerysetIntervalを介して更新しています。

<div class="progress progress-striped"><div id="data_loaded" \
class="bar" style="width: 100%;"></div></div>

ボタンをプログレスバーに変えることは可能ですか？プログレスバーに別のページ要素を使用するのではなく、進行状況が実際のボタンの背景を埋めるようにしますか？

4

4 に答える 4

2

はい、jQuery には.replaceWith()メソッドがあります。

説明: 一致した要素のセット内の各要素を指定された新しいコンテンツに置き換え、削除された要素のセットを返します。

HTML5 プログレスバーを使用する場合、次のようにコードを記述できます: HTML5

<button class="btn btn-large btn-primary" type="button">Load</button>

JS:

$('button').replaceWith('<progress max="100" value="60">\
        <strong>Progress: 60% done.</strong>\
    </progress>');

フィドラー: http://fiddle.jshell.net/KQr7S/

于 2013-02-22T08:06:30.130 に答える
2

ボタン onclick を非表示にして、ボタンの位置にプログレス バーを表示できます。

<button class="btn btn-large btn-primary" type="button" onClick="showProgress()">Load</button>

function showProgress(){
    $("button").fadeOut();
    $("#data_loaded").fadeIn();
  }
于 2013-02-22T08:04:05.057 に答える
1

2つの異なる要素を使用して、完了時にフォームをリセットできるようにすることをお勧めします。ただし、1つのdivで実行できますが、ボタンにプログレスバー要素を追加する必要があります。プログレスバーを作成する他の方法がない限り...プログレス。

ボタンがクリックされたら、カラーフォーマットを削除し、空白のプログレスバーを追加します。プログレスバーが更新されると、ボタンがいっぱいになるまで幅が広くなります。

これがあなたが始めるためのフィドルです：http：//jsfiddle.net/zRBxR/

css：

.progress,
.progress:hover {
    background: transparent;
    padding: 0;
    height: 30px;
    width: 68px;
}

#progress-bar {
    background: #000;
    display: block;
    height: 30px;
    width: 0;
}

html：

<html>
    <body>
        <div id="progress-button" class="btn btn-primary btn-default" onclick="startProgress();">Button</div>
    </body>
</html>

js：

var progress = 0;

function startProgress()
{

    // change button to progress button, and add progress bar
    $('#progress-button').addClass('progress').html('<span id="progress-bar"></span>');

    // update progress bar every 0.5 second
    setInterval(function(){
        $('#progress-bar').width(progress);
        progress++;
    }, 500);
}
于 2013-02-22T08:21:18.243 に答える
1

はい、可能だと思います。もちろん、ボタンを使用すると、2 番目の例で示したように、親コンテナーを満たす内部コンテナーを持つことはできません。

ただし、ボタンの background プロパティなどを使用してこれを行うことができます。したがって、ボタンのスタイルをカスタマイズし、進行状況の値に応じて背景の位置を変更できるようにすると、これを機能させることができるはずです。

つまり、基本的には、ボタンの左側でボタンの背景を非表示にすることから始めて、徐々に右側に移動します。

別の解決策は、表示したボタンと進行状況バーを切り替える<div>ことです。

于 2013-02-22T08:02:41.927 に答える