2. 全屏布局

    
    
    
    
    

或

    






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

3. 流式布局

    
    


    .layoutPadding {
        padding: 10px;
    }

4. 自适应高度布局

    
        添加
        删除
    
    南
    西
    东
    
        
点击上面按钮添加一行内容
    






    // 中间最后一行添加一行内容
    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. 嵌套布局

6. 没有折叠按钮的布局

    
    
    
        
招聘运维开发工程师
        

            
投简历至: xmdevops@vip.qq.com
        
    
    
        
    


    .layoutPadding {
        padding: 10px;
    }

7. 复杂布局

    
    
    
        
            accordion1
            accordion2
            accordion3
        
    
    
        
            

                1
                

                    
1-1
                    

                        2
                        

                            
2-1
                            

                                3
                                

                                    
3-1
                                
                            
                        
                    
                
            
  
         
    
    
        
            
                
物联网开发公司
                

                    
成立于2008年.
                
            
            
                
                    
                        名字
                        年龄
                        性别
                    
                
            
        
    

    .padding10 {
        padding: 10px;
    };

8. 添加和移除布局

    
        

            
操作区
            
                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);
    };