easyui layout折叠后显示标题 的增强

阅读更多

layout折叠后显示标题 请参照夏悸老大的博客

但本人在使用过程中遇到了一个问题，如果layout中的region设置了collapsible：true,即初始化时面板是折叠的，则无法正常显示title，为此在原作者的方案基础上进行了补强。

源码中的_39d(dir)改为_39d(dir,_title)，传入title,
源码中4901 - 4903行

var _39c="expand"+_398.substring(0,1).toUpperCase()+_398.substring(1);
if(!_39a[_39c]){
_39a[_39c]=_39d(_398);

改为

var _39c="expand"+_398.substring(0,1).toUpperCase()+_398.substring(1);
var _title =  _39b.title?_39b.title:" "
if(!_39a[_39c]){
_39a[_39c]=_39d(_398,_title);

源码中的4931 - 4951行

function _39d(dir){
var icon;
if(dir=="east"){
icon="layout-button-left";
}else{
if(dir=="west"){
icon="layout-button-right";
}else{
if(dir=="north"){
icon="layout-button-down";
}else{
if(dir=="south"){
icon="layout-button-up";
}
}
}
}
var p=$("
").appendTo(_397);
p.panel($.extend({},$.fn.layout.paneldefaults,{cls:("layout-expand layout-expand-"+dir),title:" ",closed:true,minWidth:0,minHeight:0,doSize:false,tools:[{iconCls:icon,handler:function(){
_3a6(_397,_398);
return false;

改为

function _39d(dir,_title){
var icon;
if(dir=="east"){
icon="layout-button-left";
}else{
if(dir=="west"){
icon="layout-button-right";
}else{
if(dir=="north"){
icon="layout-button-down";
}else{
if(dir=="south"){
icon="layout-button-up";
}
}
}
}
var p=$("
").appendTo(_397);
p.panel($.extend({},$.fn.layout.paneldefaults,{cls:("layout-expand layout-expand-"+dir),title:_title,closed:true,minWidth:0,minHeight:0,doSize:false,tools:[{iconCls:icon,handler:function(){
_3a6(_397,_398);
return false;

原扩展增加了expandPanel.panel("setTitle", " ");恢复原状

//在layout的panle全局配置中,增加一个onCollapse处理title
$.extend($.fn.layout.paneldefaults, {
    onCollapse : function(){
        //获取layout容器
    	var layout = $(this).parents("body.layout");
	if(layout.length == 0) layout = $(this).parents("div.layout");
        //获取当前region的配置属性
        var opts = $(this).panel("options");
        //获取key
        var expandKey = "expand" + opts.region.substring(0, 1).toUpperCase() + opts.region.substring(1);
        //从layout的缓存对象中取得对应的收缩对象
        var expandPanel = layout.data("layout").panels[expandKey];
        //针对横向和竖向的不同处理方式
        if (opts.region == "west" || opts.region == "east") {
            //竖向的文字打竖,其实就是切割文字加br
        	if(opts && opts.title){
        		 var split = [];
                 for (var i = 0; i < opts.title.length; i++) {
                     split.push(opts.title.substring(i, i + 1));
                 }
                 if(expandPanel){
                      expandPanel.panel("setTitle", " ");
                     expandPanel.panel("body").addClass("panel-title").css("text-align", "center").html(split.join("
"));
                 }
        	}
        } else {
        	if(expandPanel){
        		expandPanel.panel("setTitle", opts.title);
        	}
        }
    }
});

这段代码是基于easyui1.4,解决了面板初始化时collapsed无法显示title的问题，其他版本没做测试