border_effect 속성

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

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

관련 속성으로 border_effect_func가 있다.

관련 API로 getbordereffect, getbordereffect가 있다.

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

템플릿 파일

• field_bordereffect.xml
• field_bordereffect.js
• 새창으로 실행

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;
}