guide:component:div:div_basic [xFrame5 TechNet]

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

이 화면은 DIV 컴포넌트 대한 기본 기능 예시 화면이다.

DIV 컴포넌트는 HTML5 DIV 태그와 동일한 기능을 수행한다.

DIV 컴포넌트는 주로 UI가 있는 외부 솔루션(예: 차트 솔루션)의 UI 표시를 위한 HTML DIV DOM을 제공하기 위한 용도로 사용한다.

일반적으로 UI가 있는 외부 솔루션들은 UI를 표현하기 위한 대상 DIV/CANVAS HTML DOM을 기준으로 동작한다.

외부 솔루션 자바스크립트 라이브러리 및 CSS 파일은 screen 오브젝트의 loadjs, loadcss API를 통해서 로드한다.

관련 속성으로 display_type, padding, use_select, content_overflow, custom_class가 있다.

관련 API로 getdom, getjdom, setinnerhtml가 있다.

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

템플릿 위치: /HTML5/COMPONENT/DIV/div_basic

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

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

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

<sxh javascript>
// "getdom" 버튼 이벤트
function btn_getdom_on_mouseup(objInst)
{
	var dom_div;

	// DIV DOM 엘리먼트를 구함
	dom_div = div_basic.getdom();
	factory.consoleprint("TAG NAME = " + dom_div.tagName);

	// DOM 속성 사용 예시
	dom_div.style.height = "54px";
}

// "getjdom" 버튼 이벤트
function btn_getjdom_on_mouseup(objInst)
{
	var jdom_div;

	// DIV DOM 엘리먼트에 대한 jQuery 오브젝트를 구함
	jdom_div = div_basic.getjdom();
	factory.consoleprint("TAG NAME = " + jdom_div[0].tagName);

	// jQuery height API 사용 예시
	jdom_div.height("84px");
}

// "setinnerhtml" 버튼 이벤트
function btn_setinnerhtml_on_mouseup(objInst)
{
	var html_arr;

	// HTML 조립용 배열 생성
	html_arr = [];

	// HTML 조립
	html_arr.push("<div style=\"width:100%;height:100%;background-color:light-grey;\">");
	html_arr.push("<p>INNER HTML</p>");
	html_arr.push("</div>");

	// HTML을 DIV 내부에 설정
	div_basic.setinnerhtml(html_arr.join(""));
}
</sxh>