easyui layout 折叠之后显示标题

方法一:重载扩展panel收缩事件

(function($){
 var buttonDir = {north:'down',south:'up',east:'left',west:'right'};
    $.extend($.fn.layout.paneldefaults,{
        onBeforeCollapse:function(){
            /**/
            var popts = $(this).panel('options');
            var dir = popts.region;
            var btnDir = buttonDir[dir];
            if(!btnDir) return false;
 
            setTimeout(function(){
                var pDiv = $('.layout-button-'+btnDir).closest('.layout-expand').css({
                    textAlign:'center',lineHeight:'18px',fontWeight:'bold'
                });
 
                if(popts.title){
                    var vTitle = popts.title;
                    if(dir == "east" || dir == "west"){
                        var vTitle = popts.title.split('').join('<br/>');
                        pDiv.find('.panel-body').html(vTitle);
                    }else{
                        $('.layout-button-'+btnDir).closest('.layout-expand').find('.panel-title')
                        .css({textAlign:'left'})
                        .html(vTitle)
                    }
                     
                }   
            },100);
             
        }
    });
})(jQuery);

方法二:修改easyui源码

 这种方法参考了网上1.4版本的。我这里是1.5.4.1版本。

修改5478行处方法function _3ed(dir)为 _3ed(dir,_title),传入title,
该方法里面5483行,修改 p.panel($.extend({},$.fn.layout.paneldefaults,{cls:("layout-expand layout-expand-"+dir),title:"&nbsp;",
设置titlte为传入的值 p.panel($.extend({},$.fn.layout.paneldefaults,{cls:("layout-expand layout-expand-"+dir),title:"&nbsp;",

在5439行调用时_3ea[_3ec]=_3ed(_3e8,_3eb.title);传入 title。不过这种方式显示上有问题,在收缩方式为 "east""west"时显示范围很小,可以参考第一种方法把title内容显示在.panel-body容器内。

 

posted @ 2018-03-11 21:55  coolsundy  阅读(367)  评论(0编辑  收藏  举报