现在的位置: 首页 > easyui > Layout > layout > 正文
小 中 大
增加layout的方法，支持动态隐藏显示块
2012年02月01日 ⁄ layout ⁄ 共 4157字 ⁄ 评论数 11 ⁄ 被围观 20,913 views+
文章目录
[隐藏]

在上一篇文章中，我们对jQuery easyui layout 自适应的内部方法setSize做了改进，在此基础上，为layout增加一个用于显示或者隐藏某个region的方法已经变得较为容易了，索性就去实现一下(本扩展适用于1.3.0以及更高版本):

实现步骤：

1.首先是修正resize存在的不足：

详情见：http://www.easyui.info/archives/92.html

扩展我们想要的两个方法：
 
  1. /**  
  2.  * layout方法扩展  
  3.  * @param {Object} jq  
  4.  * @param {Object} region  
  5.  */  
  6. $.extend($.fn.layout.methods, {   
  7.     /**  
  8.      * 面板是否存在和可见  
  9.      * @param {Object} jq  
  10.      * @param {Object} params  
  11.      */  
  12.     isVisible: function(jq, params) {   
  13.         var panels = $.data(jq[0], 'layout').panels;   
  14.         var pp = panels[params];   
  15.         if(!pp) {   
  16.             return false;   
  17.         }   
  18.         if(pp.length) {   
  19.             return pp.panel('panel').is(':visible');   
  20.         } else {   
  21.             return false;   
  22.         }   
  23.     },   
  24.     /**  
  25.      * 隐藏除某个region，center除外。  
  26.      * @param {Object} jq  
  27.      * @param {Object} params  
  28.      */  
  29.     hidden: function(jq, params) {   
  30.         return jq.each(function() {   
  31.             var opts = $.data(this, 'layout').options;   
  32.             var panels = $.data(this, 'layout').panels;   
  33.             if(!opts.regionState){   
  34.                 opts.regionState = {};   
  35.             }   
  36.             var region = params;   
  37.             function hide(dom,region,doResize){   
  38.                 var first = region.substring(0,1);   
  39.                 var others = region.substring(1);   
  40.                 var expand = 'expand' + first.toUpperCase() + others;   
  41.                 if(panels[expand]) {   
  42.                     if($(dom).layout('isVisible', expand)) {   
  43.                         opts.regionState[region] = 1;   
  44.                         panels[expand].panel('close');   
  45.                     } else if($(dom).layout('isVisible', region)) {   
  46.                         opts.regionState[region] = 0;   
  47.                         panels[region].panel('close');   
  48.                     }   
  49.                 } else {   
  50.                     panels[region].panel('close');   
  51.                 }   
  52.                 if(doResize){   
  53.                     $(dom).layout('resize');   
  54.                 }   
  55.             };   
  56.             if(region.toLowerCase() == 'all'){   
  57.                 hide(this,'east',false);   
  58.                 hide(this,'north',false);   
  59.                 hide(this,'west',false);   
  60.                 hide(this,'south',true);   
  61.             }else{   
  62.                 hide(this,region,true);   
  63.             }   
  64.         });   
  65.     },   
  66.     /**  
  67.      * 显示某个region，center除外。  
  68.      * @param {Object} jq  
  69.      * @param {Object} params  
  70.      */  
  71.     show: function(jq, params) {   
  72.         return jq.each(function() {   
  73.             var opts = $.data(this, 'layout').options;   
  74.             var panels = $.data(this, 'layout').panels;   
  75.             var region = params;   
  76.   
  77.             function show(dom,region,doResize){   
  78.                 var first = region.substring(0,1);   
  79.                 var others = region.substring(1);   
  80.                 var expand = 'expand' + first.toUpperCase() + others;   
  81.                 if(panels[expand]) {   
  82.                     if(!$(dom).layout('isVisible', expand)) {   
  83.                         if(!$(dom).layout('isVisible', region)) {   
  84.                             if(opts.regionState[region] == 1) {   
  85.                                 panels[expand].panel('open');   
  86.                             } else {   
  87.                                 panels[region].panel('open');   
  88.                             }   
  89.                         }   
  90.                     }   
  91.                 } else {   
  92.                     panels[region].panel('open');   
  93.                 }   
  94.                 if(doResize){   
  95.                     $(dom).layout('resize');   
  96.                 }   
  97.             };   
  98.             if(region.toLowerCase() == 'all'){   
  99.                 show(this,'east',false);   
  100.                 show(this,'north',false);   
  101.                 show(this,'west',false);   
  102.                 show(this,'south',true);   
  103.             }else{   
  104.                 show(this,region,true);   
  105.             }   
  106.         });   
  107.     }   
  108. });  

调用方法：

 
  1. $('#wrap').layout('hidden',region);   
  2. $('#wrap').layout('show',region);   
  3. $('#wrap').layout('hidden',"all");   
  4. $('#wrap').layout('show',"all");  

注：isVisible和setSize函数是layout的内部函数，压缩文件中已经不是这两个名称，稍微分析可以定位出来，定位不出来的同学可以参照我博客上已经改好的jquery.easyui.min.js文件(请在演示页面中抓取)。

效果演示：

最终调用效果，请看这里，欢迎大家提出更好的解决方案，或者发现什么bug，请在评论中反馈。

返回

作者:

【上篇】
【下篇】

您可能还会对这些文章感兴趣！

  1. layout小扩展:设置是否显示region的收缩按钮
  2. layout小扩展:四个实用功能的扩展实现方式
  3. Layout小扩展:提供增删region头部方法
  4. 让easyui layout的fit属性留有余地
  5. 扩展layout的方法，支持动态添加删除块
  6. jQuery EasyUI 1.4 layout组件面板resize事件在IE6-
  7. layout小扩展:设置是否显示region的收缩按钮
  8. layout小扩展:四个实用功能的扩展实现方式
事件冒泡引起的tabs组件二次请求
jQuery EasyUI Datagrid性能优化专题
jQuery Easyui 1.3.2版本即将发布
浅析jQuery EasyUI响应式布局的实现方案

目前有 11 条留言 其中：访客:5 条, 博主:4 条 引用: 2

  1. 完全不老哥 : 2013年05月03日14:30:53  -49楼 @回复 回复

    为什么 我用你的代码不能实现功能呢 只是隐藏了但是样式没有自适应大小

  2. 小时候我可狠了 : 2013年08月29日22:42:32  -48楼 @回复 回复

    看了代码 很好也实现了功能 想问下 比如我隐藏north[高度50]的时候 能不能只隐藏高度40 留下10像素用来重新显示north呢


    • 管理员       世纪之光 : 2013年08月30日09:27:51  地下1层 @回复 回复

      这个就回到原点了吧，如果你想留一部分用于重新显示被隐藏的region的话，你还不如直接用官方提供的collapse和expand方法，现成的收起和展开的接口。

      • 小时候我可狠了 : 2013年08月30日10:12:39  地下2层 @回复 回复

        可是用原来的就多了一行带标题的横条了 这个正常的时候是没有title的那个条啊 而且是在上面 很难看


        • 管理员           世纪之光 : 2013年08月30日18:12:48  地下3层 @回复 回复

          那就不如改源码了，将默认的收起状态的横条样式改掉。

  3. 咨询者 : 2014年06月27日13:22:36  -47楼 @回复 回复

    我在项目的home界面添加了你的扩展方法，但是报错呢？hidden： 进去就报错 var opts = $.data(this, ‘layout’).options; //为空不能有属性
    var panels = $.data(this, ‘layout’).panels;

  4. 咨询者 : 2014年06月27日13:57:29  -46楼 @回复 回复

    作为js 引用还是报错，估计是我的使用方法不正确，能给个建议吗？


    • 管理员       世纪之光 : 2014年06月27日23:55:19  地下1层 @回复 回复

      估计你有可能是在layout还没有完成实例化（渲染）的时候，你就调用layout实例的hidden方法了，注意脚本执行顺序，跟java的普通类一样，先要实例化成对象，然后才能调用对象的方法。

查看来自外部的引用: 2

给我留言

留言无头像?


插入图片

返回首页

Copyright © 2012-2017 WebUI框架使用参考  保留所有权利.   Theme by Robin
×