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

템플릿 파일

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

            

        
      

DIV 기본 가이드

예시

화면 스크립트