guide:component:grid:grid_image_align [xFrame5 TechNet]

이 문서는 읽기 전용입니다. 원본을 볼 수는 있지만 바꿀 수는 없습니다. 문제가 있다고 생각하면 관리자에게 문의하세요.
====== 그리드 이미지 정렬 가이드 ======

그리드 데이터부의 아이템의 이미지 표시 위치 정렬 기능에 대한 예시 화면이다.

관련 속성으로 image_horzalign, image_vertalign이 있다.

관련 컬럼 API로 getcolumnimagehorzalign, setcolumnimagehorzalign, getcolumnimagevertalign, setcolumnimagevertalign이 있다.

관련 아이템 API로 getitemimagehorzalign, setitemimagehorzalign, getitemimagevertalign, setitemimagevertalign이 있다.

===== 예시 =====

템플릿 위치: /HTML5/COMPONENT/GRID/grid_image_align

템플릿 파일
  * [[xf5projecthome>template/screen/HTML5/COMPONENT/GRID/grid_image_align.xml|grid_image_align.xml]]
  * [[xf5projecthome>template/screen/HTML5/COMPONENT/GRID/grid_image_align.js|grid_image_align.js]]
  * [[xf5projecthome>template/template.html?xframe_screen_url=/HTML5/COMPONENT/GRID/grid_image_align|새창으로 실행]]

<php>
echo '<html>';
echo '<iframe src="';
echo $conf['plugin']['xf5']['xf5projecthome'], 'template/template.html?';
echo 'xframe_screen_url=/HTML5/COMPONENT/GRID/grid_image_align"';
echo ' class="_xf5_iframe"';
echo ' style="';
echo $conf['plugin']['xf5']['xf5iframestyle'];
echo '">';
echo '</iframe>';
echo '</html>';
</php>

==== 화면 스크립트 ====

<sxh javascript>
function screen_on_load()
{
}

// "setitemimagehorzalign" 버튼 이벤트
function btn_setitemimagehorzalign_on_click(objInst)
{
	var item_image_horz_align;

	// 그리드 아이템 이미지 수평 정렬 정보를 구함
	item_image_horz_align = this.grd_item_image_align.getitemimagehorzalign(0, 0);
	if (item_image_horz_align == -1) {
		// 그리드 아이템별 이미지 수직 정렬 설정이 없는 경우, 그리드 컬럼 이미지 수평 정렬 정보를 구함
		item_image_horz_align = this.grd_item_image_align.getcolumnimagehorzalign(0);
	}

	// 아이템 이미지 수평 정렬 값 계산
	item_image_horz_align = item_image_horz_align + 1;
	if (item_image_horz_align > 2) { item_image_horz_align = 0; }

	// 그리드 아이템 이미지 수평 정렬 값 설정
	this.grd_item_image_align.setitemimagehorzalign(0, 0, item_image_horz_align);
}

// "setitemimagevertalign" 버튼 이벤트
function btn_setitemimagevertalign_on_click(objInst)
{
	var item_image_vert_align;

	// 그리드 아이템 이미지 수직 정렬 정보를 구함
	item_image_vert_align = this.grd_item_image_align.getitemimagevertalign(0, 0);
	if (item_image_vert_align == -1) {
		// 그리드 아이템별 이미지 수직 정렬 설정이 없는 경우, 그리드 컬럼 이미지 수직 정렬 정보를 구함
		item_image_vert_align = this.grd_item_image_align.getcolumnimagevertalign(0);
	}

	// 아이템 이미지 수직 정렬 값 계산
	item_image_vert_align = item_image_vert_align + 1;
	if (item_image_vert_align > 2) { item_image_vert_align = 0; }

	// 그리드 아이템 이미지 수직 정렬 값 설정
	this.grd_item_image_align.setitemimagevertalign(0, 0, item_image_vert_align);
}
</sxh>