easyui01:基本布局

最新推荐文章于 2022-05-10 13:02:50 发布

小陈爱吃糖- T L

最新推荐文章于 2022-05-10 13:02:50 发布

阅读量725

点赞数

分类专栏： easyui 文章标签： easyui eclipse

本文链接：https://blog.csdn.net/weixin_62735525/article/details/124529451

版权

easyui 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

该博客展示了如何使用EasyUI快速构建一个后台管理页面，包括设置页面布局、引入EasyUI资源以及创建功能导航。代码示例中，作者定义了north、south、west和center四个区域，并在公共页面中引入了EasyUI的CSS、图标库和JavaScript文件。

摘要由CSDN通过智能技术生成

先通过图片了解easyui

下载的官方网站：

EasyUI - helps you build your web pages easily

代码块：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <!-- 引入公共页面 -->
<%@ include file="common/head.jsp" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
<script type="text/javascript">

</script>
</head>
<body class="easyui-layout">   
    <div data-options="region:'north',split:true" style="height:80px;text-align:center;">
    <h1>后台书籍管理</h1>
    </div>   
    <div data-options="region:'south',split:true" style="height:70px;text-align:center;">
     	&copy;玉渊工作室所有,未经允许不可擅自使用
    </div>   
    <div data-options="region:'west',title:'功能导航${ctx}',split:false" style="width:150px;"></div>   
    <div data-options="region:'center',title:'center title'" style="padding:5px;background:#eee;"></div>   
</body> 
</html>

公共页面的代码：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
	String path =  request.getContextPath();
	//System.out.print(path); /easyui01
	request.setAttribute("ctx",path);//${ctx}
	//String a = (String) request.getAttribute("ctx");
	//System.out.print(a); //System.out.print(path);
%>
<script type="text/javascript">
	var ctx = '${ctx}';
</script>
<!--引入easyui的css  -->
<link rel="stylesheet" type="text/css" href="${ctx}/js/jquery-easyui-1.5.5.2/themes/default/easyui.css"/>
<!--引入easyui的图标库 -->
<link rel="stylesheet" type="text/css" href="${ctx}/js/jquery-easyui-1.5.5.2/themes/icon.css"/>
<!--引入jQuery类库 -->
<script type="text/javascript" src="${ctx}/js/jquery-easyui-1.5.5.2/jquery.min.js"></script>
<!--引入easyui类库 -->
<script type="text/javascript" src="${ctx}/js/jquery-easyui-1.5.5.2/jquery.easyui.min.js"></script>
<!--引入easyui的语言包 支持中文 -->
<script type="text/javascript" src="${ctx}/js/jquery-easyui-1.5.5.2/locale/easyui-lang-zh_CN.js"></script>

效果图：