테이블뷰 스텝바 가이드
이 화면은 테이블뷰 컴포넌트를 활용한 스텝바 구현 예시화면이다.
예시
스텝바는 스텝을 보여주기 위한 컬럼은 % 단위로 크기를 설정하고, 스텝간 이미지를 표시하기 위한 컬럼은 픽셀 단위로 크기를 설정한다.
스텝간 이미지를 표시하기 위한 컬럼에는 스텝 상태에 대해서 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 ); } } |