easyui 布局标题纵向排列

(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);

时间: 2024-08-01 22:47:30

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

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

EasyUI学习总结(六)--EasyUI布局 一.EasyUI布局介绍 easyUI布局容器包括东.西.南.北.中五个区域,其中中心面板是必须的,而东.西.南.北这四个面板是可选的,如果布局里面不需要东.西.南.北这四个面板,那么可以把相应的div删掉,另外,如果需要创建复杂的easyUI布局,那么可以通过嵌套东.西.南.北.中五个面板来实现.下面简单演示一下EasyUI布局. 1.1.通过div创建easyUI布局 easyUI的layout可以通过div来创建,使用div来创建easyUI

easyui 布局自适应

最近在把以前写的一个项目改成用easyui做前端.过程中遇到了不少问题.其中一个就是datagrid不能很好的布局.想了好多办法都有局限.最后想到会不会是布局(easyui-layout)的问题,经过实验,最后问题解. 1:比如在项目中用到了datagrid.如果界面比较简单---只有一个datagrid只需要把它的属性fit 设置为true就能实现自动适应窗体.如果在datagrid上方还有其他div的话,div 就会把datagrid挤压到窗体的下方.如果datagrid有分页控件,分页控件

EasyUI 布局 - 动态添加标签页(Tabs)

首先导入js <link rel="stylesheet" href="../js/easyui/themes/default/easyui.css"> <link rel="stylesheet" href="../js/easyui/themes/icon.css"> <script type="text/javascript" src="../js/jquery

EasyUI布局实战

最近在忙着画原型图,学习的时间就更少了,但是可以尝试下提高效率. 前几天,师姐让我做一个可以伸缩的侧边栏,当时觉得这不就是JS里面的那个Demo么,然后就去改原型图了,之后学了一点儿EasyUI,打开师姐给我的代码后,发现他们的页面是用EasyUI做的布局,这就比单纯的JS简单多了,以前要一大段代码,现在只需两行,搞定一个向上的侧边栏. 效果如下: 之后,又找了个完整页面布局的Demo敲了下,感觉EasyUI真的好简单,又好用.下面给出Layout的全部代码: <!DOCTYPE html PU

jQuery EasyUI布局容器layout实例精讲

这个布局容器,有五个区域:北.南.东.西和中心. 他中心地区面板是必需的,但是边缘地区面板是可选的.每一个边缘地区面板可以缩放的拖动其边境, 他们也可以通过点击其收缩触发.布局可以嵌套,从而用户可以建立他想要的复杂的布局.layout可以基于body或者 div 进行布局. 效果: 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>eas

雷林鹏分享jQuery EasyUI 布局 - 在面板中创建复杂布局

面板(Panel)允许您创建用于多种用途的自定义布局.在本实例中,我们使用面板(panel)和布局(layout)插件来创建一个 msn 消息框. 我们在区域面板中使用多个布局(layout).在消息框的顶部我们放置一个查询输入框,同时在右边放置一个人物图片.在中间的区域我们通过设置 split 属性为 true,把这部分切割为两部分,允许用户改变区域面板的尺寸大小. 以下就是所有代码: Search: Hi,I am easyui. 我们不需要写任何的 javascript 代码,它自己有非常

微信 小程序布局 标题之二分列表

<view class="commodity-zone"> <!-- 系列商品模板 --> <block class="zone-among" wx:key="teaamong" wx:for="{{teaamong}}" wx:for-index="index"> <!-- 控制显示与隐藏的外衣 --> <view wx:if="{{item

一点点关于JS的东西:EasyUI布局+下拉框之个人简单使用

根据项目需要,自己写的一个小小demo:实现的简单效果是这样子的,通过下拉框选择数据项,点击页面Button触发,根据下拉框值加载选显卡Tbs. html代码如下: 一个下拉框,一个button,一个空的tbs,两个隐藏内容div(可以动态合成). <select id="Model" class="easyui-combobox" name="Model" style="width:250px;">      

jQuery EasyUI 布局

通过使用 jQuery EasyUI 可以很容易地添加 Tabs.您只需要调用 'add' 方法即可. 在本教程中,我们将使用 iframe 动态地添加显示在一个页面上的 Tabs. 当点击添加按钮,一个新的 tab 将被添加.如果 tab 已经存在,它将被激活. 步骤 1:创建 Tabs <div style="margin-bottom:10px"> <a href="#" class="easyui-linkbutton"