需求分析
很多人看layout组件某个region里面的那个收缩按钮不爽，想把它去掉或者隐藏掉。这显然不是一个复杂的问题，懂点jQuery使用的同学都很容易想到思路：根据选择器隐藏按钮对应的DOM就是了。可惜啊，事与愿违，该问题一直有另一个蛋疼的解决方式。
在region内部再加一个panel组件，layout的region不设置标题，panel的标题设置为region的标题以代替region的标题，同时这个panel的fit属性还要设置为true，要知道fit设置为true是很耗性能的，所以我说这个解决方案很蛋疼：
- <div class="easyui-layout" style="width:700px;height:350px;">
- <div data-options="region:'north'" style="height:50px"></div>
- <div data-options="region:'south',split:true" style="height:50px;"></div>
- <div data-options="region:'east',split:true" style="width:250px;">
- <!-- 劳民伤财地再加一个panel组件，而且fit还要设置为true，这意味着又要多一个时时刻刻的监听在运行了 -->
- <div class="easyui-panel" title="East" data-options="fit:true,border:false">
- <!-- 这地方放内容 -->
- </div>
- </div>
- <div data-options="region:'center',title:'Main Title',iconCls:'icon-ok'"></div>
- </div>
我们最初的思路直白而有力，顺着这个思路，我们将其写成一个小的扩展，这样不就很完美了么，没有多余的DOM，没有浪费性能的fit，我们这就来实现一下这个简单的扩展。
实现代码
- /**
- * layout方法扩展
- */
- $.extend($.fn.layout.methods, {
- setRegionToolVisableState:function(jq,params){
- return jq.each(function(){
- if(params.region=="center")
- return;
- var panels = $.data(this, 'layout').panels;
- var panel = panels[params.region];
- var tool = panel.panel('header').find('>div.panel-tool');
- tool.css({display:params.visible?'block':'none'});
- var first = params.region.substring(0,1);
- var others = params.region.substring(1);
- var expand = 'expand' + first.toUpperCase() + others;
- if(panels[expand]){
- panels[expand].panel('header').find('>div.panel-tool').css({display:params.visible?'block':'none'});
- }
- });
- }
- });
调用方式
- //隐藏
- $('#layout').layout('setRegionToolVisableState',{region:'north',visible:false});
- //显示
- $('#layout').layout('setRegionToolVisableState',{region:'north',visible:true});
效果演示
http://www.easyui.info/easyui/demo/layout/setRegionTool.html.html
更新日志
2013-08-14
从1.3.3版本开始layout组件新增了collapsible属性，用于设置region是否显示收缩按钮。作者有时候做事情有点拖泥带水，既然提供属性了，就应该提供动态设置是否显示收缩按钮的方法，可惜作者偏偏没提供，所以本文扩展的两个方法还是有不少用处的。
留言是种美德，写点什么… 😉 😈 😈 😡