列布局

简介

列布局主要用于构造页面布局,在FORM中如果需要对齐也经常会使用列布局控件,列布局控件实现的功能包括设置列的百分比,设置列是否等高,拖动,收缩,最大化等。列布局具有自适应,多浏览器支持等特性。


使用方法

2.1、 静态框架使用方法仅EAS7.5版本
<wafctrl:columnLayout id="id" name="name" />
2.2、 JS动态创建EAS8.0+
var options={id:"panel_cs"}
var dom = waf.createDOM("panel", options);
waf.appendDOM(waf("body"), dom);
waf.initComponent("panel", options, dom);
waf("#panel_cs").addClass("ui-columnLayout");
var dom = waf.createDOM("column", {id:"column_cs"});
waf("#panel_cs").wafPanel("appendChildren",dom);
2.3、 通用DOM创建EAS8.0+
<div id="column" ctrlrole="column" class="ui-column border-sizing span4" data-domcreated="true"></div>
<!--DOM创建好之后,使用js初始化控件-->
waf(columnLayout).wafColumn(options);
2.4、 方法&事件使用EAS7.5+
//eg:获取和设置值
waf("#id").wafColumn('option', parameter,value);
//eg:更改事件
waf("#id").wafColumn("option","afterDragStop",fn);

属性说明

id String 缺省值: null EAS7.5+

定义面板容器的id.

style String 缺省值: null EAS7.5+

定义面板容器的样式.

tagClass String 缺省值: null EAS7.5+

定义面板容器样式类,可以添加一个或多个.

hidden Boolean 缺省值: false EAS7.5+

定义面板容器是否显示.

colWidth String (缺省值: 100%) 不可以在运行期改变EAS8.0-

定义列控件的宽度,值必须为百分比,如果只输入了数字,会默认增加百分号。从8.2开始已不支持,相似功能可采用splitPanel控件

equalizeBoolean (缺省值: false) 不可以在运行期改变EAS8.0-

定义列控件是否等高。注意,如果设置了equalize=true,但在运行期又需要把它设置为false,默认会将列的高度设置为auto.如果需要设置为固定高度,请重新设置height属性.从8.2开始已不支持,相似功能可采用splitPanel控件

autoMaxBoolean (缺省值: false) 不可以在运行期改变 EAS8.0-

定义当前列布局是否自动最大化,一般可用于整个界面的布局.
如果设置为true,列布局的高度等于他的父亲容器的高度减去和他评级的其他兄弟姐妹的元素高度之和,也就是根据他父亲容器的高度自动扩展.从8.2开始已不支持,相似功能可采用splitPanel控件

split Boolean (缺省值: false) 不可以在运行期改变 EAS8.0-

定义是否当前列前面插入一个分割栏.如果split=true,会在此列的前方自动的插入一个split分隔栏.从8.2开始已不支持,相似功能可采用splitPanel控件

draggable Boolean (缺省值: false) 不可以在运行期改变EAS8.0-

定义是否分隔栏是否可以拖动.从8.2开始已不支持,相似功能可采用splitPanel控件

shrink Boolean (缺省值: false) 不可以在运行期改变 EAS8.0-

定义在运行拖动的情况下,是否可收缩。此条件如果想生效,需设置split=true。如果shrink为true,则会出现向左收缩的箭头.从8.2开始已不支持,相似功能可采用splitPanel控件

splitClass String (缺省值:splitpanelClass) 不可以在运行期改变 EAS8.0-

定义分割条的样式.从8.2开始已不支持,相似功能可采用splitPanel控件

layout String 缺省值: null EAS8.0-

定义列布局里面换件的排版.从8.2开始已不支持,相似功能可采用splitPanel控件


方法说明

option 参数: (property,value) 返回值类型: 空或属性对应的值 EAS7.5+

获得或设置属性值。

  • 参数说明:
            - property指属性名
            - value为空或新值
  • 返回值说明:
            - value为空时,返回该属性的值,当不为空时,设置该属性的值为value

事件说明

afterDragStop 参数: (event) EAS7.5+

如果split等于true,并且可以拖动的情况下,拖动完成后的事件处理. 从8.2开始已不支持,相似功能可采用splitPanel控件

  • 参数说明:
            - event对象

afterShrink 参数: (event) EAS7.5+

如果split等于true,并且shrink设置为true,可以收缩时,收缩完成后的事件处理. 从8.2开始已不支持,相似功能可采用splitPanel控件

  • 参数说明:
            - event对象

afterShrink 参数: (event) EAS7.5+

如果split等于true,在插入分隔栏后的事件处理. 从8.2开始已不支持,相似功能可采用splitPanel控件

  • 参数说明:
            - event对象

样例集合

<!–1. 基本用法

  1. 列等高:
  2. 列布局嵌套:
    –>
  3. 自适应:
  4. 拖动调整:
  5. 12栅格:
    <!–8. 列布局与Form对齐:
  6. 类网格布局:
    –>
  7. Panel动态化:
  8. 列布局动态化: