jquery -easy progressbar 使用方法
阿新 • • 發佈：2018-11-02
首先引入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);