在使用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自身的若干代码 }