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" rel="external nofollow" /> <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css" rel="external nofollow" /> <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> 執行效果：
點擊下載源代碼：jQuery ProgressBar進度條組件
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
