easyui(基本布局)

最新推荐文章于 2024-05-25 15:41:54 发布

原创最新推荐文章于 2024-05-25 15:41:54 发布

· 697 阅读

0 ·

版权

文章标签：

#easyui #javascript #ecmascript

这是一个使用Java语言和EasyUI创建的管理界面示例。页面包含头部样式，实现了北、南、西、中四个区域布局，并加载了EasyUI的相关样式和JavaScript库，支持中文显示。头部样式中设置了路径获取并弹出，同时引入了EasyUI的样式和脚本文件，为前端界面提供了基础框架。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、主界面

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!-- 引入head -->
<%@ include file="common/head.jsp" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
	/* alert(ctx);--弹出路径 */
</script>
</head>
<body class="easyui-layout">   
    <div data-options="region:'north',split:true" style="height:100px;text-align: center;"><h2>管理界面</h2></div>   
    <div data-options="region:'south',split:true" style="height:70px;text-align: center;">&copy;所有权归波哥有，未经允许不准转让</div>   
    <div data-options="region:'west',title:'工具栏',split:true" style="width:100px;"></div>   
    <div data-options="region:'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();
	request.setAttribute("ctx", path);
%>
<script type="text/javascript">
	var ctx='${ctx}';
</script>
<!-- 引入EasyUI的样式文件（/themes/default/easyui.css） -->
<link rel="stylesheet" type="text/css" href="${ctx}/js/jquery-easyui-1.5.5.2/themes/default/easyui.css"/>

<!-- 引入EasyUI的图标样式文件（/themes/icon.css） -->
<link rel="stylesheet" type="text/css" href="${ctx}/js/jquery-easyui-1.5.5.2/themes/icon.css"/>

<!-- 引入JQuery（jquery.min.js） -->
<script type="text/javascript" src="${ctx}/js/jquery-easyui-1.5.5.2/jquery.min.js"></script>

<!-- 引入EasyUI（jquery.easyui.min.js） -->
<script type="text/javascript" src="${ctx}/js/jquery-easyui-1.5.5.2/jquery.easyui.min.js"></script>

<!-- 引入EasyUI的中文国际化js，让EasyUI支持中文（locale/easyui-lang-zh_CN.js） -->
<script type="text/javascript" src="${ctx}/js/jquery-easyui-1.5.5.2/locale/easyui-lang-zh_CN.js"></script>