在上一篇文章中,我们对jQuery easyui layout 自适应的内部方法setSize做了改进,在此基础上,为layout增加一个用于显示或者隐藏某个region的方法已经变得较为容易了,索性就去实现一下(本扩展适用于1.3.0以及更高版本):
实现步骤:
1.首先是修正resize存在的不足:
详情见:http://www.easyui.info/archives/92.html
扩展我们想要的两个方法:
- /**
- * layout方法扩展
- * @param {Object} jq
- * @param {Object} region
- */
- $.extend($.fn.layout.methods, {
- /**
- * 面板是否存在和可见
- * @param {Object} jq
- * @param {Object} params
- */
- isVisible: function(jq, params) {
- var panels = $.data(jq[0], 'layout').panels;
- var pp = panels[params];
- if(!pp) {
- return false;
- }
- if(pp.length) {
- return pp.panel('panel').is(':visible');
- } else {
- return false;
- }
- },
- /**
- * 隐藏除某个region,center除外。
- * @param {Object} jq
- * @param {Object} params
- */
- hidden: function(jq, params) {
- return jq.each(function() {
- var opts = $.data(this, 'layout').options;
- var panels = $.data(this, 'layout').panels;
- if(!opts.regionState){
- opts.regionState = {};
- }
- var region = params;
- function hide(dom,region,doResize){
- var first = region.substring(0,1);
- var others = region.substring(1);
- var expand = 'expand' + first.toUpperCase() + others;
- if(panels[expand]) {
- if($(dom).layout('isVisible', expand)) {
- opts.regionState[region] = 1;
- panels[expand].panel('close');
- } else if($(dom).layout('isVisible', region)) {
- opts.regionState[region] = 0;
- panels[region].panel('close');
- }
- } else {
- panels[region].panel('close');
- }
- if(doResize){
- $(dom).layout('resize');
- }
- };
- if(region.toLowerCase() == 'all'){
- hide(this,'east',false);
- hide(this,'north',false);
- hide(this,'west',false);
- hide(this,'south',true);
- }else{
- hide(this,region,true);
- }
- });
- },
- /**
- * 显示某个region,center除外。
- * @param {Object} jq
- * @param {Object} params
- */
- show: function(jq, params) {
- return jq.each(function() {
- var opts = $.data(this, 'layout').options;
- var panels = $.data(this, 'layout').panels;
- var region = params;
- function show(dom,region,doResize){
- var first = region.substring(0,1);
- var others = region.substring(1);
- var expand = 'expand' + first.toUpperCase() + others;
- if(panels[expand]) {
- if(!$(dom).layout('isVisible', expand)) {
- if(!$(dom).layout('isVisible', region)) {
- if(opts.regionState[region] == 1) {
- panels[expand].panel('open');
- } else {
- panels[region].panel('open');
- }
- }
- }
- } else {
- panels[region].panel('open');
- }
- if(doResize){
- $(dom).layout('resize');
- }
- };
- if(region.toLowerCase() == 'all'){
- show(this,'east',false);
- show(this,'north',false);
- show(this,'west',false);
- show(this,'south',true);
- }else{
- show(this,region,true);
- }
- });
- }
- });
调用方法:
- $('#wrap').layout('hidden',region);
- $('#wrap').layout('show',region);
- $('#wrap').layout('hidden',"all");
- $('#wrap').layout('show',"all");
注:isVisible和setSize函数是layout的内部函数,压缩文件中已经不是这两个名称,稍微分析可以定位出来,定位不出来的同学可以参照我博客上已经改好的jquery.easyui.min.js文件(请在演示页面中抓取)。
效果演示:
最终调用效果,请看这里,欢迎大家提出更好的解决方案,或者发现什么bug,请在评论中反馈。
管理员 世纪之光 : 2013年05月04日12:03:09 地下1层
管理员 世纪之光 : 2013年08月30日09:27:51 地下1层
管理员 世纪之光 : 2013年08月30日18:12:48 地下3层
管理员 世纪之光 : 2014年06月27日23:55:19 地下1层