#GWC UI Library : gwcCreateProgressDialog

웹 UI 라이브러리인 GWC에서 제공하는 gwcCreateProgressDialog 함수에 대한 예제 코드입니다.

먼저 DOM 구성은 다음과 같습니다.

그리고 CSS 구성은 다음과 같구요.

.center {
    display: flex;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
}

js 코드는 다음과 같습니다.

window.onload = () => {
    button.onclick = event => { 
        const dlg = gwcCreateProgressDialog({
            // onCancel 이벤트를 지정하지 않을 경우 "취소" 버튼 클릭시 remove 매서드가 자동으로 호출됨
            onCancel: () => {
                gwcMessage("사용자가 진행을 중단했습니다.", true);
                dlg.remove(); // onCancel 이벤트 지정했을 경우 의도적으로 remove 매서드를 호촐해야 함
            }
        });

        dlg.show();

        let p = 0;
        setInterval(() => {
            dlg.percent = p;
                if(p++ === 100) dlg.remove();
        }, 50);

        //dlg.label = "텍스트 메시지";
    };
};

실행 결과는 다음과 같습니다.

cancel() 매서드를 호출하면 onCancel 이벤트가 호출됩니다.

답글 남기기 응답 취소