【EasyUI篇】ProgressBar进度条组件-CFANZ编程社区

微信公众号：程序yuan

6.ProgressBar进度条组件

【EasyUI篇】ProgressBar进度条组件_进度条

【EasyUI篇】ProgressBar进度条组件_css_02

【EasyUI篇】ProgressBar进度条组件_css_03

JSP文件

<%--
  Created by IntelliJ IDEA.
  User: ooyhao
  Date: 2018/7/29 0029
  Time: 9:21
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>ProgressBar</title>
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/easyui/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/easyui/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/easyui/themes/color.css">
    <script type="text/javascript" src="${pageContext.request.contextPath}/easyui/jquery.min.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/easyui/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/easyui/locale/easyui-lang-zh_CN.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/ProgressBar.js"></script>
    <style rel="stylesheet" type="text/css">
    </style>
</head>
<body style="text-align: center; margin-top: 200px;">


    <%--Class加载方式实现进度条--%>
    <%--<div class="easyui-progressbar" style="width: 400px;" data-options="value:60,">

    </div>--%>

    <div id="box">

    </div>


    <button id="btn1">
        改变进度条的值
    </button>

    <button id="btn2">
        获得当前进度条的值
    </button>
    <button id="btn3">
        重新设置进度条的长度
     </button>

</body>
</html>

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);
    });


});