分隔面板

简介

分割面板用于将页面(区域)分割成左右两个区域,左侧区域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: 事件对象

样例集合

  1. 分隔面板属性
  2. 分隔面板方法
  3. 分隔面板事件
  4. 动态化