Tad 教材網 - 線上書籍

:::

\[991\]PHP網站開發 進階應用技巧2
======================

[![](http://tad0616.net/uploads/dl.gif)](http://120.115.2.76/tad/tad_book3/file/9901/13.zip)

### 一、dhtmlxLayout 四種初始化

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

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

<span style="color: rgb(51, 102, 255);"><link rel="stylesheet" type="text/css" href="dhtmlxSuite/dhtmlxLayout/codebase/dhtmlxlayout.css">  
 <link rel="stylesheet" type="text/css" href="dhtmlxSuite/dhtmlxLayout/codebase/skins/dhtmlxlayout\_dhx\_skyblue.css">  
 <script src="dhtmlxSuite/dhtmlxLayout/codebase/dhtmlxcommon.js"></script>  
 <script src="dhtmlxSuite/dhtmlxLayout/codebase/dhtmlxcontainer.js"></script>  
 <script src="dhtmlxSuite/dhtmlxLayout/codebase/dhtmlxlayout.js"></script>  
 <style>  
 html, body { width: 100%; height: 100%; margin: 0px; overflow: hidden; }  
 </style></span>

### 三、物件型基本語法二：

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

### 四、基本版型

<table class="inline"> <tbody> <tr class="row0"> <td class="col0 centeralign">1C</td> <td class="col1 centeralign">2E</td> <td class="col2 centeralign">2U</td> <td class="col3
            centeralign">3E</td> <td class="col4 centeralign">3W</td> <td class="col5 centeralign">3J</td> <td class="col6 centeralign">3T</td> <td class="col7 centeralign">3L</td> </tr> <tr class="row1"> <td class="col0">[![](http://docs.dhtmlx.com/lib/exe/fetch.php?media=dhtmlxlayout:dgr5rjkf_98cftfq7d4_b.png)](http://docs.dhtmlx.com/lib/exe/detail.php?id=dhtmlxlayout%3Adhtmlxlayout_configuration&media=dhtmlxlayout:dgr5rjkf_98cftfq7d4_b.png "dhtmlxlayout:dgr5rjkf_98cftfq7d4_b.png")</td> <td class="col1">[![](http://docs.dhtmlx.com/lib/exe/fetch.php?media=dhtmlxlayout:dgr5rjkf_99c4vxnhcv_b.png)](http://docs.dhtmlx.com/lib/exe/detail.php?id=dhtmlxlayout%3Adhtmlxlayout_configuration&media=dhtmlxlayout:dgr5rjkf_99c4vxnhcv_b.png "dhtmlxlayout:dgr5rjkf_99c4vxnhcv_b.png")</td> <td class="col2">[![](http://docs.dhtmlx.com/lib/exe/fetch.php?media=dhtmlxlayout:dgr5rjkf_100pmqr7qfk_b.png)](http://docs.dhtmlx.com/lib/exe/detail.php?id=dhtmlxlayout%3Adhtmlxlayout_configuration&media=dhtmlxlayout:dgr5rjkf_100pmqr7qfk_b.png "dhtmlxlayout:dgr5rjkf_100pmqr7qfk_b.png")</td> <td class="col3">[![](http://docs.dhtmlx.com/lib/exe/fetch.php?media=dhtmlxlayout:dgr5rjkf_101cp3pvsd2_b.png)](http://docs.dhtmlx.com/lib/exe/detail.php?id=dhtmlxlayout%3Adhtmlxlayout_configuration&media=dhtmlxlayout:dgr5rjkf_101cp3pvsd2_b.png "dhtmlxlayout:dgr5rjkf_101cp3pvsd2_b.png")</td> <td class="col4">[![](http://docs.dhtmlx.com/lib/exe/fetch.php?media=dhtmlxlayout:dgr5rjkf_106d5jzs4d6_b.png)](http://docs.dhtmlx.com/lib/exe/detail.php?id=dhtmlxlayout%3Adhtmlxlayout_configuration&media=dhtmlxlayout:dgr5rjkf_106d5jzs4d6_b.png "dhtmlxlayout:dgr5rjkf_106d5jzs4d6_b.png")</td> <td class="col5">[![](http://docs.dhtmlx.com/lib/exe/fetch.php?media=dhtmlxlayout:dgr5rjkf_102jb2px2dz_b.png)](http://docs.dhtmlx.com/lib/exe/detail.php?id=dhtmlxlayout%3Adhtmlxlayout_configuration&media=dhtmlxlayout:dgr5rjkf_102jb2px2dz_b.png "dhtmlxlayout:dgr5rjkf_102jb2px2dz_b.png")</td> <td class="col6">[![](http://docs.dhtmlx.com/lib/exe/fetch.php?media=dhtmlxlayout:dgr5rjkf_104s9rkcthc_b.png)](http://docs.dhtmlx.com/lib/exe/detail.php?id=dhtmlxlayout%3Adhtmlxlayout_configuration&media=dhtmlxlayout:dgr5rjkf_104s9rkcthc_b.png "dhtmlxlayout:dgr5rjkf_104s9rkcthc_b.png")</td> <td class="col7">[![](http://docs.dhtmlx.com/lib/exe/fetch.php?media=dhtmlxlayout:dgr5rjkf_103dhjgj5f8_b.png)](http://docs.dhtmlx.com/lib/exe/detail.php?id=dhtmlxlayout%3Adhtmlxlayout_configuration&media=dhtmlxlayout:dgr5rjkf_103dhjgj5f8_b.png "dhtmlxlayout:dgr5rjkf_103dhjgj5f8_b.png")</td> </tr> <tr> <td class="col8 centeralign">3U</td> <td class="col9 centeralign">4H</td> <td class="col10 centeralign">4I</td> <td class="col11 centeralign">4T</td> <td class="col12
            centeralign">4U</td> <td class="col13 centeralign">5H</td> <td class="col14 centeralign">5I</td> <td class="col15 centeralign">6I</td> </tr> <tr> <td class="col8">[![](http://docs.dhtmlx.com/lib/exe/fetch.php?media=dhtmlxlayout:dgr5rjkf_105dc3dcsjg_b.png)](http://docs.dhtmlx.com/lib/exe/detail.php?id=dhtmlxlayout%3Adhtmlxlayout_configuration&media=dhtmlxlayout:dgr5rjkf_105dc3dcsjg_b.png "dhtmlxlayout:dgr5rjkf_105dc3dcsjg_b.png")</td> <td class="col9">[![](http://docs.dhtmlx.com/lib/exe/fetch.php?media=dhtmlxlayout:dgr5rjkf_107d3fxz7gm_b.png)](http://docs.dhtmlx.com/lib/exe/detail.php?id=dhtmlxlayout%3Adhtmlxlayout_configuration&media=dhtmlxlayout:dgr5rjkf_107d3fxz7gm_b.png "dhtmlxlayout:dgr5rjkf_107d3fxz7gm_b.png")</td> <td class="col10">[![](http://docs.dhtmlx.com/lib/exe/fetch.php?media=dhtmlxlayout:dgr5rjkf_1085czh9cs_b.png)](http://docs.dhtmlx.com/lib/exe/detail.php?id=dhtmlxlayout%3Adhtmlxlayout_configuration&media=dhtmlxlayout:dgr5rjkf_1085czh9cs_b.png "dhtmlxlayout:dgr5rjkf_1085czh9cs_b.png")</td> <td class="col11">[![](http://docs.dhtmlx.com/lib/exe/fetch.php?media=dhtmlxlayout:dgr5rjkf_109rcq3pvdp_b.png)](http://docs.dhtmlx.com/lib/exe/detail.php?id=dhtmlxlayout%3Adhtmlxlayout_configuration&media=dhtmlxlayout:dgr5rjkf_109rcq3pvdp_b.png "dhtmlxlayout:dgr5rjkf_109rcq3pvdp_b.png")</td> <td class="col12">[![](http://docs.dhtmlx.com/lib/exe/fetch.php?media=dhtmlxlayout:dgr5rjkf_110qzkxb9zw_b.png)](http://docs.dhtmlx.com/lib/exe/detail.php?id=dhtmlxlayout%3Adhtmlxlayout_configuration&media=dhtmlxlayout:dgr5rjkf_110qzkxb9zw_b.png "dhtmlxlayout:dgr5rjkf_110qzkxb9zw_b.png")</td> <td class="col13">[![](http://docs.dhtmlx.com/lib/exe/fetch.php?media=dhtmlxlayout:dgr5rjkf_111cjwcct3f_b.png)](http://docs.dhtmlx.com/lib/exe/detail.php?id=dhtmlxlayout%3Adhtmlxlayout_configuration&media=dhtmlxlayout:dgr5rjkf_111cjwcct3f_b.png "dhtmlxlayout:dgr5rjkf_111cjwcct3f_b.png")</td> <td class="col14">[![](http://docs.dhtmlx.com/lib/exe/fetch.php?media=dhtmlxlayout:dgr5rjkf_112d7g2ssfc_b.png)](http://docs.dhtmlx.com/lib/exe/detail.php?id=dhtmlxlayout%3Adhtmlxlayout_configuration&media=dhtmlxlayout:dgr5rjkf_112d7g2ssfc_b.png "dhtmlxlayout:dgr5rjkf_112d7g2ssfc_b.png")</td> <td class="col15">[![](http://docs.dhtmlx.com/lib/exe/fetch.php?media=dhtmlxlayout:dgr5rjkf_113cr76jwck_b.png)](http://docs.dhtmlx.com/lib/exe/detail.php?id=dhtmlxlayout%3Adhtmlxlayout_configuration&media=dhtmlxlayout:dgr5rjkf_113cr76jwck_b.png "dhtmlxlayout:dgr5rjkf_113cr76jwck_b.png")</td> </tr> </tbody> </table>

###  五、 進階版型

1.<script src="dhtmlxSuite/dhtmlxLayout/patterns/dhtmlxlayout\_pattern XX.js"></script>

<table class="inline"> <tbody> <tr class="row0"> <td class="col0 centeralign">4E</td> <td class="col1 centeralign">4W</td> <td class="col2 centeralign">4A</td> <td class="col3
            centeralign">4J</td> <td class="col4 centeralign">4L</td> <td class="col5 centeralign">4F</td> </tr> <tr class="row1"> <td class="col0">[![](http://docs.dhtmlx.com/lib/exe/fetch.php?media=dhtmlxlayout:4e.png)](http://docs.dhtmlx.com/lib/exe/detail.php?id=dhtmlxlayout%3Adhtmlxlayout_configuration&media=dhtmlxlayout:4e.png "dhtmlxlayout:4e.png")</td> <td class="col1">[![](http://docs.dhtmlx.com/lib/exe/fetch.php?media=dhtmlxlayout:4w.png)](http://docs.dhtmlx.com/lib/exe/detail.php?id=dhtmlxlayout%3Adhtmlxlayout_configuration&media=dhtmlxlayout:4w.png "dhtmlxlayout:4w.png")</td> <td class="col2">[![](http://docs.dhtmlx.com/lib/exe/fetch.php?media=dhtmlxlayout:4a.png)](http://docs.dhtmlx.com/lib/exe/detail.php?id=dhtmlxlayout%3Adhtmlxlayout_configuration&media=dhtmlxlayout:4a.png "dhtmlxlayout:4a.png")</td> <td class="col3">[![](http://docs.dhtmlx.com/lib/exe/fetch.php?media=dhtmlxlayout:4j.png)](http://docs.dhtmlx.com/lib/exe/detail.php?id=dhtmlxlayout%3Adhtmlxlayout_configuration&media=dhtmlxlayout:4j.png "dhtmlxlayout:4j.png")</td> <td class="col4">[![](http://docs.dhtmlx.com/lib/exe/fetch.php?media=dhtmlxlayout:4l.png)](http://docs.dhtmlx.com/lib/exe/detail.php?id=dhtmlxlayout%3Adhtmlxlayout_configuration&media=dhtmlxlayout:4l.png "dhtmlxlayout:4l.png")</td> <td class="col5">[![](http://docs.dhtmlx.com/lib/exe/fetch.php?media=dhtmlxlayout:4f.png)](http://docs.dhtmlx.com/lib/exe/detail.php?id=dhtmlxlayout%3Adhtmlxlayout_configuration&media=dhtmlxlayout:4f.png "dhtmlxlayout:4f.png")</td> </tr> <tr> <td class="col6 centeralign">4C</td> <td class="col7 centeralign">5U</td> <td class="col8 centeralign">5E</td> <td class="col9 centeralign">5W</td> <td class="col10 centeralign">6C</td> </tr> <tr> <td class="col6">[![](http://docs.dhtmlx.com/lib/exe/fetch.php?media=dhtmlxlayout:4c.png)](http://docs.dhtmlx.com/lib/exe/detail.php?id=dhtmlxlayout%3Adhtmlxlayout_configuration&media=dhtmlxlayout:4c.png "dhtmlxlayout:4c.png")</td> <td class="col7">[![](http://docs.dhtmlx.com/lib/exe/fetch.php?media=dhtmlxlayout:5u.png)](http://docs.dhtmlx.com/lib/exe/detail.php?id=dhtmlxlayout%3Adhtmlxlayout_configuration&media=dhtmlxlayout:5u.png "dhtmlxlayout:5u.png")</td> <td class="col8">[![](http://docs.dhtmlx.com/lib/exe/fetch.php?media=dhtmlxlayout:5e.png)](http://docs.dhtmlx.com/lib/exe/detail.php?id=dhtmlxlayout%3Adhtmlxlayout_configuration&media=dhtmlxlayout:5e.png "dhtmlxlayout:5e.png")</td> <td class="col9">[![](http://docs.dhtmlx.com/lib/exe/fetch.php?media=dhtmlxlayout:5w.png)](http://docs.dhtmlx.com/lib/exe/detail.php?id=dhtmlxlayout%3Adhtmlxlayout_configuration&media=dhtmlxlayout:5w.png "dhtmlxlayout:5w.png")</td> <td class="col10">[![](http://docs.dhtmlx.com/lib/exe/fetch.php?media=dhtmlxlayout:6c.png)](http://docs.dhtmlx.com/lib/exe/detail.php?id=dhtmlxlayout%3Adhtmlxlayout_configuration&media=dhtmlxlayout:6c.png "dhtmlxlayout:6c.png")</td> </tr> </tbody> </table>

### 六、切換樣式

1.內建三種外觀：dhx\_skyblue（預設）、dhx\_blue、dhx\_black  
 2.記得修改CSS檔名稱！

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

### 八、視窗型基本語法二：

<span style="color: rgb(51, 102, 255);"><script>  
 var dhxWins = new dhtmlXWindows();  
 var layoutWin = dhxWins.createWindow("w1", 20, 20, 600, 400);  
 var dhxLayout = new dhtmlXLayoutObject(layoutWin, "3L", "dhx\_skyblue");  
 </script></span>

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

<span style="color: rgb(51, 102, 255);"><script>  
 var dhxLayout = new dhtmlXLayoutObject(document.body, "3L", "dhx\_skyblue")  
 </script></span>

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

<span style="color: rgb(51, 102, 255);"><script>  
 var dhxLayout = new dhtmlXLayoutObject(document.body, "3L", "dhx\_skyblue")  
 </script></span>

### 十一、建議初始化方式

<span style="color: rgb(51, 102, 255);"><head>  
 <script>  
 var dhxLayout;  
 function doOnLoad() {  
 dhxLayout = new dhtmlXLayoutObject(...);  
 }  
 </script>  
 </head>  
 <body onload="doOnLoad();">  
 </body></span>

### 十二、其他常用方法：

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

:::