最近在开发中,想保存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事件"); } }
希望对有相同需求的兄弟有帮助。
相关推荐
用EasyUi实现简单的布局,主要是用EasyUi里的Layout 跟Tabs选项卡
NULL 博文链接:https://cping.iteye.com/blog/2174449
以用户为中心 实现信息的集中访问,利用portal 可以方便地将登录用户所需要的,来源各种渠道的信息集成在一个统一的页面模块之内,可拖拽,拖拽后可以记忆位置
esayui layout
easyui 扩展layout的方法,支持动态添加删除块
easyui 整体框架布局1.2.6 修复1.2.2bug
最近在把以前写的一个项目改成用easyui做前端。过程中遇到了不少问题。其中一个就是datagrid不能很好的布局。...这个时候就应该用 easyui-layout来分隔窗体来使具体的内容放在easyui-layout不同的部分。这样就能很好
使用jquery-easyui框架搭建用户界面自定义布局
jquery easyui 经典布局 类似extjs 感谢原作者
下面小编就为大家带来一篇JQuery EasyUI Layout 在from布局自适应窗口大小的实现方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
主要介绍了使用jquery-easyui的布局layout写后台管理页面的代码详解,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
基于easyui-1.4.4框架布局. jQuery EasyUI是一组基于jQuery的UI插件集合,而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面。开发者不需要编写复杂的javascript,也不需要对css样式有...
使用easyui实现的页面布局,带导航菜单,并点击导航菜单中的某一项在主页面显示
jQuery EasyUI 中文API—Layout(Panel)
今天在用easyui做布局时,碰到了一个疑惑的问题。 问题:当把class=“easyui-layout”写在一个独立的div中时,layout的样式无法显示,也不报错。 例如: 代码如下: <span xss=removed><body > ”easyui-layout...
EasyUi布局示例,适合初学,简单易懂
本篇文章小编为大家介绍JQueryEasyUI Layout布局框架的使用,有需要的朋友可以参考一下
使用easyUI创建一个border layout在你的web页面 使用easyUI在panel中创建复杂布局 使用easyUI创建折叠面板 使用easyUI创建Tabs标签 使用easyui创建tabs组件和动态添加 使用easyUI创建一个自动播放的tabs ...