EasyUI中进度条的简单使用

忘是亡心i 2023-10-18 19:54 10阅读 0赞

## 场景 ##

### 效果 ###

![Image 1][]![20190617210322558.gif][]

### 属性 ###

<table> 
 <tbody> 
  <tr> 
   <th>名称</th> 
   <th>类型</th> 
   <th>描述</th> 
   <th>默认值</th> 
  </tr> 
  <tr> 
   <td>width</td> 
   <td>string</td> 
   <td>设置进度条（progressbar）的宽度。</td> 
   <td>auto</td> 
  </tr> 
  <tr> 
   <td>height</td> 
   <td>number</td> 
   <td>组件的高度。该属性自版本 1.3.2 起可用。</td> 
   <td>22</td> 
  </tr> 
  <tr> 
   <td>value</td> 
   <td>number</td> 
   <td>百分比值。</td> 
   <td>0</td> 
  </tr> 
  <tr> 
   <td>text</td> 
   <td>string</td> 
   <td>显示在组件上的文本模板。</td> 
   <td>{value}%</td> 
  </tr> 
 </tbody> 
</table>

### 事件 ###

<table> 
 <tbody> 
  <tr> 
   <th>名称</th> 
   <th>参数</th> 
   <th>描述</th> 
  </tr> 
  <tr> 
   <td>onChange</td> 
   <td>newValue,oldValue</td> 
   <td>当值改变时触发。<br> 代码实例： <pre>&nbsp;</pre> 
    <ol> 
     <li>$('#p').progressbar({ </li> 
     <li>onChange: function(value){ </li> 
     <li>alert(value)</li> 
     <li>}</li> 
     <li>});</li> 
    </ol></td> 
  </tr> 
 </tbody> 
</table>

### 方法 ###

<table> 
 <tbody> 
  <tr> 
   <th>名称</th> 
   <th>参数</th> 
   <th>描述</th> 
  </tr> 
  <tr> 
   <td>options</td> 
   <td>none</td> 
   <td>返回选项（options）对象。</td> 
  </tr> 
  <tr> 
   <td>resize</td> 
   <td>width</td> 
   <td>调整组件尺寸。<br> 代码实例： <pre>&nbsp;</pre> 
    <ol> 
     <li>$('#p').progressbar('resize'); // 调整进度条为初始宽度</li> 
     <li>$('#p').progressbar('resize', 350); // 调整进度条为一个新的宽度</li> 
    </ol></td> 
  </tr> 
  <tr> 
   <td>getValue</td> 
   <td>none</td> 
   <td>返回当前的进度值。</td> 
  </tr> 
  <tr> 
   <td>setValue</td> 
   <td>value</td> 
   <td>设置一个新的进度值。</td> 
  </tr> 
 </tbody> 
</table>

## 实现 ##

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>进度条</title>
        <link rel="stylesheet" type="text/css" href="/easyui/themes/icon.css">
        <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>
    </head>
    <body>
    <div id="p" class="easyui-progressbar" data-options="value:60" style="width:400px;"></div>
    <input type="button" value="开始" onclick="start()">
    <script type="text/javascript">
        function  start() {
            var value=$("#p").progressbar("getValue");
            $("#p").progressbar("setValue",value+10);
        }
    </script>
    </body>
    </html>

[Image 1]: 
[20190617210322558.gif]: https://img-blog.csdnimg.cn/20190617210322558.gif