엄마쟤흙먹어

개요

  EasyUI의 textbox에는 원래의 <input>에 적용할 수 있는 이벤트 중에 onChange만 설정할 수 있습니다. 그 외에는 지원을 하지 않기 때문에 직접 textbox 객체를 받아서 설정하는 방법을 사용합니다.

예제코드

$('#box').textbox('textbox').on('keyup', function(event) {
	const $box = $('#box');
	const text = $box.textbox('getText');
	
	// 숫자, 영문, 한글 가능. 특수문자 ;:,.?!-_()*%#만 가능.
	const regExp = /[^\s\wㄱ-힣;:,.?!\-()*%#]/g;
	let safeText = text.replace(regExp, '');
	
	// 최대 60자.
	const max = 60;
	if (max < safeText.length) {
		safeText = safeText.substring(0, max);
	}
	$box.textbox('setValue', safeText);
});

해설

  textbox라는 메서드 호출을 통해 얻은 객체에 이벤트를 붙일 수 있습니다. 이를 통해 EasyUI가 지원하지 않는 이벤트도 사용 가능합니다. numberbox에도 동일한 방식으로 사용 가능합니다.

  참고로 위 방식을 몰랐을 때는 아래처럼 복잡한 방식으로 구현하기도 했습니다.

$('#box1').numberbox({
	inputEvents:$.extend({},$.fn.numberbox.defaults.inputEvents,{
		keyup : function(event) {
			const text = $('#box1').numberbox('getText');
			if (3 <= text.length) {
				$('#box2').textbox('textbox').focus();
			}
		},
	})
});

개요

Ajax 통신중에 프로그레스바 마스크를 호출하여 사용자의 조작을 막고 처리중임을 알릴 필요가 있다.

빠른 길잡이

jQuery UI 이용

  html로 프로그레스바를 준비한다.

  스타일

<style>
#progressbar {
	margin-top: 20px;
}

.progress-label {
	font-weight: bold;
	text-shadow: 1px 1px 0 #fff;
}

/* Dialog의 우상단 닫기버튼[x]를 숨기는 설정. */
.ui-dialog-titlebar-close {
	display: none;
}
</style>

  html

<!-- Progressbar Dialog -->
<div id="dialog" title="Progressbar Example" style="display: none;">
  <div class="progress-label">Starting...</div>
  <div id="progressbar"></div>
</div>

beforeSend에서 jQuery UI 프로그레스바를 노출시킨한다.

(*[2022-11-14] modal 속성이 누락되었어서 추가함.)

beforeSend : function() {
	var progressbar = $("#progressbar");
	progressbar.progressbar({
		value: false,
	});
	//progressbar.progressbar("value", 0);
	$('#dialog').dialog({
		modal: true
	});
}

complete에서 jQuery 프로그레스바를 비노출시킨다.

complete/*always*/ : function() {
	$('#dialog').dialog('close');
}

EasyUI 이용

beforeSend에서 EasyUI 프로그레스바를 노출시킨한다.

beforeSend : function(jqXHR, settings) {
	$.messager.progress({
		title:'요청을 처리하는 중입니다.',
		msg:'처리가 끝날 때까지 잠시만 기다려주세요...'
	});
}

complete에서 EasyUI 프로그레스바를 비노출시킨다.

complete/*always*/ : function() {
	$.messager.progress('close');
}

해설

jQuery Ajax에서 beforeSend는 요청 전 항상 실행된다.

또한 complete는 응답을 받고 success와 error 어느 쪽이더라도 그 후에 실행된다.