easyui01-CFANZ编程社区

一、初始easyui

1.1.什么是 easyui ？

1.2.常见的ui：

1.3.easyui 能带给我们什么好处？

二、准备工作

三、easyui框架的使用

1.1.什么是 easyui ？

easyui 是一种基于 jQuery 的用户界面插件集合。

1.2.常见的ui：

Layui，Bootstrap，element ui,ant design,iview。

1.3.easyui 能带给我们什么好处？

                1.easyui 是个完美支持HTML5网页的完整框架；
                2.easyui 节省网页开发的时间和规模；
                3.easyui 很简单但功能强大。

1.下载 easyui 文件

easyui 官方下载地址：

Download EasyUI Package - jQuery,Angular,React,Vue

导入 easyui 文件包

2.导入 jQuery 库（ easyui 是基于 jquery 的）

3.引入必要的 js 和 css 文件

1.引入JQuery（jquery.min.js）

<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>

引入 easyui 相关文件

2.引入EasyUI（jquery.easyui.min.js）

<script type="text/javascript" src="js/jquery-easyui-1.5.5.2/jquery.easyui.min.js"></script>

3.引入 EasyUI 的中文国际化 js ，让 EasyUI 支持中文（locale/easyui-lang-zh_CN.js）

<script type="text/javascript" src="static/js/jquery-easyui-1.5.5.2/locale/easyui-lang-zh_CN.js"></script>

4.引入 EasyUI 的样式文件（/themes/default/easyui.css）

<link rel="stylesheet" type="text/css" href="js/jquery-easyui-1.5.5.2/themes/default/easyui.css" />

5.引入 EasyUI 的图标样式文件（/themes/icon.css）

<link rel="stylesheet" type="text/css" href="js/jquery-easyui-1.5.5.2/themes/icon.css" />

推荐使用

base 标签（规定页面上所有链接的默认 URL 和默认目标）。

语法：

<head><base href="全局地址" target="全局属性"></head>

新建名为 common（公共的）文件夹，在该文件夹内新建 head.jsp 页面存储公共资源代码。

（开头）

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<base href="${pageContext.request.contextPath }/static/" />

在引用目录不用写路径名，因为 base 标签的 href 属性里面的内容会自动添加在 head 标签里面的引入的路径前面。

<!-- 引入jquery库 -->
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<!-- 引入easyui相关文件 -->
<!-- 引入js文件 -->
<script type="text/javascript" src="js/jquery-easyui-1.5.5.2/jquery.easyui.min.js"></script>
<!-- 引入easyui的中文国际化js -->
<script type="text/javascript" src="static/js/jquery-easyui-1.5.5.2/locale/easyui-lang-zh_CN.js"></script>
<!-- 引入css样式文件 -->
<link rel="stylesheet" type="text/css" href="js/jquery-easyui-1.5.5.2/themes/default/easyui.css"/>
<!-- 引入图片库 -->
<link rel="stylesheet" type="text/css" href="js/jquery-easyui-1.5.5.2/themes/icon.css"/>

（结尾）

总结：在网站制作中有很多部分的代码是相同的，重复写的话太繁琐了，所以可以把这些代码放在一个公共的页面，然后在需要使用这些公共资源的地方引入即可。

<!-- 通过include指令引入公共部分页面head.jsp -->
<%@ include file="static/common/head.jsp" %>

可以去 JQuery EasyUI中文网查找你要使用的插件，也可下载 easyui 离线中文文档

选择一个插件，复制代码即可使用。

可以自己试着使用这些插件，如图：这是用 easyui 插件完成的界面

主界面代码：

<%@ 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">
<title>主界面</title>
<!-- 通过include指令引入公共部分页面head.jsp -->
<%@ include file="static/common/head.jsp" %>
</head>
<!-- layout（布局） -->
<body class="easyui-layout"> 
    <div data-options="region:'north',title:'网上书城',split:true" style="height:100px;"></div>   
    <div data-options="region:'south',title:'South Title',split:true" style="height:100px;"></div>
    <div data-options="region:'west',title:'菜单管理',split:true" style="width:100px;">
    <div id="aa" class="easyui-accordion" style="width:300px;height:200px;">
    	<!-- accordion（分类）    -->
   		<div title="Title1" data-options="iconCls:'icon-reload'" style="overflow:auto;padding:10px;">   
        	<h3 style="color:#0099FF;">Accordion for jQuery</h3>   
        	<p>Accordion is a part of easyui framework for jQuery.     
        	It lets you define your accordion component on web page more easily.</p>   
    	</div> 
    	<div title="Title2" data-options="iconCls:'icon-reload'" style="padding:10px;">   
        	<h3 style="color:#0099FF;">Accordion for jQuery</h3>   
        	<p>Accordion is a part of easyui framework for jQuery.     
        	It lets you define your accordion component on web page more easily.</p>    
    	</div>   
    	<div title="Title3" data-options="iconCls:'icon-reload'" style="padding:10px;">   
        	<h3 style="color:#0099FF;">Accordion for jQuery</h3>   
        	<p>Accordion is a part of easyui framework for jQuery.     
        	It lets you define your accordion component on web page more easily.</p>   
    	</div>   
		</div>  
    </div>   
    <div data-options="region:'center',title:'内容区域'" style="padding:5px;background:#eee;">
    	<!-- tabs（选项卡） -->
    	<div id="tt" class="easyui-tabs" style="width:100%;height:100%;">   
    		<div title="Tab1" data-options="iconCls:'icon-reload',closable:true" style="padding:20px;display:none;">   
        		tab1    
    		</div>   
    		<div title="Tab2" data-options="iconCls:'icon-reload',closable:true" style="overflow:auto;padding:20px;display:none;">   
        		tab2    
    		</div>   
    		<div title="Tab3" data-options="iconCls:'icon-reload',closable:true" style="padding:20px;display:none;">   
        		tab3    
    		</div>   
		</div>  
    </div>   
</body>
</html>

完。