easyui入门

最新推荐文章于 2024-07-16 22:31:12 发布

微醺3

最新推荐文章于 2024-07-16 22:31:12 发布

阅读量46

点赞数

分类专栏： JAVA基础文章标签： easyui jquery

本文链接：https://blog.csdn.net/m0_55556488/article/details/120254596

版权

JAVA基础专栏收录该内容

38 篇文章 0 订阅

订阅专栏

一、简介
1、ui框架比较
easyui=jquery+tml4(用来做后台的管理界面)——2016版本，不要钱

bootstrap=jQuery+HTML5——2016-2018，要钱，api文档不全

layui——2018-2019，不要钱，有bug，文档不全

2、我们为什么要学习easyui
从效果来看easyui的界面效果要远远差于bootstrap，跟layui比，界面效果也更差。

从金钱的角度上，开发首先会排除掉bootstrap

从学习文档的完整性、前端框架的稳定性，组件的丰富性考虑，easyui都要优于layui

Why：快速开发

What：HTML4——jQuery的快速开发放入前端框架

Where：后端开发管理界面

常用控件：layout、tree、tabs、datagrid、form、messager、combobox

二、主界面布局
web.xml

<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://xmlns.jcp.org/xml/ns/javaee" xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd" id="WebApp_ID" version="3.1">
  <display-name>web_easyui</display-name>
  <welcome-file-list>
    <welcome-file>index.html</welcome-file>
    <welcome-file>index.htm</welcome-file>
    <welcome-file>index.jsp</welcome-file>
    <welcome-file>default.html</welcome-file>
    <welcome-file>default.htm</welcome-file>
    <welcome-file>default.jsp</welcome-file>
  </welcome-file-list>
</web-app>

导入静态资源文件夹内含有的easyui相关依赖库

Ctrl+Shift+R，找到easyui 可以有多种样式选择

路劲改为项目的全路径，为了使别人使用，自己方便改项目，建议以下操作使路径更加灵活性

<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/static/js/jquery-easyui-1.5.1/themes/default/easyui.css">   
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/static/js/jquery-easyui-1.5.1/themes/icon.css">   
<script type="text/javascript" src="${pageContext.request.contextPath }/static/js/jquery-easyui-1.5.1/jquery.min.js"></script>   
<script type="text/javascript" src="${pageContext.request.contextPath }/static/js/jquery-easyui-1.5.1/jquery.easyui.min.js"></script>

index界面

<%@ 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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>书籍后端主界面</title>
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/static/js/jquery-easyui-1.5.1/themes/default/easyui.css">   
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/static/js/jquery-easyui-1.5.1/themes/icon.css">   
<script type="text/javascript" src="${pageContext.request.contextPath }/static/js/jquery-easyui-1.5.1/jquery.min.js"></script>   
<script type="text/javascript" src="${pageContext.request.contextPath }/static/js/jquery-easyui-1.5.1/jquery.easyui.min.js"></script>  
 
</head>
<body class="easyui-layout">   
    <div data-options="region:'north',title:'网上书城',split:true" style="height:100px;"></div>   
    <div data-options="region:'south',title:'版权/链接',split:true" style="height:100px;"></div>   
    <div data-options="region:'east',iconCls:'icon-reload',title:'East',split:true" style="width:100px;"></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>

展示效果：

微醺3

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
easyui入门

一、简介1、ui框架比较easyui=jquery+tml4(用来做后台的管理界面)——2016版本，不要钱bootstrap=jQuery+HTML5——2016-2018，要钱，api文档不全layui——2018-2019，不要钱，有bug，文档不全2、我们为什么要学习easyui从效果来看easyui的界面效果要远远差于bootstrap，跟layui比，界面效果也更差。从金钱的角度上，开发首先会排除掉bootstrap从学习文档的完整性、前端框架的稳定性，组件的丰富性考虑，
复制链接

扫一扫

专栏目录