您的位置:首页 > Web前端 > 其它 > 正文

easyui layout 折叠后显示标题

更多 时间:2015-1-26 类别:Web前端 浏览量:633

easyui layout 折叠后显示标题

easyui layout 折叠后显示标题

一、折叠后显示标题的类似效果图

 

二、基于easyui1.3.5+的版本的实现代码

  •  
  •  
  • JScript 代码   复制
  • 
    $.extend($.fn.layout.paneldefaults, { 
         onCollapse : function () { 
             //获取layout容器 
             var layout = $(this).parents("li.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("<br>")); 
             }
             else
             { 
                 expandPanel.panel("setTitle", opts.title); 
             }
    
         } 
     });
    
    		
  •  

    三、使用方式

    在easyui.min。js之后导入该段JS代码就可以了

     

    标签:easyui