现在的位置: 首页 > easyui > Layout > layout > 正文
为 easyui layout split 增加拖动图片
2012年03月15日 layout ⁄ 共 4782字 评论数 1 ⁄ 被围观 10,667 views+
文章目录
[隐藏]

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

目前有 1 条留言 其中:访客:0 条, 博主:0 条 引用: 1

    给我留言

    留言无头像?


    ×