需求分析
很多人看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是否显示收缩按钮。作者有时候做事情有点拖泥带水,既然提供属性了,就应该提供动态设置是否显示收缩按钮的方法,可惜作者偏偏没提供,所以本文扩展的两个方法还是有不少用处的。