现在的位置: 首页 > easyui > Layout > layout > 正文
增加layout的方法,支持动态隐藏显示块
2012年02月01日 layout ⁄ 共 4157字 评论数 11 ⁄ 被围观 25,469 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楼 @回复 回复
  3. 咨询者 : 2014年06月27日13:22:36  -47楼 @回复 回复
  4. 咨询者 : 2014年06月27日13:57:29  -46楼 @回复 回复

给我留言

留言无头像?


×