Question

我正在尝试找出如何将按钮转换为进度条。例如，在引导按钮中，例如：

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

我目前正在使用经典的bootstrap进度条并通过JQuery setInterval刷新它：

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

是否可以将按钮变为进度条 - 因此前进的进度会填充实际按钮的背景，而不是为进度条使用单独的页面元素？

Answer 1

您可以隐藏按钮，并在按钮位置显示进度条。

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

function showProgress(){
    $("button").fadeOut();
    $("#data_loaded").fadeIn();
  }

Answer 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>');

Fiddler：http://fiddle.jshell.net/KQr7S/

Answer 3

是的，我认为这是可能的。当然，使用按钮时，如第二个示例所示，您不能使用内部容器填充父容器。

但是，您可以使用 - 例如 - 按钮的背景属性来执行此操作。因此，如果您自定义样式按钮并让背景位置根据进度值发生变化，您应该可以使其正常工作。

所以基本上，你想从按钮左边的按钮背景开始，然后在你走的时候逐渐向右移动它。

另一种解决方案是在按钮和您显示的进度条<div>之间切换。

Answer 4

我认为使用2个不同的元素是最佳做法，因此您可以在完成后重置表单，但是可以使用单个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);
}

使用JQuery / JavaScript将按钮转换为进度条

4 个答案: