線上書籍

Home

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

一、dhtmlxLayout 四種初始化

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

二、物件型基本語法一:請放入<head></head>中(其實<body>中也行)

<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>

三、物件型基本語法二:

<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>中)

<link rel="stylesheet" type="text/css" href="dhtmlxSuite/dhtmlxWindows/codebase/dhtmlxwindows.css">
<link rel="stylesheet" type="text/css" href="dhtmlxSuite/dhtmlxWindows/codebase/skins/dhtmlxwindows_dhx_skyblue.css">
<script src="dhtmlxSuite/dhtmlxWindows/codebase/dhtmlxwindows.js"></script>

八、視窗型基本語法二:

<script>
    var dhxWins = new dhtmlXWindows();
    var layoutWin = dhxWins.createWindow("w1", 20, 20, 600, 400);
    var dhxLayout = new dhtmlXLayoutObject(layoutWin, "3L", "dhx_skyblue");
</script>

九、全螢幕基本語法二(語法一和物件型一樣):

<script>
    var dhxLayout = new dhtmlXLayoutObject(document.body, "3L", "dhx_skyblue")
</script>

十、版格型基本語法二(語法一和物件型一樣):

<script>
    var dhxLayout = new dhtmlXLayoutObject(document.body, "3L", "dhx_skyblue")
</script>

十一、建議初始化方式

<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