`
hbczlp
  • 浏览: 26162 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

easyui layout折叠后显示标题 的增强

阅读更多
layout折叠后显示标题 请参照夏悸老大的博客

但本人在使用过程中遇到了一个问题,如果layout中的region设置了collapsible:true,即初始化时面板是折叠的,则无法正常显示title,为此在原作者的方案基础上进行了补强。

源码中的_39d(dir)改为_39d(dir,_title),传入title,
源码中4901 - 4903行
var _39c="expand"+_398.substring(0,1).toUpperCase()+_398.substring(1);
if(!_39a[_39c]){
_39a[_39c]=_39d(_398);

改为
var _39c="expand"+_398.substring(0,1).toUpperCase()+_398.substring(1);
var _title =  _39b.title?_39b.title:" "
if(!_39a[_39c]){
_39a[_39c]=_39d(_398,_title);


源码中的4931 - 4951行
function _39d(dir){
var icon;
if(dir=="east"){
icon="layout-button-left";
}else{
if(dir=="west"){
icon="layout-button-right";
}else{
if(dir=="north"){
icon="layout-button-down";
}else{
if(dir=="south"){
icon="layout-button-up";
}
}
}
}
var p=$("<div></div>").appendTo(_397);
p.panel($.extend({},$.fn.layout.paneldefaults,{cls:("layout-expand layout-expand-"+dir),title:"&nbsp;",closed:true,minWidth:0,minHeight:0,doSize:false,tools:[{iconCls:icon,handler:function(){
_3a6(_397,_398);
return false;

改为
function _39d(dir,_title){
var icon;
if(dir=="east"){
icon="layout-button-left";
}else{
if(dir=="west"){
icon="layout-button-right";
}else{
if(dir=="north"){
icon="layout-button-down";
}else{
if(dir=="south"){
icon="layout-button-up";
}
}
}
}
var p=$("<div></div>").appendTo(_397);
p.panel($.extend({},$.fn.layout.paneldefaults,{cls:("layout-expand layout-expand-"+dir),title:_title,closed:true,minWidth:0,minHeight:0,doSize:false,tools:[{iconCls:icon,handler:function(){
_3a6(_397,_398);
return false;


原扩展增加了expandPanel.panel("setTitle", "&nbsp;");恢复原状

//在layout的panle全局配置中,增加一个onCollapse处理title
$.extend($.fn.layout.paneldefaults, {
    onCollapse : function(){
        //获取layout容器
    	var layout = $(this).parents("body.layout");
	if(layout.length == 0) 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
        	if(opts && opts.title){
        		 var split = [];
                 for (var i = 0; i < opts.title.length; i++) {
                     split.push(opts.title.substring(i, i + 1));
                 }
                 if(expandPanel){
                      expandPanel.panel("setTitle", "&nbsp;");
                     expandPanel.panel("body").addClass("panel-title").css("text-align", "center").html(split.join("<br>"));
                 }
        	}
        } else {
        	if(expandPanel){
        		expandPanel.panel("setTitle", opts.title);
        	}
        }
    }
});


这段代码是基于easyui1.4,解决了面板初始化时collapsed无法显示title的问题,其他版本没做测试
分享到:
评论

相关推荐

    有关easyui-layout中的收缩层无法显示标题的解决办法

    easyui-layout中的收缩层无法显示标题的问题原因分析: 在easyui-layout中设置面板初始化为可以折叠,然后就发现标题还有图标都木有了 嗯,就是结果列表上面、一片空白,出现了问题就要去解决它,在网上查了资料...

    EasyUI tutorial 中文版 chm

    使用easyUI创建折叠面板 使用easyUI创建Tabs标签 使用easyui创建tabs组件和动态添加 使用easyUI创建一个自动播放的tabs 使用easyUI创建XP风格左侧面板 DataGrid 使用easyUI转换HTML table到datagrid ...

    jQuery EasyUI 1.4.4 离线简体中文API文档 含完整开发工具包+皮肤+扩展+演示

    layout:改进后的“hideCollapsedContent”属性可以在折叠面板上设置显示垂直标题栏; layout:新增“onCollapse”、“onExpand”、“onAdd”、“onRemove”事件; datagrid:在排序列的标题上显示↑↓图标; ...

    jQuery EasyUI 1.55API 中文版

    layout:修复当鼠标光标快速离开的时候展开的面板不会被折叠的问题; tagbox:修复tagbox框和label标签不在一条直线上的问题。 Improvement(改进) combo:'inputEvents'属性自带'blur'事件处理器; numberbox:...

    jQuery EasyUI 1.5.5 离线简体中文API文档 含完整开发工具包+皮肤+扩展+演示

    汉化人:richie696 汉化语言:简体中文 汉化版本:1.5.5 Build 1 EasyUI版本:1.5.5 ...• layout:修复当鼠标光标快速离开的时候展开的面板不会被折叠的问题; • tagbox:修复tagbox框和label标签不在

    jquery-easyui-EDT-1.5.5.7z

    layout:修复当鼠标光标快速离开的时候展开的面板不会被折叠的问题; tagbox:修复tagbox框和label标签不在一条直线上的问题。 Improvement(改进) combo:'inputEvents'属性自带'blur'事件处理器; numberbox:'...

    jQuery EasyUI 1.3 API 中文教程

    数据表格显示页脚 - TreeGrid 带分页的树形数据表格 -TreeGrid 属性表格 - PropertyGrid 窗口应用 窗口 - Window 对话框 - Dialog 消息窗口 - Messager 表单相关 表单 - Form Demo 日历 - ...

    jQuery easyUI的教程

    jQuery easyUI 培训 教程 1 Accordion(可折叠标签) 2 1.1 实例 2 1.2 参数 3 2 DateBox(日期框) 4 2.1 实例 4 2.2 参数 6 2.3 事件 6 2.4 方法 6 3 ComboBox(组合框) 7 3.1 实例 7 3.2 参数 9 3.3 事件 9 3.4 ...

    jQuery EasyUI 1.5.5

    汉化人:richie696 汉化语言:简体中文 汉化版本:1.5.5 Build 1 EasyUI版本:1.5.5 ...• layout:修复当鼠标光标快速离开的时候展开的面板不会被折叠的问题; • tagbox:修复tagbox框和label标签不在

    Jquery_EasyUI教程

    o 5.2建立可折叠版面 17 o 5.3建立TABS 18 o 5.4动态添加tabs 19 o 5.5创建XP式样左面板 20 • 6 DataGrid 数据格 23 o 6.1 转换HTML表格到DataGrid 23 o 6.2 给DataGrid添加分页 25 o 6.3 得到DataGrid选择...

    jQuery_EasyUI教程

    o 5.2建立可折叠版面 17 o 5.3建立TABS 18 o 5.4动态添加tabs 19 o 5.5创建XP式样左面板 20 • 6 DataGrid 数据格 23 o 6.1 转换HTML表格到DataGrid 23 o 6.2 给DataGrid添加分页 25 o 6.3 得到DataGrid选择行 27 o ...

    jquery_easyui_cn文档

    1 Accordion(可折叠标签) 2 1.1 实例 2 1.2 参数 3 2 DateBox(日期框) 4 2.1 实例 4 2.2 参数 6 2.3 事件 6 2.4 方法 6 3 ComboBox(组合框) 7 3.1 实例 7 3.2 参数 9 3.3 事件 9 3.4 方法 9 4 Dialog(对话框) ...

Global site tag (gtag.js) - Google Analytics