EasyUi入门

最新推荐文章于 2022-05-10 14:26:28 发布

electronic老倒霉蛋

最新推荐文章于 2022-05-10 14:26:28 发布

阅读量282

点赞数 1

文章标签： jquery javascript css

本文链接：https://blog.csdn.net/hhhhhhhhzsw/article/details/106887603

版权

EasyUi简介

easyui是一种基于jQuery、Angular.、Vue和React的用户界面插件集合。

easyui为创建现代化，互动，JavaScript应用程序，提供必要的功能。

使用easyui你不需要写很多代码，你只需要通过编写一些简单HTML标记，就可以定义用户界面。

easyui是个完美支持HTML5网页的完整框架。

easyui节省您网页开发的时间和规模。

easyui很简单但功能强大的。

为什么要学习EasyUi

EasyUi跟layui和bootstrap比，界面效果比不上两者，但是它是免费的，bootstrap需要收费，而且从学习文档的完整性。前端框架的稳定性，组件的丰富性，easyui都要优于layui。

下载EasyUi

EasyUi下载点击链接进入下载网站
在这里插入图片描述

案例

好了，现在我们就可以使用了
将我们解压后的文件放在js的项目下面。
在这里插入图片描述
导入EasyUI的CSS和Javascript文件到页面

<%@ 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">
<!-- 全局样式 -->
<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/default/easyui.css"> 
<script type="text/javascript" src="${pageContext.request.contextPath }/static/js/jquery-easyui-1.5.1/jquery.min.js"></script>   
<!-- 组件库源码的js文件 -->  
<script type="text/javascript" src="${pageContext.request.contextPath }/static/js/jquery-easyui-1.5.1/jquery.easyui.min.js"></script>  
<title>登录后的主界面</title>
</head>
<body class="easyui-layout">
	<div data-options="region:'north',border:false" style="height:60px;background:#B3DFDA;padding:10px">north region</div>
	<div data-options="region:'west',split:true,title:'West'" style="width:150px;padding:10px;">west content</div>
	<div data-options="region:'east',split:true,collapsed:true,title:'East'" style="width:100px;padding:10px;">east region</div>
	<div data-options="region:'south',border:false" style="height:50px;background:#A9FACD;padding:10px;">south region</div>
	<div data-options="region:'center',title:'Center'"></div>
</body>
</html>

效果图
在这里插入图片描述

总结

今天的内容就分享到这，谢谢大家！

electronic老倒霉蛋

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
EasyUi入门

目录EasyUi简介为什么要学习EasyUi下载EasyUi案例总结EasyUi简介easyui是一种基于jQuery、Angular.、Vue和React的用户界面插件集合。easyui为创建现代化，互动，JavaScript应用程序，提供必要的功能。使用easyui你不需要写很多代码，你只需要通过编写一些简单HTML标记，就可以定义用户界面。easyui是个完美支持HTML5网页的完整框架。easyui节省您网页开发的时间和规模。easyui很简单但功能强大的。为什么要学习EasyUi
复制链接

扫一扫