테이블뷰 스텝바 가이드
이 화면은 테이블뷰 컴포넌트를 활용한 스텝바 구현 예시화면이다.
예시
스텝바는 스텝을 보여주기 위한 컬럼은 % 단위로 크기를 설정하고, 스텝간 이미지를 표시하기 위한 컬럼은 픽셀 단위로 크기를 설정한다.
스텝간 이미지를 표시하기 위한 컬럼에는 스텝 상태에 대해서 3개의 이미지를 중첩된 위치에 지정한다.
템플릿 위치: /HTML5/UTIL/STEPBAR/stepbar_tableview
템플릿 파일
화면 스크립트
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 |
// 스텝간 표시용 이미지 표시 처리 초기화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); }} |