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

问题描述：

我想了解如何将按钮变成进度条。例如，在引导按钮，如：使用JQuery/JavaScript将按钮变成进度条

<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>

是否有可能把该按钮进入进度条 - 所以推进的进度会填充实际按钮的背景，而不是为进度条使用单独的页面元素？

答

我认为这是使用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); 
}

谢谢！我认为这肯定会让我朝着正确的方向发展！ – 2scottish 2013-02-22 21:02:15

答

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

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

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

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

谢谢您的输入。在所有的帮助下，我朝着正确的方向前进！ – 2scottish 2013-02-22 21:00:25

答

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

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

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

感谢您的贡献。我认为这绝对是一个可行的选择。我总是喜欢最简单的方法，但我认为在这种情况下我可以尝试SJDaws解决方案。 – 2scottish 2013-02-22 20:59:40

答

是的，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/

我不知道.replaceWith（）。谢谢！当每条评论对我有帮助时，很难仅选择一个答案。 – 2scottish 2013-02-22 21:01:00

你可以upvote他们然后;） – Stefan 2013-02-22 21:41:26

是的，这是非常真实的！我会做的。 :) – 2scottish 2013-02-22 21:50:15

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

相关推荐