使用jQuery / JavaScript来把一个按钮变成一个进度条

本文介绍了使用jQuery / JavaScript来把一个按钮变成一个进度条的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我试图找出如何把一个按钮变成一个进度条。例如，在自举按钮如：

 ＆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，但你仍然需要除非你有制作进度条...进步的一些其他的方式，以一个进度条元素添加到按钮。

在单击该按钮，删除着色格式，并添加一个空白的进度条。由于进度条的更新，它是由更广泛直到填满的按钮。

下面是一个小提琴，你开始得到：

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来把一个按钮变成一个进度条的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！