====== placehoder_effect 속성 ======
이 화면은 placehoder_effect 샘플 화면이다.
placehoder_effect는 컴포넌트의 hinttext_effect_func 속성 혹은 setplaceholdereffect API를 사용하여 설정한다.
text를 설정하지 않았거나 공백문자열( ' ' )로 설정시, 컴포넌트의 hint_text값이 설정되어 있다면 hint_text값을 text값으로 사용한다.
vert_align_focusin값이 1일 경우 수평방향에 관계없이 컴포넌트의 우측중앙에 표시된다.
컴포넌트에 값이 입력되어 있다면 플레이스홀더의 위치가 focus-out 상태로 유지된다.
관련 속성으로 hinttext_effect_func, hint_text가 있다.
관련 API로 getplaceholdereffect, setplaceholdereffect, sethinttext가 있다.
===== 예시 =====
템플릿 위치: /HTML5/COMPONENT/FIELD/field_placeholdereffect
템플릿 파일
* [[xf5projecthome>template/screen/HTML5/COMPONENT/FIELD/field_placeholdereffect.xml|field_placeholdereffect.xml]]
* [[xf5projecthome>template/screen/HTML5/COMPONENT/FIELD/field_placeholdereffect.js|field_placeholdereffect.js]]
* [[xf5projecthome>template/template.html?xframe_screen_url=/HTML5/COMPONENT/FIELD/field_placeholdereffect|새창으로 실행]]
echo '';
echo '';
echo '';
==== 화면 스크립트 ====
function screen_on_load()
{
var prop_obj = {
// 표시할 텍스트(기본값: '')
text: "한글123abc",
// 애니메이션 효과가 동작할 시간(단위: ms)(기본값: 300)
effect_duration: 300,
// focusout시 폰트(기본값: ['굴림체',9,0,0,0,0])
focusout_font: ["맑은고딕",10,0,0,0,0],
// focusout시에 비해 focus-in시, 줄어들 폰트사이즈 차이(기본값: 2)
fontsize_gap: 2,
// focusin시, 글자 색상(기본값: [51,153,255])
focusin_fore_color: [51,153,255],
// focusout시, 글자 색상(기본값: [170,170,170])
focusout_fore_color: [170,170,170],
// focusin시, 텍스트 좌측 Gap(기본값: 0)
// 양수값은 텍스트 우측 이동, 음수값은 텍스트 좌측 이동
focusin_horz_gap: 0,
// focusin시, 텍스트와 컴포넌트와의 Gap(기본값: 0)
// focusin_vert_align 값이 0인 경우,
// 양수값은 텍스트 상단 이동, 음수값은 텍스트 하단 이동
// focusin_vert_align 값이 1/2인 경우,
// 양수값은 텍스트 하단 이동, 음수값은 텍스트 상단 이동
focusin_vert_gap: 0,
// focusout시, 텍스트 좌측 Gap(기본값: 0)
// 양수값은 텍스트가 우측으로 이동하고, 음수값은 텍스트 좌측 이동
focusout_horz_gap: 2,
// focusout시 텍스트 상단 Gap(기본값: 0)
// 양수값은 텍스트 하단 이동, 음수값은 텍스트 상단 이동
focusout_vert_gap: 0,
// focusout시, 표시될 플레이스홀더 위치("left"(기본값)/"center"/"right")
focusout_horz_align: "left",
// 수평방향 위치(0: 좌(기본값), 1: 중, 2: 우)
focusin_horz_align: 0,
// 수직방향 위치(0: 상(기본값), 1: 중, 2: 하)
focusin_vert_align: 0
};
// 좌측위
this.fld1.setplaceholdereffect(prop_obj);
// 우측위
prop_obj.focusin_horz_align = 1;
prop_obj.focusin_vert_align = 0;
this.fld2.setplaceholdereffect(prop_obj);
// 우측중앙
prop_obj.focusin_horz_align = 0;
prop_obj.focusin_vert_align = 1;
this.fld3.setplaceholdereffect(prop_obj);
// 좌측아래
prop_obj.focusin_horz_align = 0;
prop_obj.focusin_vert_align = 2;
this.fld4.setplaceholdereffect(prop_obj);
// 우측아래
prop_obj.focusin_horz_align = 1;
prop_obj.focusin_vert_align = 2;
this.fld5.setplaceholdereffect(prop_obj);
prop_obj.focusin_horz_align = 0;
prop_obj.focusin_vert_align = 0;
this.fld6.setplaceholdereffect(prop_obj);
}
function btn_sethinttext_on_mouseup(objInst)
{
this.fld6.sethinttext("가나다456def");
}
function btn_change1_on_mouseup(objInst)
{
var prop_obj = {
effect_duration: 200,
focusout_font: ["맑은고딕",14,0,0,0,0],
text: "design1",
focusout_fore_color: [255,0,0],
focusin_fore_color: [0,175,16],
focusout_horz_margin: 5
};
prop_obj.focusin_horz_align = 1;
prop_obj.focusin_vert_align = 2;
this.fld7.setplaceholdereffect(prop_obj);
}
function btn_change2_on_mouseup(objInst)
{
var prop_obj;
prop_obj = this.fld7.getplaceholdereffect();
// 생성되어 있지 않을때 getplaceholdereffect API를 호출한 것이면 리턴
if (prop_obj === null){ return; }
prop_obj.focusin_fore_color = [0,36,255];
prop_obj.focusout_fore_color = [208,210,0];
this.fld7.setplaceholdereffect(prop_obj);
}
function btn_delete_on_mouseup(objInst)
{
// 파라미터로 null을 설정시 삭제
this.fld7.setplaceholdereffect(null);
}
/**
* HintText 효과 처리 사용자 정의 함수
* @param objScreen 화면 인스턴스
* @param objComponent 컴포넌트 인스턴스
* @returns setplaceholdereffect 함수에 사용되는 속성 오브젝트 또는 null
*/
function HintTextEffectFunc(objScreen, objComponent) {
// prop_obj 구조는 setplaceholdereffect API 도움말 참조
var prop_obj = {
text: "속성으로 설정", // 표시할 텍스트
focusout_horz_gap: 2 // focus-out일때 텍스트 좌측 gap값
};
// Case 1. setplaceholdereffect 함수에 사용될 속성 오브젝트 리턴
return prop_obj;
// Case 2. setplaceholdereffect 함수를 직접 호출하고 null 리턴
// objComponent.setplaceholdereffect(prop_obj);
// return null;
}