`

EasyUI Cookie记忆layout的布局

阅读更多

 

最近在开发中,想保存easyui的一个复杂界面的layout,让用户可以根据自己的分辨率和喜好进行界面布局的调整,并保存下来,下次进入的时候使用保存的布局位置。

 

设计:

1、需要在布局拖动的时候记录下layout部件的位置(我这里使用的是north和center,并使用fit填充全页面的方式布局,所以只需要记录north的高度就OK)。

2、在进入页面时,jquery和easyui初始化和渲染完成后,执行resize操作。

 

找方案,想办法

1、官方文档基本没有办法实现,easyui.layout虽然继承了resizable,但是查看了官方混淆后的烂代码,勉强发现官方已经覆写了resizable的相关事件,所有基本可以说,官方没有提供该功能。

2、热,从源代码下手,去修改混淆的源代码,分析后,发现是可行的,但是需要动官方源代码升级会很麻烦,前面从1.3.1升级到1.3.3已经麻烦过一次了。。。

3、通过强大的google浏览器,分析DOM结合官方API,通过1个多小时努力,找到解决方案。如下:

 

1、注册layout的布局子对象的panel,然后注册其onResize事件,获取变动后的位置,并记录到cookie中。

 

function registerRememberPosEvent(){
	$('#manage_popup_layout').layout('panel','north').panel({
		onResize:function(w,h){
			rememberPos(h);		
		}
	});
}
function rememberPos(h){
  $.cookie('popup.position.height', h);
}

 

 

2、页面初始化完成后,先resize布局子对象的panel,然后再调用layout的resize,实现读取cookie中保存的位置并设置。

// 读取cookie,并设置初始化布局高度
function recoverPos(timestamp){
	var h = $.cookie('popup.position.height');
	if(!h) h=400;
	$('#manage_popup_layout').layout('panel','north').panel('resize',{height:h});
	$('#manage_popup_layout').layout('resize');
}

 

3,、进入页面,初始化完成后,注册事件,读取cookie,resize位置

// easyui渲染完成事件,注意这是全局事件,用了后注销下。
$.parser.onComplete=function(context){
        registerRememberPosEvent()
        recoverPos();
	$.parser.onComplete = function(){
		console.info("[popup]已注销onComplete事件");
	}
}

 

 

希望对有相同需求的兄弟有帮助。

 

1
1
分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics