博客

jquery -easy progressbar 使用方法

  • Post author:
  • Post category:其他


首先引入js 和 css 

    <link href="css/themes/default/easyui.css" rel="stylesheet" type="text/css" />
    <link href="css/themes/icon.css" rel="stylesheet" type="text/css" />
    <script src="jq/jquery.min.js" type="text/javascript"></script>
    <script src="jq/jquery.easyui.min.js" type="text/javascript"></script>

js 方式加载progressbar 

var t = 0, timer = null;
 $(function () {
       //开启一个定时器启动加载
           startBar();
           $('#bar').progressbar({
               width: 400,//显示宽度
               height: 20,//显示高度
               value: 0,//默认启示值为0
               text: '{value}%',//进度条中文本显示的内容
               //当进度数值发生改变引发的事件
               onChange: function (newValue, oldValue) {
                  //newValue 为 该表后新的value值 ,oldvalue 改变前老值
                   if (newValue == 100) {
                   //当进度条值达到100%后关闭定时器
                       window.clearInterval(time_id);
                       time_id = null;
                   }
               }
           });
       })
       
         function addProgressBar() {
           t += 10;
           //此方法为progressbar 设置值
           $('#bar').progressbar('setValue', t);
       }
       //开启一个定时器
        function startBar() {
         time_id=setInterval(addProgressBar, 1000);
       }
       <body>
         <div id="bar"></div>
    </body>

progressbar的相关方法

options 无 返回所有属性。

resize width 重置或重新设置组件大小

getValue 无 获取组件当前的进度值。如：

KaTeX parse error: Expected ‘EOF’, got ‘#’ at position 3: (‘#̲bar’).progressB…

(’#bar’).progressBar(‘setValue’,10);


版权声明：本文为sd6275832ght原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。