layout折叠后显示标题

最新推荐文章于 2022-06-01 11:16:53 发布

转载最新推荐文章于 2022-06-01 11:16:53 发布 · 81 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/huangf714/p/5898734.html

本文介绍如何在EasyUI的layout组件中实现面板折叠后显示标题的方法。通过自定义onCollapse事件，在面板折叠时调整标题展示形式，适用于不同方向的布局。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Easyui的layout折叠后显示怎样可以显示标题

//在layout的panle全局配置中,增加一个onCollapse处理title
$.extend($.fn.layout.paneldefaults, {
onCollapse : function () {
//获取layout容器
var layout = $(this).parents("div.layout");
//获取当前region的配置属性
var opts = $(this).panel("options");
//获取key
var expandKey = "expand" + opts.region.substring(0, 1).toUpperCase() + opts.region.substring(1);
//从layout的缓存对象中取得对应的收缩对象
var expandPanel = layout.data("layout").panels[expandKey];
//针对横向和竖向的不同处理方式
if (opts.region == "west" || opts.region == "east") {
//竖向的文字打竖,其实就是切割文字加br
var split = [];
for (var i = 0; i < opts.title.length; i++) {
split.push(opts.title.substring(i, i + 1));
}
expandPanel.panel("body").addClass("panel-title").css("text-align", "center").html(split.join("＜ｂｒ＞"));
} else {
expandPanel.panel("setTitle", opts.title);
}
}
});<SPAN><SPAN> </SPAN></SPAN>

转载于:https://www.cnblogs.com/huangf714/p/5898734.html