现在的位置: 首页 > 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,请在评论中反馈。

目前有 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的普通类一样,先要实例化成对象,然后才能调用对象的方法。

给我留言

留言无头像?


×