(펌)
div 영역 잡고 layout, toolbar, tabbar, button, grid, tree, menu 등 필요한 개체를 붙이면 됨. 의외로 엄청 편리하고 간단한 듯.
api 참고 http://docs.dhtmlx.com/doku.php
ex)
1. html
1) 필요한 css 추가
<link rel="stylesheet" type="text/css" href="../libs/dhtmlx/dhtmlx.css" />등
2) 필요한 js 추가
<script type="text/javascript" src="../libs/dhtmlx/dhtmlx.js"></script> 등
3) 객체가 보여질 영역 잡기
<div id="objId" style="position:absolute; width:1024px; height:600px;"></div>
2. script
1) html div 영역에 레이아웃 객체 생성.
(파라미터1 : div id, 파라미터2 : 레이아웃 형태) : 레이아웃 형태는 http://docs.dhtmlx.com/doku.php?id=dhtmlxlayout:layoutpattern 참고.
예를 들면,
var dhxLayout = new dhtmlXLayoutObject("objId", "1C");
레이아웃 객체 생성해서 화면에 뿌리는게 끝이다. 이게 전부.. 그 외 이미지나 기타 꾸미는 옵션도 api에 잘 나와있고..
2) 생성된 레이아웃 객체에 접근하기
dhxLayout.cells("a"). XXXXXX
레이아웃 형태에 따라 각 영역에 a, b, c .. 로 id가 잡힌다. 이 아이디로 각 영역에 접근 가능하다.
만약 레이아웃 a 영역에 트리를 붙이고 싶으면
var dhxTree = dhxLayout.cells("a").attachTree();
이게 끝이다. 트리를 구성하고 꾸미는건 트리 api에 잘 나와있고..
예를 들면,
dhxTree.setImagePath("../img/dhtmlxTree/"); => 트리 이미지 경로
dhxTree.attachEvent("onDblClick", function(id){ => 트리 이벤트 (onClick, onDblClick 등등)
var id = dhxTree.getSelectedItemId(); => 선택된 트리 아이디 가져오기
var openState = dhxTree.getOpenState(id); => 선택된 트리의 상태(펼쳐졌는지 오므려졌는지 ㅋ)
alert(id + "의 상태가 " + openState + "입니다.");
});
dhxTree.insertNewChild(0, "root", "/"); => 최상위 디렉토리를 /로 만들고 id는 root로 지정
dhxTree.insertNewChild("root", "child1", child1"); => id가 root인 트리의 하위에 child1이라는 이름과 아이디로 트리 노드 생성
dhxTree.insertNewChild("child1", "child1-1", "child1-1"); => id가 child1인 트리의 하위에 child1-1이라는 이름과 이이디로 트리노드 생성
이렇게 생성하면 아래와 같은 형태로 트리가 생성된다.
/
ㄴ child1
ㄴchild1-1
이렇게 해 놓으면 설정된 이미지경로의 이미지로 더블클릭이벤트를 가진 트리가 레이아웃 a에 생성된다.
거의 대부분의 컴포넌트들을 위와 같이 간단하게 만들고 사용할수 있다.
처음 사용해보는 거라 개념을 잡는데서 처음 몇 일간 엄청 헤맸지만 워낙 api가 자게하게 나와있고 메소드명이 직관적이라서
각 컴포넌트 api를 찾아보면 사용하는데 무리가 없을 것 같다.
각 컴포넌트 api 최초 진입 후에 API Methods (alphabetical list) 에서 제일 많이 찾은거 같다.
무언가 찾고 싶으면 get, id 이런걸로 찾고 값을 셋팅하고 싶으면 set으로 검색하고... 없는 게 거의 없었던 듯...
누가 만들었는지...
추가: dHtmlxLayout Basic Sample
<!DOCTYPE html> <html> <head> <title>Object-based init</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <meta http-equiv="X-UA-Compatible" content="IE=edge"/> <link rel="stylesheet" type="text/css" href="../../../codebase/dhtmlx.css"/> <script src="../../../codebase/dhtmlx.js"></script> <style> div#layoutObj { position: relative; margin-top: 20px; margin-left: 20px; width: 600px; height: 400px; } </style> <script> var myLayout; function doOnLoad() { myLayout = new dhtmlXLayoutObject("layoutObj", "3L"); } </script> </head> <body onload="doOnLoad();"> <div id="layoutObj"></div> </body> </html>
화면 >>>>
