EasyUI(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>

　　完成的界面：

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

EasyUI(1)：快速搭建系统界面相关推荐

【Android】通用系列 —— 快速搭建设置界面
## [关键词] `通用系列` `设置界面` `自定义View` ## [问题] · 减少重复性代码,快速搭建设置界面(通过简单的配置,就可以达到想要的布局): ## [效果图] ## [分析] - ...
Web开发之使用【easyui】快速搭建管理员主界面
大家好呀,我是[小阿飞_]
Vue2 Element | 一文带你快速搭建网页界面UI
使用OM-UI快速搭建系统前台框架
WebRoot里面的目录结构为: [img]http://dl2.iteye.com/upload/attachment/0092/6034/922edd55-e61a-3f58-b37d-9783e ...
使用easyui快速搭建管理员主界面
使用easyui快速搭建管理员主界面 easyui 主页:index.jsp sidebarTree.json:左侧菜单内容 easyui easyui又叫Jquery EasyUI,是基于Jquer ...
python 爬虫系统_实战干货：从零快速搭建自己的爬虫系统
近期由于工作原因,需要一些数据来辅助业务决策,又无法通过外部合作获取,所以使用到了爬虫抓取相关的数据后,进行分析统计.在这个过程中,也看到很多同学爬虫相关的文章,对基础知识和所用到的技术分析得很到位, ...
pythonweb快速开发平台_30分钟快速搭建Web CRUD的管理平台--django神奇魔法
加上你的准备的时间,估计30分钟完全够用了,因为最近在做爬虫管理平台,想着快速开发,没想到python web平台下有这么非常方便的框架,简洁而优雅.将自己的一些坑总结出来,方便给大家的使用. 准备环 ...
RDIFramework.NET-.NET快速信息化系统开发整合框架【开发实例 EasyUI】之产品管理（MVC版）...
RDIFramework.NET-.NET快速信息化系统开发整合框架 [开发实例 EasyUI]之产品管理(MVC版) RDIFramework.NET-.NET快速开发整合框架 [开发实例]之产品管 ...
linux webshell 页面管理,instantbox：30s内快速搭建可通过webshell管理的Linux系统
点击上方蓝色字体,关注我们如何快速搭建一个Linux环境,肯定非docker莫属. 但通过instantbox,可以带给我们比docker更好的体验: 在不到 30s 内快速搭建一个干净.开箱即用的 ...

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

EasyUI(1)：快速搭建系统界面相关推荐

最新文章

热门文章