使用jQuery / JavaScript来把一个按钮变成一个进度条 [英] Using JQuery / JavaScript to turn a button into a progress bar
问题描述
我试图找出如何把一个按钮变成一个进度条。例如，在自举按钮如：
＆LT;按钮类=BTN BTN-大BTN-主要TYPE =按钮＆GT;负载和LT; /按钮＆GT;
我目前使用的是经典的引导进度条，并通过一个jQuery的setInterval它清爽
＆LT; DIV CLASS =进步进步条纹＆GT;＆LT; DIV ID =data_loaded\\
类=酒吧的风格=宽度：100％;＆GT;＆LT; / DIV＆GT;＆LT; / DIV＆GT;
是否有可能把该按钮的进度条 - 所以推进进度填补实际按钮的背景，而不是使用一个单独的页面元素进度条
我认为这是使用2个不同的元素，所以你可以当你用它做复位形式的最佳实践，但它可以用一个完成DIV，但你仍然需要除非你有制作进度条...进步的一些其他的方式，以一个进度条元素添加到按钮。
在单击该按钮，删除着色格式，并添加一个空白的进度条。由于进度条的更新，它是由更广泛直到填满的按钮。
下面是一个小提琴，你开始得到： http://jsfiddle.net/zRBxR/
CSS：
.progress，
.progress：悬停{
背景：透明;
填充：0;
高度：30PX;
宽度：68px;
}＃进度条 {
背景：＃000;
显示：块;
高度：30PX;
宽度：0;
}
HTML
＆LT; HTML和GT;
＆LT;身体GT;
＆LT; DIV ID =进步按钮级=BTN BTN-主要BTN-默认的onclick =startProgress（）;＆GT;按钮和LT; / DIV＆GT;
＆LT; /身体GT;
＆LT; / HTML＆GT;
JS：
VAR进度= 0;功能startProgress（）
{ //改变按钮继续按钮，添加进度条
$（'＃进步按钮'）addClass（进步）HTML。（'＆LT;跨度ID =进度条＆GT;＆LT; / SPAN＆GT;'）; //更新进度条每0.5秒
的setInterval（函数（）{
$（'＃进度条'）宽度（进度）;
进度++;
}，500）;
}
I am trying to find out how to turn a button into a progress bar. For example, in a bootstrap button such as:
<button class="btn btn-large btn-primary" type="button">Load</button>
I am currently using a classic bootstrap progress bar and refreshing it via a JQuery setInterval:
<div class="progress progress-striped"><div id="data_loaded" \
class="bar" style="width: 100%;"></div></div>
Is it possible to turn the button into a progress bar - so the advancing progress fills the background of the actual button, rather than using a separate page element for the progress bar?
I think it's a best practice to use 2 different elements so you can reset the form when you're done with it, however it can be done with a single div, but you'll still need to add a progress bar element to the button unless you have some other way of making the progress bar... progress.
When the button is clicked, remove colouring format, and add a blank progress bar. As the progress bar updates, it is made wider until it fills the button.
Here is a fiddle the get you started: 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来把一个按钮变成一个进度条的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
