列布局主要用于构造页面布局,在FORM中如果需要对齐也经常会使用列布局控件,列布局控件实现的功能包括设置列的百分比,设置列是否等高,拖动,收缩,最大化等。列布局具有自适应,多浏览器支持等特性。
<wafctrl:columnLayout id="id" name="name" />
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);
<div id="column" ctrlrole="column" class="ui-column border-sizing span4" data-domcreated="true"></div>
<!--DOM创建好之后,使用js初始化控件-->
waf(columnLayout).wafColumn(options);
//eg:获取和设置值
waf("#id").wafColumn('option', parameter,value);
//eg:更改事件
waf("#id").wafColumn("option","afterDragStop",fn);
定义面板容器的id.
定义面板容器的样式.
定义面板容器样式类,可以添加一个或多个.
定义面板容器是否显示.
定义列控件的宽度,值必须为百分比,如果只输入了数字,会默认增加百分号。从8.2开始已不支持,相似功能可采用splitPanel控件
定义列控件是否等高。注意,如果设置了equalize=true,但在运行期又需要把它设置为false,默认会将列的高度设置为auto.如果需要设置为固定高度,请重新设置height属性.从8.2开始已不支持,相似功能可采用splitPanel控件
定义当前列布局是否自动最大化,一般可用于整个界面的布局.
如果设置为true,列布局的高度等于他的父亲容器的高度减去和他评级的其他兄弟姐妹的元素高度之和,也就是根据他父亲容器的高度自动扩展.从8.2开始已不支持,相似功能可采用splitPanel控件
定义是否当前列前面插入一个分割栏.如果split=true,会在此列的前方自动的插入一个split分隔栏.从8.2开始已不支持,相似功能可采用splitPanel控件
定义是否分隔栏是否可以拖动.从8.2开始已不支持,相似功能可采用splitPanel控件
定义在运行拖动的情况下,是否可收缩。此条件如果想生效,需设置split=true。如果shrink为true,则会出现向左收缩的箭头.从8.2开始已不支持,相似功能可采用splitPanel控件
定义分割条的样式.从8.2开始已不支持,相似功能可采用splitPanel控件
定义列布局里面换件的排版.从8.2开始已不支持,相似功能可采用splitPanel控件
获得或设置属性值。
如果split等于true,并且可以拖动的情况下,拖动完成后的事件处理. 从8.2开始已不支持,相似功能可采用splitPanel控件
如果split等于true,并且shrink设置为true,可以收缩时,收缩完成后的事件处理. 从8.2开始已不支持,相似功能可采用splitPanel控件
如果split等于true,在插入分隔栏后的事件处理. 从8.2开始已不支持,相似功能可采用splitPanel控件
<!–1. 基本用法: