扩展简述
四个扩展包括：
- 动态设置region的高度或者宽度；
- 动态设置rehion头部的iconCls；
- 动态设置region的split是否可用；
- 动态设置region的split是否可见;
先到先得，后到也不会没得。
实现代码
- /**
- * layout方法扩展
- * @param {Object} jq
- * @param {Object} region
- */
- $.extend($.fn.layout.methods, {
- /**
- * 设置某个region的宽度或者高度(不支持center)
- * @param {[type]} jq [description]
- * @param {[type]} params [description]
- */
- setRegionSize:function(jq,params){
- return jq.each(function(){
- if(params.region=="center")
- return;
- var panel = $(this).layout('panel',params.region);
- var optsOfPanel = panel.panel('options');
- if(params.region=="north" || params.region=="south"){
- optsOfPanel.height = params.value;
- }else{
- optsOfPanel.width = params.value;
- }
- $(this).layout('resize');
- });
- },
- /**
- * 设置north south east west区域标题的图标
- * @param {[type]} jq [description]
- * @param {[type]} params [description]
- */
- setHeaderIcon:function(jq,params){
- return jq.each(function(){
- if(params.region=="center")
- return;
- var panel = $(this).layout('panel',params.region);
- var title = panel.panel('header').find('>div.panel-title');
- var icon = panel.panel('header').find('>div.panel-icon');
- if(icon.length===0){
- if(title.length && params.iconCls != null){
- $('<div class="panel-icon ' + params.iconCls + '"></div>').insertBefore(title);
- title.addClass('panel-with-icon');
- }
- }else{
- if(params.iconCls == null){
- icon.remove();
- title.removeClass('panel-with-icon');
- }else{
- icon.attr('class','').addClass('panel-icon ' + params.iconCls);
- }
- }
- });
- },
- /**
- * 设置north south east west的split是否可以拖动
- * @param {[type]} jq [description]
- * @param {[type]} params [description]
- */
- setSplitActivateState:function(jq,params){
- return jq.each(function(){
- if(params.region=="center")
- return;
- $(this).layout('panel',params.region).panel('panel').resizable(params.disabled?'disable':'enable');
- });
- },
- /**
- * 设置north south east west的split是否显示
- * @param {[type]} jq [description]
- * @param {[type]} params [description]
- */
- setSplitVisiableState:function(jq,params){
- return jq.each(function(){
- if(params.region=="center")
- return;
- var panel = $(this).layout('panel',params.region);
- panel.panel('options').split = params.visible;
- if(params.visible){
- panel.panel('panel').addClass('layout-split-north');
- }else{
- panel.panel('panel').removeClass('layout-split-north');
- }
- //panel.panel('resize');
- $(this).layout('resize');
- });
- }
- });
使用实例
- $('#layout').layout('setRegionSize',{region:'north',value:200});
- $('#layout').layout('setHeaderIcon',{region:'north',iconCls:'icon-ok'});
- $('#layout').layout('setSplitActivateState',{region:'north',disabled:true});
- $('#layout').layout('setSplitVisiableState',{region:'north',visible:false});
