现在的位置: 首页 > easyui > Layout > layout > 正文
layout小扩展:四个实用功能的扩展实现方式
2013年04月11日 layout ⁄ 共 3662字 暂无评论 ⁄ 被围观 4,735 views+
文章目录
[隐藏]

扩展简述

四个扩展包括:

  • 动态设置region的高度或者宽度;
  • 动态设置rehion头部的iconCls;
  • 动态设置region的split是否可用;
  • 动态设置region的split是否可见;

先到先得,后到也不会没得。

实现代码

  1. /**    
  2.  * layout方法扩展    
  3.  * @param {Object} jq    
  4.  * @param {Object} region    
  5.  */     
  6. $.extend($.fn.layout.methods, {        
  7.     /**
  8.      * 设置某个region的宽度或者高度(不支持center)    
  9.      * @param {[type]} jq     [description]    
  10.      * @param {[type]} params [description]    
  11.      */     
  12.     setRegionSize:function(jq,params){      
  13.         return jq.each(function(){      
  14.             if(params.region=="center")      
  15.                 return;      
  16.             var panel = $(this).layout('panel',params.region);      
  17.             var optsOfPanel = panel.panel('options');      
  18.             if(params.region=="north" || params.region=="south"){      
  19.                 optsOfPanel.height = params.value;      
  20.             }else{      
  21.                 optsOfPanel.width = params.value;      
  22.             }      
  23.             $(this).layout('resize');      
  24.         });      
  25.     },      
  26.     /**
  27.      * 设置north south east west区域标题的图标    
  28.      * @param {[type]} jq     [description]    
  29.      * @param {[type]} params [description]    
  30.      */     
  31.     setHeaderIcon:function(jq,params){   
  32.         return jq.each(function(){   
  33.             if(params.region=="center")   
  34.                 return;   
  35.             var panel = $(this).layout('panel',params.region);   
  36.             var title = panel.panel('header').find('>div.panel-title');   
  37.             var icon = panel.panel('header').find('>div.panel-icon');   
  38.             if(icon.length===0){   
  39.                 if(title.length && params.iconCls != null){   
  40.                     $('<div class="panel-icon ' + params.iconCls + '"></div>').insertBefore(title);   
  41.                     title.addClass('panel-with-icon');   
  42.                 }   
  43.             }else{   
  44.                 if(params.iconCls == null){   
  45.                     icon.remove();   
  46.                     title.removeClass('panel-with-icon');   
  47.                 }else{   
  48.                     icon.attr('class','').addClass('panel-icon ' + params.iconCls);   
  49.                 }                 
  50.             }      
  51.         });   
  52.     },      
  53.     /**
  54.      * 设置north south east west的split是否可以拖动    
  55.      * @param {[type]} jq     [description]    
  56.      * @param {[type]} params [description]    
  57.      */     
  58.     setSplitActivateState:function(jq,params){      
  59.         return jq.each(function(){      
  60.             if(params.region=="center")      
  61.                 return;      
  62.             $(this).layout('panel',params.region).panel('panel').resizable(params.disabled?'disable':'enable');      
  63.         });      
  64.     },      
  65.     /**
  66.      * 设置north south east west的split是否显示    
  67.      * @param {[type]} jq     [description]    
  68.      * @param {[type]} params [description]    
  69.      */     
  70.     setSplitVisiableState:function(jq,params){      
  71.         return jq.each(function(){      
  72.             if(params.region=="center")      
  73.                 return;      
  74.             var panel = $(this).layout('panel',params.region);      
  75.             panel.panel('options').split = params.visible;      
  76.             if(params.visible){      
  77.                 panel.panel('panel').addClass('layout-split-north');      
  78.             }else{      
  79.                 panel.panel('panel').removeClass('layout-split-north');      
  80.             }      
  81.             //panel.panel('resize');      
  82.             $(this).layout('resize');      
  83.         });      
  84.     }      
  85. });   

使用实例

  1. $('#layout').layout('setRegionSize',{region:'north',value:200});   
  2. $('#layout').layout('setHeaderIcon',{region:'north',iconCls:'icon-ok'});   
  3. $('#layout').layout('setSplitActivateState',{region:'north',disabled:true});   
  4. $('#layout').layout('setSplitVisiableState',{region:'north',visible:false});  

效果样式

http://www.easyui.info/easyui/demo/layout/resize.html

给我留言

留言无头像?


×