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

템플릿 파일

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

// "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(""));
}