easyui入门

最新推荐文章于 2022-05-04 18:38:52 发布

夺命关东煮

最新推荐文章于 2022-05-04 18:38:52 发布

阅读量88

点赞数

文章标签： easyui

本文链接：https://blog.csdn.net/xyy_0517/article/details/120257128

版权

思维导图

一，介绍

UI框架介绍：
easyui=jquery+html4（用来做后台的管理界面） 2016 不要钱；
bootstrap=jquery+html5 2016-2018 要钱、api文档不全；
layui 2018-2021 不要钱有bug、文档不全。

我们为什么要学习easyui

Why：快速开发

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

Where：后端开发管理界面

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

特点：

easyui是一种基于jQuery的用户界面插件集合
是HTML5网页的完整框架
界面简洁
有完整详细的api文档

常用控件：

layout（布局控件）、tree（树型菜单）、tabs（选项卡）、datagrid（表格控件）

form（表单控件）、messager（消息框）、combobox（下拉列表）

二，使用

1，EasyUI官网（可在官网中进行下载）

JQuery EasyUI中文网

1，导入相关依赖和需要的文件夹【css(主要放样式)、images（主要放图片）、js（放样式）】

2，

3，在jsp界面导入相对路径（最好放入绝对路径）

选中蓝色部分（按Ctrl+shift+r）可以快速找并复制绝对路径

四，

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- ctrl+shift+r -->
<!-- ctrl+shift+/ 注释-->
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/js/jquery-easyui-1.5.1/themes/gray/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>  
<script type="text/javascript" src="${pageContext.request.contextPath}/static/js/index.js"></script>  


</head>
<body>
<div id="cc" class="easyui-layout" style="width:600px;height:400px;">   
    <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:'west',title:'菜单管理 ',split:true" style="width:200px;">
	
	<!-- 
	缺陷：
	1，样式缺陷
	2，不好做数据的渲染，树形结构的动态显示
	 -->
	<ul id="tt"> </ul>
    </div>   
    <div data-options="region:'center',title:'内容区 '" style="padding:5px;background:#eee;"></div>   
</div>  
</body>
</html>

效果：

夺命关东煮

关注

0
点赞
踩
0

收藏

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

思维导图一，介绍UI框架介绍：easyui=jquery+html4（用来做后台的管理界面） 2016 不要钱；bootstrap=jquery+html5 2016-2018 要钱、api文档不全；layui 2018-2021 不要钱有bug、文档不全。我们为什么要学习easyuiWhy：快速开发What：HTML4——jQuery的快速开发放入前端框架Where：后端开发管理界面常用控件：layout、tree、tabs、...
复制链接

扫一扫