Title: 建议 layout 收缩时, 自动把title显示在 expandPanel 上 Post by: iamjxc on April 19, 2014, 06:58:03 PM layout收缩时, 会显示一个 expandPanel, 但是看起来空荡荡的
建议把region的title显示在expandPanel上, 或者再增加一个属性, 如 collapsedTitle , 用于定制 expandPanel 的 title 虽然论坛里有解决方案, 但是这个功能很实用, 建议成为 easyui 未来版本的默认功能 Title: Re: 建议 layout 收缩时, 自动把title显示在 expandPanel 上 Post by: zh_CN on April 19, 2014, 07:44:20 PM layout收缩时, 会显示一个 expandPanel, 但是看起来空荡荡的 建议把region的title显示在expandPanel上, 或者再增加一个属性, 如 collapsedTitle , 用于定制 expandPanel 的 title 虽然论坛里有解决方案, 但是这个功能很实用, 建议成为 easyui 未来版本的默认功能 论坛里的对中文支持不太好,英文标题没问题 Title is showed in expandPanel(stworthy give the solution in this bbs), not better for chinese. Title: Re: 建议 layout 收缩时, 自动把title显示在 expandPanel 上 Post by: iamjxc on April 19, 2014, 08:03:00 PM 我刚做的扩展方案, 仅供参考
// layout的panel收缩时, 把title赋给expandPanel var collapsePanel = $.fn.panel.methods.collapse; $.fn.panel.methods.collapse = function(jq, animate){ return jq.each(function(){ var layout = $(this).closest(".easyui-layout"); if (layout.length){ copyLayoutTitle(layout); } collapsePanel.call($.fn.panel.methods, $(this), animate); }); }; function copyLayoutTitle(layout){ var regions = ["east","west","north","south"]; var regionPanels = ["expandEast","expandWest","expandNorth","expandSouth"]; for(var i=0;i<regions.length;i++){ copyRegionTitle(layout, regions, regionPanels); } } function copyRegionTitle(layout, region, expandPanel){ var panel = layout.layout('panel', region); if (!panel || panel.length == 0) return; var opt = panel.panel("options"); opt.onCollapse = function(){ var p = layout.layout('panel', expandPanel); // 分上下/左右2种方案 var el = p.panel("header"); var cls = "expandPanel-horz"; if (region == "west" || region == "east") { el = p.panel("body"); cls = "expandPanel-vert"; } // 避免重复添加 if (el.find(".expandPanel-horz,.expandPanel-vert").length) return; var html = $('<div class="panel-title '+cls+'" >'+opt.title+'</div>'); el.append(html); }; } .expandPanel-vert{ line-height: 20px; padding: 5px; width: 0; } .expandPanel-horz{ position: absolute; top: 3px; right:30px; width: 100%; text-align: center; } |