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

问题描述

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

 <按钮类=BTN BTN-大BTN-主要TYPE =按钮>负载和LT; /按钮>

我目前使用的是经典的引导进度条,并通过一个jQuery的setInterval它清爽

 < D​​IV CLASS =进步进步条纹>< D​​IV ID =data_loaded\\
类=酒吧的风格=宽度:100%;>< / DIV>< / DIV>

是否有可能把该按钮的进度条 - 所以推进进度填补实际按钮的背景,而不是使用一个单独的页面元素进度条


解决方案

我认为这是使用2个不同的元素,所以你可以当你用它做复位形式的最佳实践,但它可以用一个完成DIV,但你仍然需要除非你有制作进度条...进步的一些其他的方式,以一个进度条元素添加到按钮。

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

下面是一个小提琴,你开始得到:

CSS:

  .progress,
.progress:悬停{
    背景:透明;
    填充:0;
    高度:30PX;
    宽度:68px;
}#进度条 {
    背景:#000;
    显示:块;
    高度:30PX;
    宽度:0;
}

HTML

 < HTML和GT;
    <身体GT;
        < D​​IV ID =进步按钮级=BTN BTN-主要BTN-默认的onclick =startProgress();>按钮和LT; / DIV>
    < /身体GT;
< / HTML>

JS:

  VAR进度= 0;功能startProgress()
{    //改变按钮继续按钮,添加进度条
    $('#进步按钮')addClass(进步)HTML。('<跨度ID =进度条>< / SPAN>');    //更新进度条每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来把一个按钮变成一个进度条的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

08-31 02:03