分隔面板

简介

分割面板用于将页面(区域)分割成左右两个区域，左侧区域ID为分隔面板ID + “_LeftSplitPanel”，右侧区域ID为分隔面板ID + “_RightSplitPanel”，用户可以随意调整分割栏的位置。

使用方法

2.1 JS动态创建EAS8.2+

var options = {
    id:"splitPanel",
    shrink:true,
    draggable:true,
    leftWidth:25,
    rightWidth:75,
    style:"height:300px"
};
var parentDom = waf("body");
var dom = waf.createDOM("splitPanel", options);
waf.appendDOM(parentDom, dom);
waf.initComponent("splitPanel", options, dom);

2.2 通用DOM创建EAS8.2+

<div id="mySplitPanel" class="ui-splitPanel ui-columnLayout border-sizing">
    <div id="mySplitPanel_LeftSplitPanel" class="ui-column leftSplitPanel"></div>
    <div id="splitpanel_mySplitPanel" class="ui-column col-splitPanel splitPanelClass ui-draggable">
        <div class="shrink splitShrink-left"><i class="splitIcon f-icon-angle-left"></i></div>
    </div>
    <div id="mySplitPanel_RightSplitPanel" class="ui-column rightSplitPanel"></div>
</div>

var options = {
    id:"mySplitPanel",
    shrink:true,
    draggable:true,
    leftWidth:25,
    rightWidth:75,
    style:"height:300px"
};
<!--DOM创建好之后，使用js初始化控件-->
waf("#mySplitPanel").wafSplitPanel(options);

2.3 方法&事件使用EAS8.2+

//调用方法
waf("#id").wafSplitPanel("method", parameter...);
//eg:方法调用
waf("#id").wafSplitPanel("removeChildren", "xxx");
waf("#id").wafSplitPanel("adjustColumnWidth");
//eg:更改事件
waf("#id").wafSplitPanel("option","afterDragStop",fn);

属性说明

id String 缺省值: null 不可以在运行期改变 EAS8.2+

定义分隔面板容器的id.

style String 缺省值: null EAS8.2+

定义分隔面板容器的样式.

tagClass String 缺省值: null EAS8.2+

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

hidden Boolean 缺省值: false EAS8.2+

定义分隔面板容器是否显示.

split Boolean 缺省值: true 不可以在运行期改变 EAS8.2+

是否增加分隔条

splitClass String 缺省值:”splitpanelClass” EAS8.2+

定义分隔条的样式.

splitWidth String或Integer 缺省值:”1px” EAS8.2+

分隔条的宽度.

leftWidth Integer 缺省值:25 EAS8.2+

分隔面板左侧区域的宽度，整数类型，单位为百分比.

rightWidth Integer 缺省值:75 EAS8.2+

分隔面板右侧区域的宽度，整数类型，单位为百分比.

shrink Boolean 缺省值: true EAS8.2+

分隔条是否可以收缩，如果shrink为true，则会出现向左收缩的图标.

draggable Boolean 缺省值: true EAS8.2+

分隔条是否可以拖动

方法说明

option 参数: (property,value) 返回值类型: 任何类型 EAS8.2+

获得或设置属性值。

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

option 参数: (options) 返回值类型: (undefined) EAS8.2+

对控件多个属性进行一次性设置

参数说明:
- options: 形式如{property:value[,property1:value1,…]}的json对象，用来描述标签的属性和相应的值
返回值说明: 无

事件说明

afterDragStop 参数: (event) EAS8.2+

如果split等于true，并且可以拖动的情况下，拖动完成后的事件处理.

参数说明:
-event: 事件对象

afterShrink 参数: (event) EAS8.2+

如果split等于true，并且shrink设置为true，可以收缩时，收缩完成后的事件处理.

参数说明:
-event: 事件对象

afterInsertSplit 参数: (event) EAS8.2+

如果split等于true，在插入分隔栏后的事件处理.

参数说明:
-event: 事件对象