EasyUI介绍及搭建框架和layout布局

最新推荐文章于 2024-06-05 10:05:00 发布

【小袁】

最新推荐文章于 2024-06-05 10:05:00 发布

阅读量1.2k

点赞数

文章标签： easyui

本文链接：https://blog.csdn.net/m0_62839141/article/details/123976057

版权

一，EasyUI是什么？

EasyUI是一组基于jQuery的UI插件集合体，而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面。开发者不需要编写复杂的javascript，也不需要对css样式有深入的了解，开发者需要了解的只有一些简单html标签。

外文名：jQueryEasyUI

定义：基于jQuery的UI插件集合体

应用对象：web开发者

二，框架的搭建

2.1，首先去管网下载相应的easyui版本的压缩包点我下载

2.2下载完解压之后

2.3，开始搭建

1，首先创建一个web项目

2，导入必要的jss样式和js文件

注:jquery-easyui-1.5.5.2本来是里面不止上图这些东西删了一些没必要留下一些必要的

locale：文件包主要是用来编译语言

3，引入jss样式和js文件


<!-- 引入JQuery（jquery.min.js） --> 
<script type="text/javascript" src="js/jquery-easyui-1.5.5.2/jquery.min.js"></script>
<!--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="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"/>

4，关于路径问题

思路：使用一个公用的head.jsp页面来统一引入需要的资源，其他页面使用include进行引入，便于管理。

在web项目下创建common目录下去创一个head.jsp

4.1，将代码移到head.jsp中

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
	/* 拿到绝对路径存到request中 */
	request.setAttribute("ctx",request.getContextPath());
%>
<!--  -->
<script type="text/javascript" src="${ctx}/js/jquery-easyui-1.5.5.2/jquery.min.js"></script>
<script type="text/javascript" src="${ctx}/js/jquery-easyui-1.5.5.2/jquery.easyui.min.js"></script>
<script type="text/javascript" src="${ctx}/js/jquery-easyui-1.5.5.2/locale/easyui-lang-zh_CN.js"></script>
<link rel="stylesheet" type="text/css" href="${ctx}/js/jquery-easyui-1.5.5.2/themes/default/easyui.css"/>
<link rel="stylesheet" type="text/css" href="${ctx}/js/jquery-easyui-1.5.5.2/themes/icon.css"/>
<script>
	var ctx = '${ctx}';
</script>

4.2，使用include(包含)导入head.jsp

<%@ include file="common/head.jsp" %>

三，layout布局

3.1，可以查看“jQuery EasyUI 1.5API 中文版“，在其中找到layout组件。

3.2，把我们想要的拿到jsp页面中

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
	<%@ include file="common/head.jsp" %>
<title>Insert title here</title>
</head>
<body class="easyui-layout">  
    <div data-options="region:'west',title:'功能导航',split:true" style="width:150px;"></div>   
    <div data-options="region:'center',title:'center title'" style="padding:5px;background:#eee;"></div> 
    <div data-options="region:'south',split:true" style=" text-align:center;height:30px;background: #E0ECFF" class="panel-title">
    	Copyright@XXXX有限责任公司
    </div>  
</body>  
</html>

效果图:

【小袁】

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
EasyUI介绍及搭建框架和layout布局

一，EasyUI是什么？EasyUI是一组基于jQuery的UI插件集合体，而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面。开发者不需要编写复杂的javascript，也不需要对css样式有深入的了解，开发者需要了解的只有一些简单html标签。外文名：jQueryEasyUI定义：基于jQuery的UI插件集合体应用对象：web开发者二，框架的搭建2.1首先去管网下载http://www.jeasui.net/http://..
复制链接

扫一扫