【EasyUI篇】Layout布局组件

微信公众号:程序yuan
关注可了解更多的教程及排版技巧。问题或建议,请公众号留言;

查看--> 全套EasyUI示例目录

10.Layout布局组件

注意

这个组件一般是直接用class方式直接配合body使用

【EasyUI篇】Layout布局组件_第1张图片

【EasyUI篇】Layout布局组件_第2张图片

【EasyUI篇】Layout布局组件_第3张图片

 

 

JSP文件

<%--
  Created by IntelliJ IDEA.
  User: ooyhao
  Date: 2018/7/29 0029
  Time: 9:21
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>


    Panel
    
    
    
    
    
    
    
    
    

<%----%>




    <%--一般是直接定义在body中--%>
    
        <%--一般是使用class方式来定义布局--%>

        
            border:true,
            iconCls:'icon-cut',
            href:'http://localhost:8081/easyui/getUsers.action',
            <%--设置是否可以折叠--%>
            collapsible:true,
            minWidth:20,
            minHeight:20,
            maxWidth:600,
            maxHeight:200,
            "
             style="height: 100px;">
        
        
        
        
    
    <%--class加载方式--%>     <%--             
            
            
                                  --%>

JS文件

$(function () {

    $("#box").layout({
        //设置布局的宽高
        // width:500,
        // height:500,
        //自动适应父容器
        // fit:true,


    }).css('display','none');
    $("#box").layout({}).css('display','block');
    $("#box").layout('resize');
    // $("#box").layout('collapse','east');
    // $("#box").layout('expand','east');
    $("#box").layout('remove','west');//值可以去north,south,east,west
    $(document).click(function () {
        // $("#box").layout({}).css('display','block');
        // $("#box").layout('resize');
        // console.log($("#box").layout('panel','east'));
        $("#box").layout('add',{
            region:'west',
            title:'新增面板',
            width:100,
        })

    });


});

效果图

【EasyUI篇】Layout布局组件_第4张图片

 

 

------------------------------------------------

关注小编微信公众号获取更多资源

你可能感兴趣的:(前端框架EasyUI)