1.EasyUI(搭建框架&layout布局)简单介绍
2、创建一个web项目
3、导入EasyUI必要的css样式和js文件
4、在jsp页面中引入css样式和js文件
目录
1.EasyUI(搭建框架&layout布局)简单介绍
easyui是一种基于jQuery、Angular.、Vue和React的用户界面插件集合。
easyui为创建现代化,互动,JavaScript应用程序,提供必要的功能。
使用easyui你不需要写很多代码,你只需要通过编写一些简单HTML标记,就可以定义用户界面。
easyui是个完美支持HTML5网页的完整框架。
easyui节省您网页开发的时间和规模。
easyui很简单但功能强大的。
2、创建一个web项目
3、导入EasyUI必要的css样式和js文件
4、在jsp页面中引入css样式和js文件
<script type="text/javascript" src="js/jquery-easyui-1.5.5.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery-easyui-1.5.5.2/jquery.easyui.min.js"></script>
<script type="text/javascript" src="js/jquery-easyui-1.5.5.2/locale/easyui-lang-zh_CN.js"></script>
<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"/>
4.1、我们可以使用一个公用的head.jsp页面来统一引入需要的资源,其他页面使用include进行引入,便于管理。
4.2、在webapp下创建common目录, head.jsp
script type="text/javascript" src="js/jquery-easyui-1.5.5.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery-easyui-1.5.5.2/jquery.easyui.min.js"></script>
<script type="text/javascript" src="js/jquery-easyui-1.5.5.2/locale/easyui-lang-zh_CN.js"></script>
<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"/>4.3、将引入样式和文件的代码移到head.jsp中
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
%
//拿到绝对路径,例如:demo/
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 type="text/javascript">
//将拿到的路径赋值给js变量
var ctx = "${ctx}";
</script>
4.4、使用包含导入到其他的jsp页面中<%@ include file="common/head.jsp" %>
四、layout布局
<body class="easyui-layout">
<div data-options="region:'north',title:'芜湖',split:true" style="height:100px;"></div>
<div data-options="region:'west',title:'功能导航',split:true" style="width:100px;"></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>