EasyUI——入门

easyui入门

  • 搭建环境
    • 下载文档
    • 导进项目
    • 写入jsp文件调用
  • 使用测试
    • 代码
    • 运行结果

搭建环境

下载文档

在官网下载文档解压
链接: easyui官网.

导进项目

建立文件夹如下,将解压的文件导入js文件目录下
EasyUI——入门_第1张图片

写入jsp文件调用

href 路径自填,可选中easyui.css快捷键Ctrl+Shift找到路径
${pageContext.request.contextPath}指当前页面路径

<!-- 全局样式 -->
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/js/jquery-easyui-1.5.1/themes/default/easyui.css">   
<!-- 定义图标 -->
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/js/jquery-easyui-1.5.1/themes/default/easyui.css">   
<script type="text/javascript" src="${pageContext.request.contextPath}/static/js/jquery-easyui-1.5.1/jquery.min.js"></script>   
<!-- 组件库源码-js文件 -->
<script type="text/javascript" src="${pageContext.request.contextPath}/static/js/jquery-easyui-1.5.1/jquery.easyui.min.js"></script> 

使用测试

代码

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!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">
<!-- 全局样式 -->
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/js/jquery-easyui-1.5.1/themes/default/easyui.css">   
<!-- 定义图标 -->
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/js/jquery-easyui-1.5.1/themes/default/easyui.css">   
<script type="text/javascript" src="${pageContext.request.contextPath}/static/js/jquery-easyui-1.5.1/jquery.min.js"></script>   
<!-- 组件库源码-js文件 -->
<script type="text/javascript" src="${pageContext.request.contextPath}/static/js/jquery-easyui-1.5.1/jquery.easyui.min.js"></script> 
<title>登陆后的主界面</title>
</head>
<body class="easyui-layout">
	<div data-options="region:'north',border:false" style="height:60px;background:#B3DFDA;padding:10px">xxx 管理系统</div>
	<div data-options="region:'west',split:true,title:'West'" style="width:150px;padding:10px;">菜单管理</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>
	<div data-options="region:'center',title:'Center'"></div>
</body>
</html>

运行结果

EasyUI——入门_第2张图片

你可能感兴趣的:(EasyUI——入门)