easyui

追梦梓辰

于 2022-05-05 13:39:16 发布

阅读量318

点赞数 1

分类专栏： Java 文章标签： EasyUI 前端框架 HTML5 网页开发用户界面

本文链接：https://blog.csdn.net/weixin_63719049/article/details/124586951

版权

Java 专栏收录该内容

135 篇文章 3 订阅

订阅专栏

easyui一般用于后台搭建

为什么要使用easyui：

①.使用easyui 不需要写很多代码，只需要编写一些简单 HTML 标记，就可以定义用户界面
②.easyui 是个完美支持 HTML5 网页的完整框架
③.easyui 能节省网页开发的时间和规模
④.easyui 很简单但功能很强大，容易上手
在这里插入图片描述
easyui使用效果图:

源代码:

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <%
   String path=  request.getContextPath();
    request.setAttribute("path", path);
    
    %>
    <script>
    var path='${path}';
    </script>
    //引入jquery类库
<script type="text/javascript" src="${path }/js/jquery-easyui-1.5.5.2/jquery.min.js"></script>
//引入easyui类库
<script type="text/javascript" src="${path }/js/jquery-easyui-1.5.5.2/jquery.easyui.min.js"></script>
//引入中文
<script type="text/javascript" src="${path }/js/jquery-easyui-1.5.5.2/locale/easyui-lang-zh_CN.js"></script>
//引入easyui样式
<link rel="stylesheet" type="text/css" href="${path }/js/jquery-easyui-1.5.5.2/themes/default/easyui.css"/>
//图标
<link rel="stylesheet" type="text/css" href="${path }/js/jquery-easyui-1.5.5.2/themes/icon.css"/>

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@include file="Conut/head.jsp" %>
<!DOCTYPE html>
<html>
		
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
	<script type="text/javascript">
	//alert(path);
	</script>
</head>
<body class="easyui-layout">   
    <div data-options="region:'north',split:true" style="height:90px;text-align:center">
    <h1>书籍后台管理</h1>
    </div>   
    <div data-options="region:'south',title:'South 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:#fff;"></div>   
</body>
</html>