EasyUi(搭建框架和layout布局)

最新推荐文章于 2024-01-22 20:01:12 发布

hello world都不会的小白

最新推荐文章于 2024-01-22 20:01:12 发布

阅读量1.1k

点赞数

文章标签： java

本文链接：https://blog.csdn.net/uuuu_lllll/article/details/123978458

版权

抛出疑问EasyUi是什么??

简单来说EasyUi就是基于jquery的页面组件集合，里面提供了丰富的组件的集合。使用它的web开发者会更加轻松的打造出美观的UI页面。

怎么下载它？？

下载的话呢可以直接去官网下载对应的EasyUi版本。点击下载

下载完之后解压就会得到这个文件夹（我下的是1.5.5.2版本）

搭建框架

在web项目里导入所需的css样式和js文件(我使用eclipse为例)

然后我们就需要在页面中引入刚导入的css样式和插件

<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"/>

为了方便以后的引入我们可以创建一个jsp页面对需要大量使用的文件进行封装

<%@ page language="java" contentType="text/html; charset=UTF-8"
   pageEncoding="UTF-8"%>

<%
   request.setAttribute("ctx", request.getContextPath());
%>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<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"/>


<!--页面缓存-->
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">

其它页面可在头部(head)中使用include进行包含

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

layout布局

我们可以EasyUi官网中找到其中的layout组件

我们可以从中C+V（滑稽）拿到我们想要的复制到所需的jsp页面中

<%@ 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>
	<%@ include file="common/head.jsp" %>
</head>


<body class="easyui-layout">   
    <div data-options="region:'north',title:'后台管理系统',split:true" style="height:50px;">
    	EasyUi
    </div>   
     <div data-options="region:'south',split:true" style=" text-align:center;height:30px;background: #E0ECFF" class="panel-title">
    	Copyright@XXXX有限责任公司
    </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>   
</body>  


</html>

效果图:

hello world都不会的小白

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
EasyUi(搭建框架和layout布局)

抛出疑问EasyUi是什么?? 简单来说EasyUi就是基于jquery的页面组件集合，里面提供了丰富的组件的集合。使用它的web开发者会更加轻松的打造出美观的UI页面。怎么下载它？？下载的话呢可以直接去官网下载对应的EasyUi版本。点击下载下载完之后解压就会得到这个文件夹（我下的是1.5.5.2版本）搭建框架在web项目里导入所需的css样式和js文件(我使用eclipse为例)然后我们就需要在页面中...
复制链接

扫一扫