0

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

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

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

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

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

4

4 回答 4

2

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

<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 回答
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 回答
1

是的，我认为这是可能的。当然，使用按钮时，您不能像第二个示例中显示的那样让内部容器填充父容器。

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

所以基本上，您希望从按钮左侧的按钮背景开始，然后逐渐将其向右移动。

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

于 2013-02-22T08:02:41.927 回答
1

我认为最好的做法是使用 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);
}
于 2013-02-22T08:21:18.243 回答