[991]PHP網站開發 進階應用技巧2
1.物件型:以頁面上的某個物件作為 Layout 的容器(父節點);
2.視窗型:以某個視窗 (dhtmlxWindows 系統的成員) 作為 Layout 的父節點;
3.全螢幕:先決條件是Layout 的父節點 "document.body", 在這種情況下,Layout 即佔滿整個頁面;
4.版格型:其父節點是其它 dhtmlxLayout 中的某一版格(cell),這種新建立的 Layout 將被放在其它 Layout 的版格中。
<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檔名稱!
<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