−목차

border_effect 속성

이 화면은 border_effect 샘플 화면이다.

border_effect는 컴포넌트의 border_effect_func 속성 혹은 setbordereffect API를 사용하여 설정한다.

관련 속성으로 border_effect_func가 있다.

관련 API로 getbordereffect, getbordereffect가 있다.

예시

템플릿 위치: /HTML5/COMPONENT/FIELD/field_bordereffect

템플릿 파일

화면 스크립트

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
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
function screen_on_load()
{
    var prop_obj = {
        effect_duration: 400,     // 효과가 동작할 시간(default: 400)
        effect_type: 0,       // 효과타입(0 ~ 8, default: 0)
        effect_event: "focus",   // 동작할 이벤트(focus: focus-in,out(default), hover:mouse-in,out)
        border_color: [51,153,255], // 보더 색상(default: 51,153,255)
        border_width: 4,         // 보더 두께 (default: 2)
        margin_top: 0,            // 상단마진(default: 0)
        margin_right: 0,            // 우측마진(default: 0)
        margin_bottom: 0,          // 하단마진(default: 0)
        margin_left: 0            // 좌측마진(default: 0)
    };
 
    this.fld0.setbordereffect(prop_obj);
 
    prop_obj.effect_type = 1;
    this.fld1.setbordereffect(prop_obj);
 
    prop_obj.effect_type = 2;
    this.fld2.setbordereffect(prop_obj);
 
    prop_obj.effect_type = 3;
    this.fld3.setbordereffect(prop_obj);
 
    prop_obj.effect_type = 4;
    this.fld4.setbordereffect(prop_obj);
 
    prop_obj.effect_type = 5;
    this.fld5.setbordereffect(prop_obj);
 
    prop_obj.effect_type = 6;
    prop_obj.border_width = 4;
    this.fld6.setbordereffect(prop_obj);
 
    prop_obj.effect_type = 7;
    this.fld7.setbordereffect(prop_obj);
 
    prop_obj.effect_type = 8;
    prop_obj.effect_duration = 200;
    this.fld8.setbordereffect(prop_obj);
}
 
function btn_change1_on_mouseup(objInst)
{
    var prop_obj = {
        effect_duration: 300,
        effect_type: 0,
        border_color: [125,0,255]
    };
 
    this.fld9.setbordereffect(prop_obj);
}
 
function btn_change2_on_mouseup(objInst)
{
    var prop_obj;
 
    prop_obj = this.fld9.getbordereffect();
 
    // 생성되어 있지 않을때 getbordereffect API를 호출한 것이면 리턴
    if (prop_obj === null){ return; }
 
    prop_obj.border_color = [255,0,0];
    this.fld9.setbordereffect(prop_obj);
}
 
function btn_delete_on_mouseup(objInst)
{
    // 파라미터로 null을 설정시 삭제
    this.fld9.setbordereffect(null);
}
 
/**
 * Border 효과 처리 사용자 정의 함수
 * @param objScreen 화면 인스턴스
 * @param objComponent 컴포넌트 인스턴스
 * @returns setbordereffect 함수에 사용되는 속성 오브젝트 또는 null
 */
function BorderEffectFunc(objScreen, objComponent) {
    // prop_obj 구조는 setbordereffect API 도움말 참조
    var prop_obj = {
        effect_duration: 400,     // 효과가 동작할 시간(default: 400)
        effect_type: 0,       // 효과타입(0 ~ 8, default: 0)
        effect_event: "focus",   // 동작할 이벤트(focus: focus-in,out(default), hover:mouse-in,out)
        border_color: [255,178,102] // 보더 색상(default: 51,153,255)
    };
 
    // Case 1. setbordereffect 함수에 사용될 속성 오브젝트 리턴
    return prop_obj;
 
    // Case 2. setbordereffect 함수를 직접 호출하고 null 리턴
    // objComponent.setbordereffect(prop_obj);
    // return null;
}