EasyUI初入门

最新推荐文章于 2021-09-10 19:38:20 发布

Cheney1993

最新推荐文章于 2021-09-10 19:38:20 发布

阅读量420

点赞数

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

本文链接：https://blog.csdn.net/Cheney1993/article/details/82635026

版权

EasyUI 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

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>&nbsp;&nbsp;&nbsp;&nbsp;此系统为测试用，如有版权侵犯，请通知系统管理人员，我们会让相关工作人员进行处理，谢谢。</p>
			</div>
		</div>
	</div>
	
</body>
</html>

访问如下：

Cheney1993

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
EasyUI初入门

EasyUI官网地址：http://www.jeasyui.com/EasyUI中文地址：http://www.jeasyui.net/初次入门还需要有html、css、js和jQuery基础，因为EasyUI框架基于jQuery开发。解压下载的包目录如下：，创建一个项目，并新增一个jsp文件，引入easyui包中对应js和css文件：&lt;%@ page la...
复制链接

扫一扫

专栏目录