EasyUI初入门
程序员文章站
2022-03-30 19:23:10
...
EasyUI官网地址：http://www.jeasyui.com/
EasyUI中文地址：http://www.jeasyui.net/
初次入门还需要有html、css、js和jQuery基础，因为EasyUI框架基于jQuery开发。
解压下载的包目录如下：
，
创建一个项目，并新增一个jsp文件，引入easyui包中对应js和css文件：
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Complex Layout - jQuery EasyUI Demo</title>
<link rel="stylesheet" type="text/css"
href="<%=basePath%>/css/themes/default/easyui.css" />
<link rel="stylesheet" type="text/css"
href="<%=basePath%>/css/themes/icon.css" />
<link rel="stylesheet" type="text/css" href="<%=basePath%>/css/demo.css">
<script type="text/javascript" src="<%=basePath%>/js/jquery.min.js"></script>
<script type="text/javascript"
src="<%=basePath%>/js/jquery.easyui.min.js"></script>
<script type="text/javascript"
src="<%=basePath%>/js/easyui-lang-zh_CN.js"></script>
<script type="text/javascript" src="<%=basePath%>/js/default.js"></script>
<style type="text/css">
.easyui-accordion ul {
list-style-type: none;
margin: 0px;
padding: 5px;
}
.easyui-accordion ul li {
padding: 0px;
}
.easyui-accordion ul li a {
line-height: 24px;
}
.easyui-accordion ul li div {
margin: 2px 0px;
padding-left: 10px;
padding-top: 2px;
}
.backColor{
font-size:120%;
background-color:#BCD2EE;
}
</style>
</head>
<body class="easyui-layout">
<div data-options="region:'north',border:false"
style="height: 60px; background: #B3DFDA; padding: 10px">
<h1 style="font-size: 30px; line-height: 0px; text-indent: 0em; color: #0E2D5F;"
id="title">Daphne</h1>
</div>
<div data-options="region:'west',split:true,title:'系统导航'"
style="width: 180px; padding: 7px; overflow: hidden">
<div class="easyui-accordion" data-options="fit:true,border:false">
<!-- <div title="主页" style="padding: 8px;">
<ul>
<li>
<div>
<p>系统介绍</p>
</div>
</li>
</ul>
</div> -->
<div title="系统用户" style="padding: 8px;">
<ul>
<li>
<div>
<a target="mainFrame" ghref="<%=basePath%>user/find.do"
style="cursor: pointer;">用户信息查询</a>
</div>
</li>
<li>
<div>
<a target="mainFrame"
ghref="<%=basePath%>user/org.do"
style="cursor: pointer;">用户组织查询</a>
</div>
</li>
</ul>
</div>
<div title="系统配置" style="padding: 8px;">
<ul>
<li>
<div>
<a target="mainFrame"
ghref="<%=basePath%>sysconf/fowardQuerySysConf.do" style="cursor:pointer;">系统配置</a>
</div>
</li>
<li>
<div>
<a target="mainFrame"
ghref="<%=basePath%>apilog/fowardQueryApiLog.do" style="cursor:pointer;">查询API日志</a>
</div>
</li>
<li>
<div>
<a target="mainFrame" ghref="<%=basePath%>log/fowardQueryLog.do" style="cursor:pointer;">查询系统日志</a>
</div>
</li>
</ul>
</div>
<div title="系统报单" style="padding: 8px">
<ul>
<li>
<div>
<a target="mainFrame" ghref="<%=basePath%>log/fowardQueryLog.do" style="cursor:pointer;">系统报表</a>
</div>
</li>
</ul>
</div>
</div>
</div>
<!--<div data-options="region:'east',split:true,collapsed:true,title:'East'" style="width:100px;padding:10px;">east region</div> -->
<div data-options="region:'south',border:false"
style="height: 50px; background: #A9FACD; padding: 10px;">
<div style="text-align: center; font-weight: bold">Copyright © 2017 - 2018 cheney1993中文网, 粤ICPD备00000000号-2, All Rights Reserved.</div>
</div>
<div region="center" id="mainPanle"
style="background: #eee; overflow: hidden;">
<div id="tabs" class="easyui-tabs" fit="true" border="false">
<div title="主页" style="padding: 0px;" id="home">
<h1 style="margin-left: 20px; margin-top: 20px; font-size: 20px;">
欢迎访问Daphne官方系统</h1>
<p> 此系统为测试用，如有版权侵犯，请通知系统管理人员，我们会让相关工作人员进行处理，谢谢。</p>
</div>
</div>
</div>
</body>
</html>
访问如下：