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 前端框架 建立你的一个应用程序教程(二)--设置布局的更多相关文章

  1. DHTMLX 前端框架 建立你的一个应用程序 教程(十一)--添加/删除表格中的记录

    添加/删除表格中的记录 我们的最终功能是在表格中添加删除 我们通过单机工具栏上的按钮来实现添加删除 当我们单击添加按钮的时候, 表单中 第一行默认填写New contact 光标自动聚焦 当用户点击删 ...

  2. DHTMLX 前端框架 建立你的一个应用程序教程(一)

    介绍 从这里下载官网 示例 此教程包含是多方面的: 1.如何在页面上添加标准的dhtmlx组建 2.如何在页面上组织组件 3.如何添加过滤 4.如何从服务器端获取数据填充组建 5.如何保存用户修改的数 ...

  3. DHTMLX 前端框架 建立你的一个应用程序 教程(六)-- 表格加载数据

    从数据库加载数据 这篇我们介绍从MySQL数据库中加载数据到表格 我们使用 MySql的数据库dhtmlx_tutorial 和表contacts 示例使用的是PHP平台和dhtmlxConnecto ...

  4. DHTMLX 前端框架 建立你的一个应用程序教程(三)--添加一个菜单

    菜单的介绍 这篇我们介绍将菜单组建添加到上节中的布局中: 我们不对菜单做任何处理  只是在这里填充作为界面的一部分. 这里我们介绍的是dhtmlxMenu 组件. 这个组件的数据我们可以从XML或者J ...

  5. DHTMLX 前端框架 建立你的一个应用程序 教程(十)--保存表单中的数据

    保存表单中的数据 现在我们所要做的是 当用户点击提交按钮的时候  我们将表单中的数据进行保存操作. 我们可以使用dhtmlxDataProcessor. 来进行操作.它是一个数据组件,可以提供与服务器 ...

  6. DHTMLX 前端框架 建立你的一个应用程序 教程(九)--绑定表单Form到表格Grrid中

    绑定表单Form到表格Grrid中 现在我们需要选中一行表格数据的时候 数据能在表单中显示出来 我们可以使用DHTMLX 丰富的组件功能实现它. 绑定表单到表格 1.调用bind方法将表单绑定到网格, ...

  7. DHTMLX 前端框架 建立你的一个应用程序 教程(八)-- 添加表单Form

    添加表单Form 我们下一步是在页面中添加一个表单,表格中的选中字段将会显示在表单中.提供一个提交按钮 可以对显示的数据进行修改提交. 添加表单到布局单元格中 1.在右侧布局中使用attachForm ...

  8. DHTMLX 前端框架 建立你的一个应用程序 教程(七)-- 添加筛选功能

    表格的过滤筛选 我们在每列第一行添加一个文本,用做数据的条件筛选. 我们还提供服务端的筛选 ,当有大量数据时 , 我们可以使用dhtmlxConnector 进行后台数据的筛选. 添加过滤器到表格列中 ...

  9. DHTMLX 前端框架 建立你的一个应用程序 教程(五)--添加一个表格Grid

    表格例子 样本如下: 我们这篇介绍的是dhtmlxGrid  组件. 它支持4种数据格式:XML, JSON, CSV, JSArray. 添加表格到布局的单元格中去: 1.使用attachGrid( ...

随机推荐

  1. maven搭建个人仓库

    Maven环境搭建: 本地仓库+maven运行环境+构建项目 1.搭建nexus 本地仓库 1)拷贝jdk1.6和tomcat62)配置端口为8010 (端口自行定义,只要下面各处一致即可)3)复制n ...

  2. 【转】性能测试设计和LR原理的探讨

    做了4个迭代的性能测试, 在没有需求的情况下步步艰辛,把代码和框架独立开发从0到一万多行代码的测试工具(脚本),作为性能测试工具佼佼者Lr,我时而拿他作参考,山寨了它很多 东西,同时带有很多疑问对它实 ...

  3. 不需要软件让Windows7变身WIFI热点

    很简单,就是把一台装有windows 7操作系统,并配有无线网卡的电脑变成一台无线路由器或无线AP,以便在没有路由器的环境中实现多台无线终端(比如支持wifi的手机.电脑等设备)共享无线网络.那么我们 ...

  4. NUnit使用详解（二）

    转载:http://hi.baidu.com/grayworm/item/39aa11c5d9375d56bdef6990 五:常用断言 在NUnit中,断言是单元测试的核心.NUnit提供了一组丰富 ...

  5. JavaScript之数据类型

    1. 种类 5种基本类型:Number.String.Null.Undefined.Boolean 1种对象类型:Object(Function.Array.Date) 特别注意:当把基本类型尝试以对 ...

  6. Deep Learning 学习随记（三）续 Softmax regression练习

    上一篇讲的Softmax regression,当时时间不够,没把练习做完.这几天学车有点累,又特别想动动手自己写写matlab代码 所以等到了现在,这篇文章就当做上一篇的续吧. 回顾: 上一篇最后给 ...

  7. ReactiveCocoa 入门学习 （一）

    引言 现在由于需求的不断发展,MVC这个经典的框架由于Controller的任务越来越多,显得"臃肿"了,网上又推出了新的框架,比如MVVM,ReactiveCocoa, 今天就来 ...

  8. Spring配置，JDBC数据源及事务

    <?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.sp ...

  9. _itoa_s, _i64toa_s, _ui64toa_s, _itow_s, _i64tow_s, _ui64tow_s

    Converts an integer to a string. These are versions of _itoa, _i64toa, _ui64toa, _itow, _i64tow, _ui ...

  10. ASP.Net大文件上传组件详解

    首先右键单击网站根目录,在弹出的快捷菜单中,选择"添加引用"菜单项,弹出"添加引用",切换到"浏览"找到组件的Dll文件"Best ...