====== 테이블뷰 스텝바 가이드 ======
이 화면은 테이블뷰 컴포넌트를 활용한 스텝바 구현 예시화면이다.
===== 예시 =====
스텝바는 스텝을 보여주기 위한 컬럼은 % 단위로 크기를 설정하고, 스텝간 이미지를 표시하기 위한 컬럼은 픽셀 단위로 크기를 설정한다.
스텝간 이미지를 표시하기 위한 컬럼에는 스텝 상태에 대해서 3개의 이미지를 중첩된 위치에 지정한다.
템플릿 위치: /HTML5/UTIL/STEPBAR/stepbar_tableview
템플릿 파일
* [[xf5projecthome>template/screen/HTML5/UTIL/STEPBAR/stepbar_tableview.xml|stepbar_tableview.xml]]
* [[xf5projecthome>template/screen/HTML5/UTIL/STEPBAR/stepbar_tableview.js|stepbar_tableview.js]]
* [[xf5projecthome>template/template.html?xframe_screen_url=/HTML5/UTIL/STEPBAR/stepbar_tableview|새창으로 실행]]
echo '';
echo '';
echo '';
==== 화면 스크립트 ====
// 스텝간 표시용 이미지 표시 처리 초기화
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);
}
}