jQuery Easy UI ProgressBar（進度條）元件
阿新 • • 發佈：2019-02-17
ProgressBar（進度條）元件，這個還是挺好玩的，我們在自己做點什麼的時候經常能用到，比如上傳下載檔案、匯入匯出文件啊、載入網頁等等。
應用場景很多，使用起來還很簡單。
示例：
執行效果：<!DOCTYPE html> <html> <head> <title>jQuery Easy UI</title> <meta charset="UTF-8" /> <script type="text/javascript" src="easyui/jquery.min.js"></script> <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script> <script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js" ></script> <link rel="stylesheet" type="text/css" href="easyui/themes/bootstrap/easyui.css" /> <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css" /> <script> $(function () { //$.fn.progressbar.defaults.value = 30; //想要修改進度條的顏色去css檔案中去修改 $('#box').progressbar({ width : 200, //設定進度條寬度 預設400 height : 15, //設定進度條高度 預設22 value : 0, //設定進度條值 預設0 text : '{value}%', //設定進度條百分比模板 預設 {value}% //在value改變的時候觸發 onChange : function (newValue, oldValue) { console.log('新:' + newValue + ',舊:' + oldValue); }, }); /* setTimeout(function () { $('#box').progressbar('setValue', 70); }, 1000); */ setInterval(function () { //getValue setValue 分別是返回當前進度值 和 設定一個進度值 $('#box').progressbar('setValue', $('#box').progressbar('getValue') + 5); }, 1000); console.log($('#box').progressbar('options')); //$('#box').progressbar('resize', 80); 沒啥大用 }); </script> </head> <body style="margin:100px;"> <!-- <div class="easyui-progressbar" data-options="value:60" style="width:400px"></div> --> <div id="box" ></div> </body> </html>
