当前位置:首页 > 开发 > Web前端 > 前端 > 正文

Progress Bar Plugin

发表于: 2013-12-26   作者:coconut_zhang   来源:转载   浏览:
摘要: from: http://digitalbush.com/projects/progress-bar-plugin Overview This is a progress bar plugin for jQuery. Usage First, include the progress bar javascript file. <script src="jquery.pro

from: http://digitalbush.com/projects/progress-bar-plugin

Overview

This is a progress bar plugin for jQuery.

Usage

First, include the progress bar javascript file.

<script src="jquery.progressbar.js"type="text/javascript"></script>

Next, include the styles necessary to render the progress bar correctly.

        
/* progress bar container */
#progressbar{
        border:1px solid black;
        width:200px;
        height:20px;
        position:relative;
        color:black; 
}
/* color bar */
#progressbar div.progress{
        position:absolute;
        width:0;
        height:100%;
        overflow:hidden;
        background-color:#369;
}
/* text on bar */
#progressbar div.progress .text{
        position:absolute;
        text-align:center;
        color:white;
}
/* text off bar */
#progressbar div.text{
        position:absolute;
        width:100%;
        height:100%;
        text-align:center;
}

Finally make the call to render the progress bar.

$("#progressbar").reportprogress(0);

In the demo below I'm running the progress bar from a timer like so.

var pct=0;
var handle=0;
function update(){
        $("#progressbar").reportprogress(++pct);
        if(pct==100){
                clearInterval(handle);
                $("#run").val("start");
                pct=0;
        }
}
jQuery(function($){
        $("#run").click(function(){
                if(this.value=="start"){
                        handle=setInterval("update()",100);
                        this.value="stop";
                }else{
                        clearInterval(handle);
                        this.value="start";
                }
        });
        $("#reset").click(function(){
                pct=0;
                $("#progressbar").reportprogress(0);
        });
});

Progress Bar Plugin

  • 0

    开心

    开心

  • 0

    板砖

    板砖

  • 0

    感动

    感动

  • 0

    有用

    有用

  • 0

    疑问

    疑问

  • 0

    难过

    难过

  • 0

    无聊

    无聊

  • 0

    震惊

    震惊

版权所有 IT知识库 CopyRight © 2009-2015 IT知识库 IT610.com , All Rights Reserved. 京ICP备09083238号