EasyUI中进度条的简单使用
生活随笔
收集整理的這篇文章主要介紹了
EasyUI中进度条的简单使用
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
場景
效果
屬性
| width | string | 設置進度條（progressbar）的寬度。 | auto |
| height | number | 組件的高度。該屬性自版本 1.3.2 起可用。 | 22 |
| value | number | 百分比值。 | 0 |
| text | string | 顯示在組件上的文本模板。 | {value}% |
事件
| onChange | newValue,oldValue | 當值改變時觸發。 代碼實例： |
方法
| options | none | 返回選項（options）對象。 |
| resize | width | 調整組件尺寸。 代碼實例： |
| getValue | none | 返回當前的進度值。 |
| setValue | value | 設置一個新的進度值。 |
?
實現
<!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>?
總結
以上是生活随笔為你收集整理的EasyUI中进度条的简单使用的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： SpringBoot+Jquery实现前
- 下一篇： EasyUI中分页的简单使用