크기 가이드

컴포넌트 크기 기능에 대한 예시 화면이다.

관련 속성으로 width, width_percent, width_unit, width_type, height, height_percent, height_unit이 있다.

관련 API로 setsize, setsizeex, getwidth, setwidth, getheight, setheight가 있다.

템플릿 위치: /HTML5/COMPONENT/COMMON/size_basic

템플릿 파일

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

// 버튼 너비 값을 반환한다
function btn_getwidth_on_click(objInst)
{
	// 버튼의 width_unit 속성과 무관하게, 실제 픽셀 단위의 너비를 구하여 표시
	fld_getwidth.settext(btn_sizepos.getwidth());
}

// 버튼 너비를 설정한다
function btn_setwidth_on_click(objInst)
{
	var width_unit;

	// 너비 단위 정보를 구함
	width_unit = cbo_widthunit.getselectedcode();

	// width_unit이 "2:변경없음"인 경우,
	// width_unit 값을 파라미터로 전달하지 않음 (기존 width_unit 속성값이 적용됨)
	if (width_unit == "2") {
		btn_sizepos.setwidth(fld_setwidth.gettext());
	}
	else {
		// width_unit 값을 파라미터로 전달, width_unit 속성값도 변경
		btn_sizepos.setwidth(fld_setwidth.gettext(), width_unit);
	}
}

// 버튼 높이 값을 반환한다
function btn_getheight_on_click(objInst)
{
	// 버튼의 height_unit 속성과 무관하게, 실제 픽셀 단위의 높이를 구하여 표시
	fld_getheight.settext(btn_sizepos.getheight());
}

// 버튼 높이를 설정한다.
function btn_setheight_on_click(objInst)
{
	var height_unit;

	height_unit = cbo_heightunit.getselectedcode();

	// height_unit이 "2:변경없음"인 경우,
	// height_unit 값을 파라미터로 전달하지 않음 (기존 height_unit 속성값이 적용됨)
	if (height_unit == "2"){
		btn_sizepos.setheight(fld_setheight.gettext());
	}
	// height_unit 값을 파라미터로 전달, height_unit 속성값도 변경
	else {
		btn_sizepos.setheight(fld_setheight.gettext(), height_unit);
	}
}

// 버튼 컴포넌트 크기 변경
function btn_setsize_on_click(objInst)
{
	// 기존 width_unit, height_unit 속성값 기준으로 크기 설정
	btn_sizepos.setsize(fld_widthsize.gettext(), fld_heightsize.gettext());
}

// 버튼 컴포넌트 크기와 단위 지정
function btn_setsizeex_on_click(objInst)
{
	// width_unit, height_unit 속성값 및 크기 변경
	btn_sizepos.setsizeex(
		fld_heightsizeex.gettext(), cbo_widthunit_size.getselectedcode(),
		fld_heightsizeex.gettext(), cbo_heightunit_size.getselectedcode());
}