테이블뷰 스텝바 가이드

이 화면은 테이블뷰 컴포넌트를 활용한 스텝바 구현 예시화면이다.

스텝바는 스텝을 보여주기 위한 컬럼은 % 단위로 크기를 설정하고, 스텝간 이미지를 표시하기 위한 컬럼은 픽셀 단위로 크기를 설정한다.

스텝간 이미지를 표시하기 위한 컬럼에는 스텝 상태에 대해서 3개의 이미지를 중첩된 위치에 지정한다.

템플릿 위치: /HTML5/UTIL/STEPBAR/stepbar_tableview

템플릿 파일

• stepbar_tableview.xml
• stepbar_tableview.js
• 새창으로 실행

// 스텝간 표시용 이미지 표시 처리 초기화
function InitImgStepImageList()
{
	var i, arr_img_step;

	arr_img_step = ["img_step_12", "img_step_23", "img_step_34"];

	// 스텝간 표시용 이미지 표시 처리 초기화
	for (i = 0; i < arr_img_step.length; i++) {
		this[arr_img_step[i] + "_left"].setvisible(false);
		this[arr_img_step[i] + "_none"].setvisible(true);
		this[arr_img_step[i] + "_right"].setvisible(false);
	}

	this.ClearStepButtonList();
}

// 스텝 표시용 버튼 Push 상태 초기화
function ClearStepButtonList()
{
	var i, arr_button_step;

	arr_button_step = ["btn_step_1", "btn_step_2", "btn_step_3", "btn_step_4"];

	// 버튼 Push 상태 초기화
	for (i = 0; i < arr_button_step.length; i++) {
		this[arr_button_step[i]].setstatuspush(false);
	}
}

// 스텝 표시용 버튼 mousedown 이벤트
function btn_step_on_mousedown(objInst)
{
	var obj_name, obj_name_arr, step_index;

	this.InitImgStepImageList();

	// step_index은 1부터 시작
	obj_name = objInst.getname();
	obj_name_arr = obj_name.split("_");
	step_index = parseInt(obj_name_arr[obj_name_arr.length - 1], 10);

	// 스텝 좌측 이미지 처리
	if (step_index > 1) {
		this["img_step_" + (step_index - 1) + "" + step_index + "_left"].setvisible(false);
		this["img_step_" + (step_index - 1) + "" + step_index + "_none"].setvisible(false);
		this["img_step_" + (step_index - 1) + "" + step_index + "_right"].setvisible(true);
	}

	// 스텝 우측 이미지 처리
	if (step_index < 4) {
		this["img_step_" + step_index + "" + (step_index + 1) + "_left"].setvisible(true);
		this["img_step_" + step_index + "" + (step_index + 1) + "_none"].setvisible(false);
		this["img_step_" + step_index + "" + (step_index + 1) + "_right"].setvisible(false);
	}
}