====== 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|새창으로 실행]]
echo '';
echo '';
echo '';
==== 화면 스크립트 ====
// "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("");
html_arr.push("
INNER HTML
");
html_arr.push("