【EasyUI篇】ProgressBar进度条组件

微信公众号：程序yuan
关注可了解更多的教程。问题或建议，请公众号留言;

查看--> 全套EasyUI示例目录

6.ProgressBar进度条组件

JSP文件

<%--
  Created by IntelliJ IDEA.
  User: ooyhao
  Date: 2018/7/29 0029
  Time: 9:21
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>


    
    
    
    
    
    
    
    
    
    




    <%--Class加载方式实现进度条--%>
    <%--

    

--%>          

             改变进度条的值                   获得当前进度条的值                   重新设置进度条的长度      

JS文件

$(function () {


    //全局设置
    $.fn.progressbar.defaults.value = 10;

    $("#box").progressbar({
        //设置进度条的长度,默认auto
        width:400,
        //设置进度条的高度，默认22
        height:22,
        //设置进度条的值，默认0
        // value:60,
        //设置进度条百分比模板
        text:'{value}%',
//----------- 事件列表 -------------------
        onChange:function (newValue,oldValue) {
            console.log('newValue:'+newValue+", oldValue:"+oldValue);
        }

    });




//-------------- 方法列表 -----------------


    //延时执行
    /*setTimeout(function () {
        $('#box').progressbar('setValue',$('#box').progressbar('getValue')+5);
    },1000);
    */

    //循环执行
    setInterval(function () {
        $('#box').progressbar('setValue',$('#box').progressbar('getValue')+1);
    },200);


    //  返回属性对象
    console.log($("#box").progressbar('options'));


    //设置进度条的值
    var j = 0;
    $("#btn1").click(function () {
        $("#box").progressbar('setValue',j++);
    });

    //获得当前进度条的值
    $("#btn2").click(function () {
        alert("当前值为："+$("#box").progressbar('getValue'));
    });

    //重新设置进度条的长度
    $("#btn3").click(function () {
        $("#box").progressbar('resize', 1000);
    });


});

效果图

 

 

------------------------------------------------

关注小编微信公众号获取更多资源