jquery - 使用 JQuery/JavaScript 将按钮变成进度条

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

是的，jQuery 有一个 .replaceWith() 方法。

Description: Replace each element in the set of matched elements with the provided new content and return the set of elements that was removed.

假设你想使用 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/