ASP.NET结合EasyUI实现界面布局

HerryDong

于 2019-05-05 14:05:01 发布

阅读量3.5k

点赞数 1

分类专栏： ASP.NET 文章标签： EasyUI ASP.NET 界面布局

本文链接：https://blog.csdn.net/HerryDong/article/details/89843981

版权

ASP.NET 专栏收录该内容

16 篇文章 8 订阅

订阅专栏

使用EasyUI也有一段时间了，现在总结一下其界面布局。首先EasyUI仿照ExtJS，将整个页面区域划分成了东(east)、南(south)、西(west)、北(north)、中(center)五个区域，在布局时center区域必须出现，其他区域随意。在VS中可通过NuGET引用EasyUI的相关文件.

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta charset="utf-8" />
    <title>EasyUI测试</title>
    <link href="Content/themes/default/easyui.css" rel="stylesheet" />
    <link href="Content/themes/icon.css" rel="stylesheet" />
    <script src="Scripts/jquery-1.11.3.min.js"></script>
    <script src="Scripts/jquery.easyui-1.4.5.min.js"></script>
    <script src="Scripts/locale/easyui-lang-zh_CN.js"></script>
</head>
<body class="easyui-layout">
    <!--顶部区域-->
    <div data-options="region:'north',border:false" style="height:100px;background-color:darkblue;">

    </div>

    <!--左侧导航栏-->
    <div data-options="region:'west',split:true,title:'页面导航'" style="width:250px;">

    </div>

    <!--内容区域-->
    <div data-options="region:'center',title:'内容区域'">

    </div>

    <!--页面底部-->
    <div data-options="region:'south',border:true" style="height:25px;background-color:#e0ecff;">

    </div>
</body>
</html>

上面的代码通过五个div即可完成一个通用后台管理系统的大致布局，结果如下：
在这里插入图片描述接着添加一个CSS文件，设置一下各个区域内的相关样式。

body
{

}

a,
a:link
{
    color: #000;
    text-decoration: none;
    outline: none;
}

    a:hover,
    a:focus
    {
        text-decoration: none;
        color: #39f;
    }

.header
{
    height: 100px;
    position: relative;
    z-index: 0;
    overflow: hidden;
    border-bottom: 1px #95b8e7 solid;
    background-color: darkblue;
}

.header-left
{
    position: absolute;
    z-index: 1;
    margin-top: 25px;
    margin-left: 20px;
}

    .header-left h1
    {
        font: 20px/20px Verdana;
        color: white;
    }

.side-tree .tree-node
{
    padding: 3px 0px;
}

.side-tree a
{
    display: block;
}

.side-tree .tree-node-selected
{
    padding: 2px 0;
    border: 1px #fade23 solid;
}

.footer
{
    height: 20px;
    padding: 5px;
    text-align: center;
    overflow: hidden;
    background: #e0ecff;
}

在顶部添加一行文字：

    <!--顶部区域-->
    <div class="header" data-options="region:'north',border:false">
        <div class="header-left">
            <h1>ASP.NET + EasyUI测试</h1>
        </div>
    </div>

在左侧导航栏内添加一个EasyUI的手风琴控件：

    <!--左侧导航栏-->
    <div data-options="region:'west',split:true,title:'页面导航'" style="width:250px;">
        <div class="easyui-accordion" data-options="border:false,fit:true">
            <div data-options="title:'学生管理',iconCls:'icon-ok'" style="overflow:auto;">
                <ul class="easyui-tree side-tree">
                    <li iconcls="icon-lock">
                        <a href="javascript:void(0)" data-icon="icon-lock" data-link="account.html" iframe="0">信息管理</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>

在底部添加一下版权信息：

    <!--页面底部-->
    <div class="footer" data-options="region:'south',border:true">
        &copy; 2019 DSF All Rights Reserved
    </div>

到目前为止，界面结果如下图：
在这里插入图片描述最后就是中间的内容区域。EasyUI的tab控件可以轻松实现多文档界面的生成。现在添加一个新的html文件，名称为home.html，其内容如下：

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <meta charset="utf-8" />
</head>
<body>
    <h1 style="text-align:center;">欢迎使用EasyUI,它能够帮助你进行快速布局</h1>
</body>
</html>

然后在center区域内添加一个tab,对home.html进行显示：

    <!--内容区域-->
    <div data-options="region:'center'">
        <div id="tabs" class="easyui-tabs" data-options="border:false,fit:true">
            <div title="网站首页" data-options="href:'home.html',closable:false,iconCls:'icon-tip'"></div>
        </div>
    </div>

结果如下：
在这里插入图片描述全部代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta charset="utf-8" />
    <title>EasyUI测试</title>
    <link href="Content/themes/default/easyui.css" rel="stylesheet" />
    <link href="Content/themes/icon.css" rel="stylesheet" />
    <link href="Content/Site.css" rel="stylesheet" />
    <script src="Scripts/jquery-1.11.3.min.js"></script>
    <script src="Scripts/jquery.easyui-1.4.5.min.js"></script>
    <script src="Scripts/locale/easyui-lang-zh_CN.js"></script>
</head>
<body class="easyui-layout">
    <!--顶部区域-->
    <div class="header" data-options="region:'north',border:false">
        <div class="header-left">
            <h1>ASP.NET + EasyUI测试</h1>
        </div>
    </div>

    <!--左侧导航栏-->
    <div data-options="region:'west',split:true,title:'页面导航'" style="width:250px;">
        <div class="easyui-accordion" data-options="border:false,fit:true">
            <div data-options="title:'学生管理',iconCls:'icon-ok'" style="overflow:auto;">
                <ul class="easyui-tree side-tree">
                    <li iconcls="icon-lock">
                        <a href="javascript:void(0)" data-icon="icon-lock" data-link="account.html" iframe="0">信息管理</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>

    <!--内容区域-->
    <div data-options="region:'center'">
        <div id="tabs" class="easyui-tabs" data-options="border:false,fit:true">
            <div title="网站首页" data-options="href:'home.html',closable:false,iconCls:'icon-tip'"></div>
        </div>
    </div>

    <!--页面底部-->
    <div class="footer" data-options="region:'south',border:true">
        &copy; 2019 DSF All Rights Reserved
    </div>
</body>
</html>