====== border_effect 속성 ======
이 화면은 border_effect 샘플 화면이다.
border_effect는 컴포넌트의 border_effect_func 속성 혹은 setbordereffect API를 사용하여 설정한다.
관련 속성으로 border_effect_func가 있다.
관련 API로 getbordereffect, getbordereffect가 있다.
===== 예시 =====
템플릿 위치: /HTML5/COMPONENT/FIELD/field_bordereffect
템플릿 파일
* [[xf5projecthome>template/screen/HTML5/COMPONENT/FIELD/field_bordereffect.xml|field_bordereffect.xml]]
* [[xf5projecthome>template/screen/HTML5/COMPONENT/FIELD/field_bordereffect.js|field_bordereffect.js]]
* [[xf5projecthome>template/template.html?xframe_screen_url=/HTML5/COMPONENT/FIELD/field_bordereffect|새창으로 실행]]
echo '';
echo '';
echo '';
==== 화면 스크립트 ====
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;
}