Layout控件的演示
Dhtmlx有很多的组建来组织网页的建设, 这篇主要介绍dhtmlxLayout 。 下面图片中 布局将各个组件(1.Menu 2.Toolbar 3.Grid 4.Form 表单)划分到不同的区域。
设置布局：
1.初始化一个布局用dhtmlXLayoutObject()
在index.html添加如下代码：
<!DOCTYPE html> <html> <head> <title>Contact Manager</title> <script src="codebase/dhtmlx.js" type="text/javascript"></script> <link rel="stylesheet" type="text/css" href="codebase/dhtmlx.css"> </head> <body> <script type="text/javascript"> dhtmlxEvent(window,"load",function(){
var layout = new dhtmlXLayoutObject(document.body,"2U");
});
</script> </body> </html>
上面这个布局的构造函数有两个参数 一个是html的布局容器 一个是布局的参数 2u
下面来看看布局的默认几种参数：
2.给页面添加以下样式 确保布局的全屏模式
<style> html, body { width: 100%; /*provides the correct work of a full-screen layout*/ height: 100%; /*provides the correct work of a full-screen layout*/ overflow: hidden; /*hides the default body's space*/ margin: 0px; /*hides the body's scrolls*/ } </style>
3. 用setText() 方法来设置布局单元格的标题 在index js中添加
dhtmlxEvent(window,"load",function(){ var layout = new dhtmlXLayoutObject(document.body,"2U"); layout.cells("a").setText("Contacts");
layout.cells("b").setText("Contact Details");
});
dhtmlXLayout API包含了两方面 一个是dhtmlXLayout对象的API 另一个是dhtmlXLayout 单元格的API
4.用setWidth() 方法来设置布局单元格的宽度
dhtmlxEvent(window,"load",function(){ var layout = new dhtmlXLayoutObject(document.body,"2U"); layout.cells("a").setText("Contacts"); layout.cells("b").setText("Contact Details"); layout.cells("b").setWidth(500);
});
然后查看我们的效果：
