easyui东西南北中布局

3/8/2017来源:ASP.NET技巧人气:1097

布局效果

代码如下

<html>
    <head>
        <title>easyui</title>
        <meta http-equiv="content-type" content="text/html;charset=UTF-8" />
          
        <script type="text/javascript" src="easyui/jquery.min.js"></script>
        <script type="text/Javascript" src="easyui/jquery.easyui.min.js"></script>
        <script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>
          
        <link rel="stylesheet" href="easyui/themes/default/easyui.CSS" type="text/css"></link>
        <link rel="stylesheet" href="easyui/themes/icon.css" type="text/css"></link>
    </head>
    <body class="easyui-layout">
        <div data-options="region:'north',title:'North Title',split:true"
            style="height: 100px;"></div>
        <div data-options="region:'south',title:'South Title',split:true"
            style="height: 100px;"></div>
        <div data-options="region:'east',title:'East',split:true"
            style="width: 100px;"></div>
        <div data-options="region:'west',title:'West',split:true"
            style="width: 100px;"></div>
        <div data-options="region:'center',title:'center title'"
            style="padding: 5px; background: #eee;"></div>
    </body>
</html>