现在的位置: 首页 > easyui > Layout > layout > 正文
Easyui layout动态隐藏,禁用分割线(split)
2012年04月12日 layout ⁄ 共 1152字 评论数 4 ⁄ 被围观 18,845 views+
文章目录
[隐藏]

昨天群里有朋友问我Easyui layout的分割线是否可以动态隐藏和禁用,现在的各种需求还真是五花八门啊,或许这种需求根本就不应该考虑去layout实现,不过既然有人提出来,想办法解决一下也是造福群众。

实现动态隐藏/显示分割线:

大家都知道的是layout的region(north,south,west,east)是否显示分割线是通过往region所在的标签中加入split属性控制的,在easyui已经完成对layout渲染的情况下,再去用jQuery改变split属性也是无用的,除非重新渲染,这样的代价似乎有点大了。

layout的分割线其实只不过是panel的border而已,而且这个border是通过几个class来控制的,所以只要移除这个class,然后再使用panel的resize方法重画某个region即可,可能贴上layout解析出来的DOM结构大家就清楚了:

1
2
3
4
5
6
7
<!-- 整个panel的DIV,分割线其实就是layout-split-north样式控制的:border-bottom:5px solid #D2E0F2; -->
<div class="panel layout-panel layout-panel-north layout-split-north">
	<!-- panel的标题部分 -->
	<div class="panel-header"></div>
	<!-- 整个panel的BODY部分 -->
	<div class="layout-body panel-body" region="north" split="true" border="true"></div>
</div>

有结构思路就很简单了,先通过layout的panel方法获取某个region的panel,再通过panel的panel方法获取到panel的jQuery对象,接着利用jQuery的removeClass方法移除指定class,最后用panel的resize方法重画region即可,代码如下:

1
2
3
4
5
$('#layoutId').layout('panel','north').panel('panel').removeClass('layout-split-north');
$('#layoutId').layout('panel','north').panel('resize');
//再显示分割线
$('#layoutId').layout('panel','north').panel('panel').addClass('layout-split-north');
$('#layoutId').layout('panel','north').panel('resize');

实现动态禁用/激活分割线:

layout依赖于panel和resizable,每个region分割线的拖动其实是通过resizable实现的,实质上并不是拖动,而是reszie,知道这三个插件之间的这种关系后,思路就很简单了,获取region的panel对象后使用resizable插件的disable方法禁用resizable即可,所以代码很简单:

1
2
3
4
//禁用拖动
$('body').layout('panel','north').panel('panel').resizable('disable');
//激活拖动
$('body').layout('panel','north').panel('panel').resizable('enable');

目前有 4 条留言 其中:访客:2 条, 博主:2 条

  1. solice : 2012年04月12日20:39:03  -49楼 @回复 回复

    很好的文章,希望楼主继续分享自己的经验啊。 😉


  2. 管理员
    世纪之光 : 2012年04月12日22:07:47  -48楼 @回复 回复

    @solice
    这是理所当然的,我会一如既往地分享经验的。

  3. hailiang : 2014年04月08日17:28:25  -47楼 @回复 回复

    请问如何完全隐藏west,效果与$(‘body’).layout(‘remove’,’west’); 😛

给我留言

留言无头像?


×