easyui layout 布局实例

版本:easyui1.4.2

下载:http://www.jeasyui.com/download/downloads/jquery-easyui-1.4.3.zip

以常用的 admin 后台布局为例

最终效果如图:

easyui layout 布局实例_第1张图片

参考代码如下:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Admin layout</title>
    <!-- 引入核心js文件 -->
    <link rel="stylesheet" type="text/css" href="./assets/css/easyui.css">
    <link rel="stylesheet" type="text/css" href="./assets/css/icon.css">
    <!-- 引入核心脚本文件 -->
    <script type="text/javascript" src="./assets/js/jquery.min.js"></script>
    <script type="text/javascript" src="./assets/js/jquery.easyui.min.js"></script>
    <!-- 测试样式代码 -->
    <style>
        #logo {
            width: auto;
            height: 40px;
            line-height: 52px;
            font-size: 24px;
            padding-left: 40px;
        }
        #footer {
            background: #E7F0FF;
            height: 30px;
            /*line-height: 45px;*/
            text-align: center;
            font-size: 14px;
            color: #666;
            padding-top: 5px;
        }
    </style>
</head>
<body class="easyui-layout">
    <!-- header -->
    <div data-options="region:'north',split:true" style="height:60px;background:#E7F0FF;">
        <div id="logo">
            Admin
        </div>
    </div><!-- // end header -->
    <!-- main -->
    <div data-options="region:'center',border:false">
        <div class="easyui-layout" data-options="fit:true">
            <!-- siderbar -->
            <div data-options="region:'west',split:true" title="功能菜单" style="width:18%;">
                <div class="easyui-accordion" data-options="fit:true,border:false">
                    <div title="Title1" data-options="iconCls:'icon-save'" style="overflow:auto;padding:15px;">
                        <h3 style="color:#0099FF;">Accordion for jQuery</h3>
                        <p>Accordion is a part of easyui framework for jQuery.
                        It lets you define your accordion component on web page more easily.</p>
                    </div>
                    <div title="Title2" data-options="iconCls:'icon-reload',selected:true" style="padding:10px;">
                        content2
                    </div>
                    <div title="Title3" style="padding:10px">
                        content3
                    </div>
                </div>
            </div><!-- // end siderbar -->
            <!-- content -->
            <div data-options="region:'center'">
                <div class="easyui-tabs" data-options="fit:true,border:false,plain:true">
                    <div title="首页" data-options="href:''" style="padding:10px">
                        这是首页 哈哈~
                    </div>
                    <div title="数据表格" style="padding:5px">
                        <table class="easyui-datagrid"
                                data-options="url:'datagrid_data1.json',method:'get',singleSelect:true,fit:true,fitColumns:true">
                            <thead>
                                <tr>
                                    <th data-options="field:'itemid'" width="80">Item ID</th>
                                    <th data-options="field:'productid'" width="100">Product ID</th>
                                    <th data-options="field:'listprice',align:'right'" width="80">List Price</th>
                                    <th data-options="field:'unitcost',align:'right'" width="80">Unit Cost</th>
                                    <th data-options="field:'attr1'" width="150">Attribute</th>
                                    <th data-options="field:'status',align:'center'" width="50">Status</th>
                                </tr>
                            </thead>
                        </table>
                    </div>
                </div>
            </div><!-- // end content -->
        </div>
    </div><!-- // end main -->
    <!-- footer -->
    <div data-options="region:'south',split:true" id="footer" >
        Copyright 2015 &copy; xxxx. All Rights Reserved.
    </div><!-- // end footer -->
</body>
</html>


你可能感兴趣的:(easyui,layout)