文章目录
[隐藏]
在使用layout布局的时候，分割线是经常被使用的，而且分割线内会有一张用于表明该分割线可拖动的标志图片，或者是背景图片。大多现成的UI框架也都考虑到了这一点，用户体验比较好。
easyui layout 却没有提供分割线的图片支持功能，有些美中不足。同时由于easyui layout使用的是border布局方式，分割线其实是div的border，而border是不支持背景图的，扩展起来较麻烦。
要想让easyui layout的split支持图标，还得靠自己使用div去模拟，生成各个region的split对应的图标div，然后给这些div设置背景图片就可以了。
具体思路：
为每一个需要图标的split生成一个div：
因为layout容器使用的绝对定位，所以div的position属性同于region使用绝对定位；同时生成的div的z-index设置为0，即不能覆盖任何一个region，覆盖region的话，就会造成拖动的hover事件无法触发。
将需要split背景图region的border设置为透明：
因为layout内部的region的z-index均设置了大于0的值(插件自身设置的)，所以要想让z-index为0的split背景div显示出来，就得让region的border部分透明。
拖动，resize，collapse，expand时调整split背景div的位置和大小：
因为在region拖动，页面resize，region展开和收缩时均会重画页面，所以我们生成的split背景div也要重新计算位置和大小，甚至隐藏。
参考代码：
layout初始化创建split背景div，并且设置对应region的border透明：
if (pp.attr('split') == 'true') {// pp为具体的region对应的jQuery对象
var panel = pp.panel('panel');
if (pp.attr('splitImg') == 'true') {
$(container).append('<div class=split-img-' + dir + '></div>');
var proxyImg = $('.split-img-' + dir, container);
var splitImgPos = {
'display' : 'block',
'z-index' : 0
};
if (dir == 'north' || dir == 'south') {
splitImgPos.height = 5;
if (dir == 'north') {
$('.layout-split-' + dir).css( {
'border-bottom-color' : 'transparent'
});
} else {
$('.layout-split-' + dir).css( {
'border-top-color' : 'transparent'
});
}
} else {
splitImgPos.width = 5;
if (dir == 'east') {
$('.layout-split-' + dir).css( {
'border-left-color' : 'transparent'
});
} else {
$('.layout-split-' + dir).css( {
'border-right-color' : 'transparent'
});
}
}
proxyImg.css(splitImgPos);
}
}
重新布局页面的时候重新设置splitImg的大小和位置：
...
//split image
var proxyImg = $('.split-img-north', container);
proxyImg.css( {
width : cc.width(),
top : pp.panel('options').height - 5,
left : 0
});
...
// split image
var proxyImg = $('.split-img-south', container);
proxyImg.css( {
width : cc.width(),
left : 0,
top : cc.height() - pp.panel('options').height
});
...
// split image
var proxyImg = $('.split-img-east', container);
proxyImg.css( {
height : cpos.height,
left : cc.width() - pp.panel('options').width,
top : cpos.top
});
...
// split image
var proxyImg = $('.split-img-west', container);
proxyImg.css( {
height : cpos.height,
left : pp.panel('options').width - 5,
top : cpos.top
});
展开/收缩region时也要重新处理splitImg的大小和位置：
...
//收缩时隐藏splitImg hidden the split image
var pp = $('.layout-split-' + region, container);
if (pp.length > 0) {
$('.split-img-' + region, container).css( {
'display' : 'none'
});
}
...
//定义显示splitImg的函数，需要在每次动画完成后调用
function showSplitImage() {
// show the split image
if (pp.length > 0) {
$('.split-img-' + region, container).css( {
'display' : 'block'
});
}
};
...
以上代码只是一个概要，因为不是通过扩展的方式实现，所以也不好全部贴出代码，有兴趣的朋友可以按照我的思路试一下，或者有什么更好的方式一起交流。
使用方式：
为需要split背景的region添加splitImg属性
| Name | Type | Description | Default |
|---|---|---|---|
| splitImg | String | 是否显示split的背景图片 | false |
<div region="north" title="north" border="true" split="true" splitImg="true" style="height:60px;">north region</div>
效果演示：
http://www.easyui.info/easyui/demo/layout/layout_split_image.html
注意事项：
这种处理方式不兼容IE6，因为IE6支持border背景透明，要支持的话，还要针对IE6做滤镜处理。
20120410更新对IE6的支持：
针对IE6，border背景不支持透明，所以要用到IE6的chroma滤镜，同时在初始化panel设置region边框透明的时候，要区别IE6和其它浏览器，所以layout初始化的代码应该改成以下代码：
/**
* 设置REGION边框背景透明
* @param {Object} dir
* @param {Object} container
*/
function __setSplitTrans(dir, container){
var borderRegion = "", borderStylePro = "";
if (dir == "north") {
borderRegion = "border-bottom-color";
borderStylePro = "borderBottomColor";
}
else
if (dir == "south") {
borderRegion = "border-top-color";
borderStylePro = "borderTopColor";
}
else
if (dir == "east") {
borderRegion = "border-left-color";
borderStylePro = "borderLeftColor";
}
else
if (dir == "west") {
borderRegion = "border-right-color";
borderStylePro = "borderRightColor";
}
if ($.browser.msie && ($.browser.version == "6.0") && !$.support.style) {
//如果是IE6，先设置边框颜色为不常用的#B8B8B8
$('.layout-split-' + dir, container)[0].style[borderStylePro] = '#B8B8B8';
//然后用chroma滤镜将#B8B8B8颜色过滤掉，达到透明的效果。
$('.layout-split-' + dir, container)[0].style.filter = 'chroma(color="#B8B8B8")';
}
else {
//非IE6浏览器直接设置边框背景透明就可以了。
var transferCss = {};
transferCss[borderRegion] = 'transparent';
$('.layout-split-' + dir).css(transferCss);
}
};
if (pp.attr('split') == 'true') {
var panel = pp.panel('panel');
if (pp.attr('splitImg') == 'true') {
//创建拖动图片DIV
$(container).append('<div class=split-img-' + dir + '></div>');
var proxyImg = $('.split-img-' + dir, container);
//z-index设置为0，低于所有region的z-index值
var splitImgPos = {
'display': 'block',
'z-index': 0
};
if (dir == 'north' || dir == 'south') {
splitImgPos.height = 5;
}
else {
splitImgPos.width = 5;
}
__setSplitTrans(dir, container)
proxyImg.css(splitImgPos);
}
//以下省略layout自身的若干代码
}
