在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
等