【連載】研究EasyUI系統—ProgressBar元件

阿新 • • 發佈：2019-02-03

　　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	設定元件當前的進度值。

　　resize可以不加引數，如果無引數，呼叫該方法後，元件將恢復成初始建立時的大小；如果設了引數，那麼引數僅代表寬度。
　　其他方法很簡單，不多做說明。
　　
　　progressbar事件。

事件名稱	引數	描述
onChange	newValue,oldValue	進度值改變時觸發。

　　這個事件也很簡單，引數newValue和oldValue分別是進度值改變後的數值和改變前的數值，這個事件我們在例子程式碼中也有展示。

【連載】研究EasyUI系統—ProgressBar元件

【連載】研究EasyUI系統—ProgressBar元件

【連載】研究EasyUI系統— Window元件

【連載】研究EasyUI系統—Panel元件（方法和事件）

【連載】研究EasyUI系統— Resizable元件

【連載】研究EasyUI系統— Layout元件

【連載】研究EasyUI系統—Tree元件（方法）

【連載】研究EasyUI系統—Easyloader元件

【連載】研究EasyUI系統—Panel元件（屬性）

【連載】研究EasyUI系統—Panel元件（概述）

【原創】.NET平臺機器學習元件-Infer.NET連載(一)介紹

【原創】.NET平臺機器學習元件-Infer.NET連載(二)貝葉斯分類器

【連載】計算機組成原理 --- 第四章指令系統

【Linux】Linux操作系統學習路線

【轉】以操作系統的角度述說線程與進程

【Java】得到當前系統時間，精確到毫秒

【CCF】模板生成系統

【CQOI2015】任務查詢系統（主席樹）

【Linux】Linux操作系統期末復習筆記

【北京】高級系統實施工程師 10—30w/年

【Hadoop】在Ubuntu系統下安裝Hadoop單機/偽分布式安裝

【連載】研究EasyUI系統—ProgressBar元件

相關推薦