jQuery easyui的layout没有提供动态增加或者删除某个区域的接口,在某些特殊场合下,可能显得有些不怎么灵活,不过因为easyui留了很好的扩展方式,实现起来并不困难,以下内容转自easyui学习班
实现代码:
$.extend($.fn.layout.methods, { remove: function(jq, region){ return jq.each(function(){ var panel = $(this).layout("panel",region); if(panel){ panel.panel("destroy"); var panels = $.data(this, 'layout').panels; panels[region] = $('>div[region=' + region + ']', $(this)); $.data(this, 'layout').panels = panels; $(this).layout("resize"); } }); }, add:function(jq, params){ return jq.each(function(){ var container =$(this); var panel = $('>div[region=' + params.region + ']', container); if(!panel.length){ var pp = $('<div/>').attr("region",params.region).addClass('layout-body').appendTo(container); var cls = 'layout-panel layout-panel-' + params.region; pp.panel($.extend({},params.options,{ cls : cls })); var panels = $.data(this, 'layout').panels; panels[params.region] = pp; $.data(this, 'layout').panels = panels; $(this).layout("resize"); } }); } });
使用方法:
$('#layout').layout('remove','north'); $('#layout').layout('add',{ region:'north', options:{ height:33 } });
更新日志(2012-05-10)
jQuery easyui 1.2.6版本已经提供这两个方法,使用1.2.6的同学无需再扩展。