【连载】研究EasyUI系统—ProgressBar组件

最新推荐文章于 2023-08-01 14:51:53 发布

我想我是人

最新推荐文章于 2023-08-01 14:51:53 发布

阅读量1.7k

点赞数

分类专栏： easyui

本文链接：https://blog.youkuaiyun.com/redeg/article/details/54911942

版权

easyui 专栏收录该内容

26 篇文章

订阅专栏

　　progressbar组件即极为常见的进度条，我们在安装程序以及其他比较耗时的场合能看见。
　　首先看一下这个组件的效果，下面的代码实现了每隔1秒进度条就增加10%的功能。

<html>
  <head>
    <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css"/>
    <script type="text/javascript" src="easyui/jquery.min.js"></script>
    <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
    <script>
        var t = 0, time_id = null;
        $("#progressbar").progressbar({
            width:300,
            height:25,
            value:0,
            onChange:function(newValue, oldValue) { 
                if (newValue == 100) {
                    //如果进度到了100%，清除定时器，结束过程
                    window.clearInterval(time_id);
                    time_id = null;
                }
            }
        });

        function addProgressBar() {
            // 设置进度条显示的数值
            t += 10;
            $("#progressbar").progressbar("setValue", t);
        }

        function startBar() {
            // 建立定时器，每隔1秒调用addProgressBar方法
            time_id = window.setInterval(addProgressBar, 1000);
        }
    </script>
  </head>
  <body onload="startBar()">
      <div id="container">
          <div id="progressbar" class="easyui-progressbar"></div>
      </div>
  </body>
</html>

progressbar效果图
　　实际页面中，进度条每隔一秒便会增加10%。
　　上例代码中，我们先构造了id为progressbar的进度条，随后在“body”标签中添加onload事件，使页面加载完成时就执行startBar方法。startBar方法设置了一个定时器，每隔1秒就调用addProgressBar方法，而addProgressBar则将进度条的数值增加10。进度条的onChange事件在进度条数值改变时触发，作用是检测是否数值达到100，如已达到，则停止定时器。
　　
　　来看下progressbar的属性。

属性名称	属性值类型	默认值	描述
width	字符串或数值	“auto”	组件宽度。
height	数值	22	组件高度。

　　width和height表示组件高度和宽度，宽度既可以用“auto”，也可以设定具体的一个数值。height属性在只在1.3.2及以上版本才支持。
　　value表示初始时一个显示进度的数值。
　　text表示进度条中显示的文本，在图x-1中（使用了默认设置）中，显示的是“30%”。text中将进度值（即属性value）放在花括号“{}”中，并且可以在花括号的前后添加文字，例如“此时已完成{value}%的安装过程”，即显示“此时已完成30%的安装过程”字样。

　　progressbar方法。

方法名称	参数	描述
options	无	返回所有属性。
resize	width	重置或重新设置组件大小。
getValue	无	获取组件当前的进度值。
setValue	value	设置组件当前的进度值。