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:" ", 设置titlte为传入的值 p.panel($.extend({},$.fn.layout.paneldefaults,{cls:("layout-expand layout-expand-"+dir),title:" ", 在5439行调用时_3ea[_3ec]=_3ed(_3e8,_3eb.title);传入 title。不过这种方式显示上有问题,在收缩方式为 "east" 或"west"时显示范围很小,可以参考第一种方法把title内容显示在.panel-body容器内。