(function($){
                 var buttonDir = {north:'down',south:'up',east:'left',west:'right'};
                    $.extend($.fn.layout.paneldefaults,{
                        onBeforeCollapse:function(){
                            var popts = $(this).panel('options');
                            var dir = popts.region;
                            var btnDir = buttonDir[dir];
                            if(!btnDir) return false;
                
                            setTimeout(function(){
                                var pDiv = $('.layout-button-'+btnDir).closest('.layout-expand').css({
                                    textAlign:'center',lineHeight:'18px',fontWeight:'bold'
                                });
                
                                if(popts.title){
                                     var vtitle = popts.title;
                                    if(dir == "east" || dir == "west"){
                                        var vTitle = popts.title.split('').join('<br/>');
                                        pDiv.find('.panel-body').html(vTitle);
                                    }else{
                                        $('.layout-button-'+btnDir).closest('.layout-expand').find('.panel-title')
                                        .css({textAlign:'left'})
                                        .html(vTitle)
                                    }
                                     
                                }   
                            },100);
                             
                        }
                    });
                })(jQuery);

easyui 布局标题纵向排列的更多相关文章

  1. Easyui布局

    Easyui入门视频教程 第03集---Easyui布局 Easyui入门视频教程 第03集---Easyui布局 目录 -----------------------   Easyui入门视频教程 ...

  2. EasyUI学习总结(六)——EasyUI布局

    一.EasyUI布局介绍 easyUI布局容器包括东.西.南.北.中五个区域,其中中心面板是必须的,而东.西.南.北这四个面板是可选的,如果布局里面不需要东.西.南.北这四个面板,那么可以把相应的di ...

  3. Easyui入门视频教程 第04集---Easyui布局

    目录 目录 ----------------------- Easyui入门视频教程 第09集---登录完善 图标自定义   Easyui入门视频教程 第08集---登录实现 ajax button的 ...

  4. Easyui入门视频教程 第03集---Easyui布局

    Easyui入门视频教程 第03集---Easyui布局 目录 ----------------------- Easyui入门视频教程 第09集---登录完善 图标自定义   Easyui入门视频教 ...

  5. EasyUI学习总结(六)——EasyUI布局(转载)

    本文转载自:http://www.cnblogs.com/xdp-gacl/p/4088198.html 一.EasyUI布局介绍 easyUI布局容器包括东.西.南.北.中五个区域,其中中心面板是必 ...

  6. easyui datagrid标题列宽度自适应

    最近项目中使用easyui做前端界面,相信大部分使用过easyui datagrid的朋友有这么一个疑问:如果在columns中不设置width属性能不能写个方法让datagrid的头部标题和数据主体 ...

  7. easyui 布局自适应

    最近在把以前写的一个项目改成用easyui做前端.过程中遇到了不少问题.其中一个就是datagrid不能很好的布局.想了好多办法都有局限.最后想到会不会是布局(easyui-layout)的问题,经过 ...

  8. jQuery EasyUI布局容器layout实例精讲

    这个布局容器,有五个区域:北.南.东.西和中心. 他中心地区面板是必需的,但是边缘地区面板是可选的.每一个边缘地区面板可以缩放的拖动其边境, 他们也可以通过点击其收缩触发.布局可以嵌套,从而用户可以建 ...

  9. easyui 布局之window和panel一起使用时,拉动window宽高时panel不跟随一起变化

    项目开发中布局是每一个组件都由最外层的window和内部的至少一个panel组成,其他的细小组件再依次放到panel中. 问题:当拉动外部的window时我们希望内部的panel的宽高也跟着变化,但是 ...

随机推荐

  1. 移动端<head>头部 常用<meta>标签

    <!DOCTYPE html><html lang = ""><head> <title></title> <me ...

  2. Swift游戏实战-跑酷熊猫 05 踩踏平台是怎么炼成的

    这节内容我们一起学习下随机长度的踩踏平台的原理是怎么样的. 要点: 平台的组成 我们的平台由3部分组成 左: 中: 右: 其中中间部分是可以无缝衔接的,下面就是两个中间部分衔接在一起 要任何长度的平台 ...

  3. HTML基础-- 标签、表格

    <html>    --开始标签 <head> 网页上的控制信息 <title>页面标题</title> </head> <body& ...

  4. TImageList 和 TlistView 组件(C++Builder)

    __fastcall TForm1::TForm1(TComponent* Owner) : TForm(Owner) { //加载图标到Imagelist Graphics::TBitmap *bm ...

  5. Python和Ruby开发中源文件中文注释乱码的解决方法(Eclipse和Aptana Studio3均适用)

    Eclipse的设置(Aptana Studio3与Eclipse基本完全相同,此处略) window->preferences->general->editors->text ...

  6. poj: 3094

    简单题 #include <iostream> #include <stdio.h> #include <string> #include <stack> ...

  7. Maven2的配置文件settings.xml(转)

    当Maven运行过程中的各种配置,例如pom.xml,不想绑定到一个固定的project或者要分配给用户时,我们使用settings.xml中的settings元素来确定这些配置.这包含了本地仓库位置 ...

  8. cookie的保存时间

    使用 .setMaxAge()设置(单位是秒) second>0 保存在硬盘上的时间 second<0 默认保存在浏览器的内存中 second=0 立即删除

  9. Android 优秀UI控件 ---- FlowingDrawer

    1,前天在git上看到了一个不错的控件 ,最近两天项目也没有那么赶了,就抽时间来写写代码,锻炼一下手感,先看一下效果吧. 2 整体来看 ,主要是有两块来实现的,①主界面的RecyclerView ,② ...

  10. MVC模型 简介

    MVC (Modal View Controler)本来是存在于Desktop程序中的,M是指数据模型,V是指用户界面,C则是控制器.使用MVC的目的是将M和V的实现代码分离,从而使同一个程序可以使用 ...