EasyUI(1)：快速搭建系统界面

最新推荐文章于 2022-05-06 15:02:58 发布

dawn

最新推荐文章于 2022-05-06 15:02:58 发布

阅读量791

点赞数 4

分类专栏： EasyUI 文章标签： easyui javascript

本文链接：https://blog.csdn.net/dawn0718/article/details/120754625

版权

EasyUI 专栏收录该内容

2 篇文章 1 订阅

订阅专栏

　　使用EasyUI搭建系统界面真是easy，简单而且快！

　　1、到EasyUI的官网下载免费的包到本地，解压，安排好目录，建立空的html文件YQCYNDI.HTML。

　　2、加入引用，即css和js部分的代码。

　　3、官网上拷贝代码，地址：EasyUI 基础布局(Basic Layout)_easyui demo，拷贝布局->全屏布局，里面有现成的代码，加入到文件中。

　　4、根据需要进行调整，代码和样式最好放到单独的文件中。

　　5、完成界面搭建。

　　完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网络设备信息</title>
    <link rel="stylesheet" type="text/css" href="themes/default.css"/>
    <link rel="stylesheet" type="text/css" href="themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="themes/icon.css">
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="js/outlook2.js"></script>
    <style>
        .maintitle{
            width: 290px;
            height: 50px;
            line-height: 50px;
            text-align: center;
            font-size: 29px;
            font-weight: bold;
            float:left;
            padding:0 0 0 0;
            color:#fff;
        }
        .logOut{
            text-align: center;
            width: 180px;
            height: 50px;
            float:right;
            padding:20px 15px 0 0;
            color:#fff;
        }
        a{
            color: #ccc;
            text-decoration: none;
        }
        a:hover{
            text-decoration: none;
        }
    </style>
    <script type="text/javascript">
        var _menus = {"menus":[
                            {"menuid":"1","icon":"icon-edit","menuname":"系统配置",
                                "menus":[
                                    {"menuid":"11","menuname":"系统日志","icon":"icon-edit","url":"实际链接地址"},
                                    {"menuid":"12","menuname":"用户管理","icon":"icon-edit","url":"实际链接地址"},
                                    {"menuid":"13","menuname":"系统设置","icon":"icon-edit","url":"实际链接地址"},
                                    ]
                            },{"menuid":"2","icon":"icon-help","menuname":"设备操作",
                                "menus":[{"menuid":"21","menuname":"信息采集","icon":"icon-help","url":"实际链接地址"},
                                    {"menuid":"22","menuname":"设备管理","icon":"icon-help","url":"实际链接地址"}
                                    ]
                            },
                    ]};

    </script>
</head>
<body class="easyui-layout">
	<div data-options="region:'north',border:false,noheader:true" style="height:60px;background:#3c3c3c;padding:10px">
        <div class="maintitle">网络设备信息</div>
        <div class="logOut">[用户名称]　|　<a href="">退出系统</a></div>
    </div>
	<div data-options="region:'west',split:true,title:'菜单',iconcls:'icon-large_smartart'" style="width:199px;padding:10px;background:#e0ecff">
        <div id="nav" class="easyui-accordion" fit="true" border="false">
            <!--  导航内容 -->			
        </div>
    </div>
	<div data-options="region:'center',title:''" style="overflow: hidden;">
        <div id="tabs">
            <div title="欢迎页" iconCls="icon-large_smartart" style="padding: 0 10px;display: block;">
                <p>欢迎使用网络设备信息</p>
            </div>    
        </div>
    </div>
	<div data-options="region:'south',border:false" style="height:39px;line-height:19px;background:#ccc;padding:10px;text-align: center;">欢迎使用网络设备信息系统　2021年10月13日</div>

    <script>
        $('#tabs').tabs({
            fit:true,
            border:false,
        });
    </script>>
</body>
</html>

　　完成的界面：

　　后面就可以完成具体的实现了。

dawn

关注

4
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
EasyUI(1)：快速搭建系统界面

　　使用EasyUI搭建系统界面真是easy，简单而且快！　　1、到EasyUI的官网下载免费的包到本地，解压，安排好目录，建立空的html文件YQCYNDI.HTML。　　2、加入引用，即css和js部分的代码。　　3、官网上拷贝代码，地址：EasyUI 基础布局(Basic Layout)_easyui demo，拷贝布局->全屏布局，里面有现成的代码，加入到文件中。　　4、根据需要进行调整，代码和样式最好放到单独的文件中。　　5、完成界面搭建。　　完整代码：<
复制链接

扫一扫