13. DHX入門（上）

一、dhtmlxLayout 四種初始化

1.物件型：以頁面上的某個物件作為 Layout 的容器(父節點);
2.視窗型：以某個視窗 (dhtmlxWindows 系統的成員) 作為 Layout 的父節點;
3.全螢幕：先決條件是Layout 的父節點 "document.body"，在這種情況下，Layout 即佔滿整個頁面;
4.版格型：其父節點是其它 dhtmlxLayout 中的某一版格（cell），這種新建立的 Layout 將被放在其它 Layout 的版格中。

二、物件型基本語法一：請放入<head></head>中（其實<body>中也行）

三、物件型基本語法二：

<div id="MyWin" style="position:absolute; width:600px; height:400px;"></div>
<script>
var dhxLayout = new dhtmlXLayoutObject("MyWin", "3L", "dhx_skyblue")
</script>

四、基本版型

1C	2E	2U	3E	3W	3J	3T	3L

3U	4H	4I	4T	4U	5H	5I	6I

五、進階版型

1.<script src="dhtmlxSuite/dhtmlxLayout/patterns/dhtmlxlayout_pattern XX.js"></script>

4E	4W	4A	4J	4L	4F

4C	5U	5E	5W	6C

六、切換樣式

1.內建三種外觀：dhx_skyblue（預設）、dhx_blue、dhx_black
2.記得修改CSS檔名稱！

七、視窗型基本語法一（請放入<head></head>中）

八、視窗型基本語法二：

九、全螢幕基本語法二（語法一和物件型一樣）：

十、版格型基本語法二（語法一和物件型一樣）：

十一、建議初始化方式

<head>
    <script>
        var dhxLayout;
            function doOnLoad() {
                dhxLayout = new dhtmlXLayoutObject(...);
            }
    </script>
</head>
<body onload="doOnLoad();">
</body>

十二、其他常用方法：

1.取得窗格：var item_a = dhxLayout.cells("a");
2.隱藏標題：item_a.hideHeader(); //showHeader() 可顯示標題
3.取得標題顯示狀態：item_a.isHeaderVisible();
4.設定視窗標題：item_a.setText("主選單"); //getText() 可取得視窗標題
5.展開某窗格：item_a.expand(); //collapse() 可關閉某窗格
6.設定寬度：item_a.setWidth(150); //getWidth() 可取得寬度
7.設定高度：item_a.setHeight(250);//getHeight() 可取得高度
8.設定內容：item_a.attachObject("text_a"); //需定義一個id="text_a"的元件
9.設連結為內容：item_a.attachURL("http://網址");
10.固定寬度：item_a.fixSize(true, false); //寬 , 高
11.設定縮起來後的視窗標題：dhxLayout.setCollapsedText("a", "主選單");
12.自動縮放：dhxLayout.setAutoSize("b;c", "a;c");//水平 , 垂直
13.設定效果：dhxLayout.setEffect("resize", true); //collapse、resize、highlight

12-2 dtree.js