테이블뷰 스텝바 가이드

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

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

스텝간 이미지를 표시하기 위한 컬럼에는 스텝 상태에 대해서 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);
    }
}

  • guide/util/stepbar/stepbar_tableview.txt
  • 마지막으로 수정됨: 2024/03/13 15:55
  • 저자 127.0.0.1