如何使用EasyUILayout组件-梓潼大橙子建站

RELATEED CONSULTING

新闻中心

这里有您想知道的互联网营销解决方案

如何使用EasyUILayout组件

1. 基础布局

我们提供的服务有：网站建设、网站设计、微信公众号开发、网站优化、网站认证、郁南ssl等。为1000多家企事业单位解决了网站和推广的问题。提供周到的售前咨询和贴心的售后服务，是有科学管理、有技术的郁南网站制作公司

如何使用EasyUI Layout组件

姓名年龄性别

2. 全屏布局

或

width = $(document).width(); height = $(document).height(); $('#l').layout({ width: width, height: height, });

3. 流式布局

如何使用EasyUI Layout组件

.layoutPadding { padding: 10px; }

4. 自适应高度布局

如何使用EasyUI Layout组件


    
        添加
        删除

南西东

点击上面按钮添加一行内容

// 中间最后一行添加一行内容 function add(that){ $('#l').layout('panel', 'center').append('

点击上面按钮添加一行内容

'); resetHeight(); }; // 删除中间最后的一行的内容 function remove(that){ $('#l').layout('panel', 'center').find('p:last').remove(); resetHeight(); }; // 重置整个layout的高度 function resetHeight(){ // 获取中间的panel Jquery对象 var cpanel = $('#l').layout('panel', 'center'); // 获取当前cpanel的高度 var cpanelOldHeight = cpanel.outerHeight(); // 设置中间的panel对象的高度为自适应 cpanel.panel('resize', {height: 'auto'}); // 重新获取cpanel的高度 var cpanelNewHeight = cpanel.outerHeight(); // 重置layout的宽度,减少两次之差即可 var layoutheight = $('#l').height() - (cpanelOldHeight-cpanelNewHeight); $('#l').layout('resize', {height: layoutheight}); };

5. 嵌套布局

如何使用EasyUI Layout组件

6. 没有折叠按钮的布局

如何使用EasyUI Layout组件


    
    
    
        招聘运维开发工程师
        
            投简历至: xmdevops@vip.qq.com
        
    
    
        
    


    .layoutPadding {
        padding: 10px;
    }

7. 复杂布局

如何使用EasyUI Layout组件


    
    
    
        
            accordion1
            accordion2
            accordion3
        
    
    
        
            
                1
                
                    1-1
                    
                        2
                        
                            2-1
                            
                                3
                                
                                    3-1
                                
                            
                        
                    
                
              
         
    
    
        
            
                物联网开发公司
                
                    成立于2008年.
                
            
            
                
                    
                        名字
                        年龄
                        性别
                    
                
            
        
    

    .padding10 {
        padding: 10px;
    };

8. 添加和移除布局

如何使用EasyUI Layout组件


    
        
            操作区
            
                region:
                
                    south
                    west
                    east
                    center
                
            
            
                添加
                删除
            
        
    
    
    
    
    


    .padding10 {
        padding: 10px;
    }






    // 添加布局
    function add(that){
        var region = $('#regionArea').val();
        var regionPanel = $('#lo').layout('panel', region);
        if(regionPanel.length) return;
        
        var options = {region: region};
        if(['north', 'south'].indexOf(region)) options['height']=50;
        if(['west', 'east'].indexOf(region)) options['width'] = 100;
        $('#lo').layout('add', options);
    };
    // 删除布局
    function remove(that){
        var region = $('#regionArea').val();
        var regionPanel = $('#lo').layout('panel', region);
        if(!regionPanel.length) return;
        $('#lo').layout('remove', region);
    };

当前题目：如何使用EasyUILayout组件
链接分享：http://sczitong.cn/article/jdsgih.html

其他资讯

快速导航

友情链接

网站建设

联系方式

企业：青羊区大橙子信息咨询工作室
地址：成都市青羊区太升南路288号
电话：18980820575
网址：www.sczitong.cn

公司名称：青羊区大橙子信息咨询工作室联系电话：18980820575

网站备案号：蜀ICP备2022028542号-23

梓潼大橙子建站梓潼网站建设梓潼网站设计梓潼网站制作成都做网站