自己开发的web快速开发平台教程(1)，布局(Layout)的使用教程

在web开发中，布局很重要，也是界面开发的基础。大概就是要解决一些，顶部放一个div，左边放二个table，底端放一个版权说明；怎么让二个div或三个div并排等等的问题。

平台的布局就是解决这些问题的，方便开发者进行页面规划，零代码解决这类问题。

平台的布局特点：
  >>支持多种布局格式，如下图，顶上的字母，就是布局分区的格式，如2E，分成上下二个cell。

 

 >>支持布局欠套，布局中可以无限欠套子布局。由此可知，2E,2U这二个布局，可以组合成任意复杂的布局。

 >>布局可以加载页面table,div,span等任意dom对象，也可以加载url。如3E这个布局，顶层可以放百度，中间可以放谷歌，底层可以放一个表单(form)。根据你的业务需要。

 >>上百个api函数支持。如设置布局title，布局高、宽，事件自定义扩展等等。

下面是实例教程：

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="/WEB-INF/bl_tag.tld" prefix="BL"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base >
        <BL:RootBase id="blRoot" valid_login="false"></BL:RootBase>
    <title></title>

  </head>
  <body id="body_layout">
 
  <div id="demo_div" >
  您的大名：	<input type="text" style="width: 90px">
  </div>
  <BL:Layout patterns="3E" parentid="body_layout" id="p" init_layout_jslib="true">
  	<BL:LayoutItem id="a1" parent_layout_id="p" title="链接到百度" url="http://www.baidu.com" parent_layout_cell="a" statusbar="<font color=red>这是</font>状态栏a"></BL:LayoutItem>
  	<BL:LayoutItem id="b1" parent_layout_id="p" title="链接到17173.com" url="http://www.17173.com" parent_layout_cell="b"></BL:LayoutItem>
  	<BL:LayoutItem id="c1" parent_layout_id="p" title="<font color=red>加载</font>页面的一个div" object_id="demo_div" parent_layout_cell="c"></BL:LayoutItem>
  </BL:Layout>	  
  </body>
</html>

参数说明：

>>这是一个jsp页面布局的全部代码。

 

<BL:Layout

　>布局设置开始

patterns="3E"

   >设置要构建一个上中下三层的布局框架

parentid="body_layout"

   >设置layout所依附父容器的id，这里指定的是body。可以按需要设置父容器，比较常用的是div，设置此参数后，layout就在此父容器内构建指定的布局框架。

id="p"

   >设置此layout的id，如果有业务需要，后面页面的js代码，可以通过此id来引用layout对象。

init_layout_jslib="true"

   >初始化加布局ui的js库

    

      <BL:LayoutItem

                 >布局单元格设置开始            

           id="a1"

                 >设置布局单元格id，后面页面的js代码，可以通过此id来引用layout的单元格对象。

           parent_layout_id="p"

                 >设置所在父布局的id，这里例子是p

           title="链接到百度" 

                 >设置布局单元格的title，支持html的语法，见例子的底层单元格title设置，即你可以放些小图标，改变字体颜色，风格什么的。

           url="http://www.baidu.com"

                 >>设置布局单元格的url ，加载dom对象的话，用属性 object_id

           object_id="demo_div"

　　　　 >设置要加载的dom对象，这里例子是demo_div     　

           statusbar="<font color=red>这是</font>状态栏a"

　　　　 >设置单元格的状态栏，可以使用html的语法，即你可以放些小图标，改变字体颜色，风格什么的。

            

      </BL:LayoutItem>

                >布局成员设置结束

</BL:Layout>

     >布局设置结束

最后的界面效果图

如果要改变布局为3T，则效果如下图：

布局欠套：

  	<BL:LayoutItem id="c1" append_layout="true" patterns="3T" parent_layout_id="p" title="<font color=red>加载</font>页面的一个div" parent_layout_cell="c">
		 <BL:LayoutItem id="a2" parent_layout_id="c1" title="子布局" object_id="demo_div" parent_layout_cell="a"></BL:LayoutItem>
  	</BL:LayoutItem>

有二个属性   

         append_layout="true"

                >设置追加子布局

          patterns="3T"

                 >布局的格式，这里也是一个3T的造型

效果如下图

其他的一些api：以这个例子为例

layout_p.cells('a').setHeight(200);    //设置单元格a的高度为200

layout_p.cells('a').attachURL('http://www.163.com');  //改变单元格a的url

等