现在的位置: 首页 > easyui > Layout > layout > 正文
layout小扩展:设置是否显示region的收缩按钮
2013年04月18日 layout ⁄ 共 2148字 评论数 1 ⁄ 被围观 18,622 views+
文章目录
[隐藏]

需求分析

很多人看layout组件某个region里面的那个收缩按钮不爽,想把它去掉或者隐藏掉。这显然不是一个复杂的问题,懂点jQuery使用的同学都很容易想到思路:根据选择器隐藏按钮对应的DOM就是了。可惜啊,事与愿违,该问题一直有另一个蛋疼的解决方式。

在region内部再加一个panel组件,layout的region不设置标题,panel的标题设置为region的标题以代替region的标题,同时这个panel的fit属性还要设置为true,要知道fit设置为true是很耗性能的,所以我说这个解决方案很蛋疼:

  1. <div class="easyui-layout" style="width:700px;height:350px;">  
  2.     <div data-options="region:'north'" style="height:50px"></div>  
  3.     <div data-options="region:'south',split:true" style="height:50px;"></div>  
  4.     <div data-options="region:'east',split:true" style="width:250px;">  
  5.         <!-- 劳民伤财地再加一个panel组件,而且fit还要设置为true,这意味着又要多一个时时刻刻的监听在运行了 -->  
  6.         <div class="easyui-panel" title="East" data-options="fit:true,border:false">  
  7.             <!-- 这地方放内容 -->  
  8.         </div>  
  9.     </div>  
  10.     <div data-options="region:'center',title:'Main Title',iconCls:'icon-ok'"></div>  
  11. </div>  

我们最初的思路直白而有力,顺着这个思路,我们将其写成一个小的扩展,这样不就很完美了么,没有多余的DOM,没有浪费性能的fit,我们这就来实现一下这个简单的扩展。

实现代码

  1. /**  
  2.  * layout方法扩展  
  3.  */  
  4. $.extend($.fn.layout.methods, {     
  5.     setRegionToolVisableState:function(jq,params){   
  6.         return jq.each(function(){   
  7.             if(params.region=="center")   
  8.                 return;   
  9.             var panels = $.data(this, 'layout').panels;   
  10.             var panel = panels[params.region];   
  11.             var tool = panel.panel('header').find('>div.panel-tool');   
  12.             tool.css({display:params.visible?'block':'none'});   
  13.             var first = params.region.substring(0,1);      
  14.             var others = params.region.substring(1);      
  15.             var expand = 'expand' + first.toUpperCase() + others;     
  16.             if(panels[expand]){   
  17.                 panels[expand].panel('header').find('>div.panel-tool').css({display:params.visible?'block':'none'});   
  18.             }   
  19.         });   
  20.     }   
  21. });  

调用方式

  1. //隐藏   
  2. $('#layout').layout('setRegionToolVisableState',{region:'north',visible:false});   
  3. //显示   
  4. $('#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是否显示收缩按钮。作者有时候做事情有点拖泥带水,既然提供属性了,就应该提供动态设置是否显示收缩按钮的方法,可惜作者偏偏没提供,所以本文扩展的两个方法还是有不少用处的。

目前有 1 条留言 其中:访客:1 条, 博主:0 条

  1. 11111111 : 2016年07月05日14:58:26  -49楼 @回复 回复

    留言是种美德,写点什么… 😉 😈 😈 😡

给我留言

留言无头像?


×