UI exclusiveDialog
한번에 여러 호출을 해도 한번에 하나의 dialog만 뜸
dialog 태그를 사용하여 modal(뒷 부분을 접근할 수 없는 상태)을 구성한다.
alert, confirm, prompt 를 에뮬레이션 하는 것이 기본 목표
promise 기반 콜백처리.
ExclusiveDialog.close(node,returnValue) or edialog.close(node,returnValue) 로 처리하면 변수 타입을 유지한다.
edialog.alert.close(returnValue) 로 지정한 alert 이나 confirm 이나 promport 를 닫을 수 있다.
edialog.closeAll(returnValue) 로 edialog 속에 정의된 모든 exclusiveDialog 를 닫을 수 있다.
github :
mins01/ui-exclusive-dialog
확장 :
부트스트랩 5
확장 :
dialog-labels (언어 설정에 맞춰서 라벨 변경)
window dialog
alert([message]);
Message
No Message
Long message
Multi
Boolean returnValue = edialog.confirm([message]);
Message
No Message
Long message
Multi
String returnValue = edialog.prompt([message],[defaultValue] );
Message
No Message
Long message
Multi
Basic dialog
edialog.alert([message]);
Message
No Message
Long message
Multi
Auto alert.close
Auto closeAll
Boolean returnValue = edialog.confirm([message]);
Message
No Message
Long message
Multi
Auto confirm.close
Auto closeAll
String returnValue = edialog.prompt([message],[defaultValue] );
Message
No Message
Long message
Multi
Auto prompt.close
Auto closeAll
Custom dialog
edialog.testReturnValue();
returnValue 처리에 대한 테스트
Message
No Message
Long message
Multi
edialog.custom1();
onsubmit 예제
Message
No Message
Long message
Multi
edialog.custom2();
버튼의 onclick 처리 예제
Message
No Message
Long message
Multi
기타
기타
only value(문자열로만 처리됨)
Scenario
시나리오 테스트
비동기 후속 동작 테스트 시나리오.(후속으로 무조건 confirm이 열린다)
alert
확인
confirm
확인
취소
confirmOnlyValue
확인
취소
prompt
확인
취소
testReturnValue
##
Yes
No
Test
number 123
undefined
null
true
false
type="button" 아무 동작 없음
현재 보이는 dialog를 닫는다.
큐를 clear하고 현재 보이는 dialog를 닫는다.
edialog.testReturnValue.close();
custom1
##
##
2~10글자를 입력해주세요.
확인
취소
custom2
##
2~10글자를 입력해주세요.
확인
취소
alert
중복 등록 실패 테스트
확인
1-alert
직접 호출 함수 등록 실패 테스트
확인