分割面板用于将页面(区域)分割成左右两个区域,左侧区域ID为分隔面板ID + “_LeftSplitPanel”,右侧区域ID为分隔面板ID + “_RightSplitPanel”,用户可以随意调整分割栏的位置。
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);
<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);
//调用方法
waf("#id").wafSplitPanel("method", parameter...);
//eg:方法调用
waf("#id").wafSplitPanel("removeChildren", "xxx");
waf("#id").wafSplitPanel("adjustColumnWidth");
//eg:更改事件
waf("#id").wafSplitPanel("option","afterDragStop",fn);
定义分隔面板容器的id.
定义分隔面板容器的样式.
定义分隔面板容器样式类,可以添加一个或多个.
定义分隔面板容器是否显示.
是否增加分隔条
定义分隔条的样式.
分隔条的宽度.
分隔面板左侧区域的宽度,整数类型,单位为百分比.
分隔面板右侧区域的宽度,整数类型,单位为百分比.
分隔条是否可以收缩,如果shrink为true,则会出现向左收缩的图标.
分隔条是否可以拖动
获得或设置属性值。
对控件多个属性进行一次性设置
如果split等于true,并且可以拖动的情况下,拖动完成后的事件处理.
如果split等于true,并且shrink设置为true,可以收缩时,收缩完成后的事件处理.
如果split等于true,在插入分隔栏后的事件处理.