標籤：des style blog http color io ar java for
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);
});
然後查看我們的效果：
DHTMLX 前端架構 建立你的一個應用程式教程(二)--設定布局
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
