研究EasyUI系統—ProgressBar組件

2024-04-27 15:11:45

字體：大中小

來源：轉載

供稿：網友

　　PRogressbar組件即極為常見的進度條，我們在安裝程序以及其他比較耗時的場合能看見。　　首先看一下這個組件的效果，下面的代碼實現了每隔1秒進度條就增加10%的功能。

<html> <head> <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> <script> var t = 0, time_id = null; $("#progressbar").progressbar({ width:300, height:25, value:0, onChange:function(newValue, oldValue) { if (newValue == 100) { //如果進度到了100%，清除定時器，結束過程 window.clearInterval(time_id); time_id = null; } } }); function addProgressBar() { // 設置進度條顯示的數值 t += 10; $("#progressbar").progressbar("setValue", t); } function startBar() { // 建立定時器，每隔1秒調用addProgressBar方法 time_id = window.setInterval(addProgressBar, 1000); } </script> </head> <body onload="startBar()"> <div id="container"> <div id="progressbar" class="easyui-progressbar"></div> </div> </body></html>

progressbar效果圖　　實際頁面中，進度條每隔一秒便會增加10%。　　上例代碼中，我們先構造了id為progressbar的進度條，隨后在“body”標簽中添加onload事件，使頁面加載完成時就執行startBar方法。startBar方法設置了一個定時器，每隔1秒就調用addProgressBar方法，而addProgressBar則將進度條的數值增加10。進度條的onChange事件在進度條數值改變時觸發，作用是檢測是否數值達到100，如已達到，則停止定時器。　　　　來看下progressbar的屬性。

屬性名稱	屬性值類型	默認值	描述
width	字符串或數值	“auto”	組件寬度。
height	數值	22	組件高度。

　　width和height表示組件高度和寬度，寬度既可以用“auto”，也可以設定具體的一個數值。height屬性在只在1.3.2及以上版本才支持。　　value表示初始時一個顯示進度的數值。　　text表示進度條中顯示的文本，在圖x-1中（使用了默認設置）中，顯示的是“30%”。text中將進度值（即屬性value）放在花括號“{}”中，并且可以在花括號的前后添加文字，例如“此時已完成{value}%的安裝過程”，即顯示“此時已完成30%的安裝過程”字樣。

　　progressbar方法。

方法名稱	參數	描述
options	無	返回所有屬性。
resize	width	重置或重新設置組件大小。
getValue	無	獲取組件當前的進度值。
setValue	value	設置組件當前的進度值。