엄마쟤흙먹어

*getSelected : 현재 선택된 탭 가져오기.

var tab = $('#tt').tabs('getSelected');

*getTabIndex : 탭 인덱스 가져오기.

var tab = $('#tt').tabs('getSelected');
var index = $('#tt').tabs('getTabIndex',tab);
alert("index:" + index);

*id 확인하기.

const tab = $('#infoTabs').tabs('getSelected');
const tabOptions = tab.panel('options');
const infoTabId = tabOptions.id;

개요

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 어느 쪽이더라도 그 후에 실행된다.

  EasyUI의 [Documentation]을 보면 Properties 항목을 볼 수 있다.
  하지만 Properties 조회 명령어는 properties가 아닌 options이기 때문에 주의가 필요하다.

*예시)

const tab = $('#infoTabs').tabs('getSelected');
const tabOptions = tab.panel('options');
const infoTabId = tabOptions.id;