easyui入门

最新推荐文章于 2021-09-10 17:21:16 发布

花千邪

最新推荐文章于 2021-09-10 17:21:16 发布

阅读量104

点赞数

本文链接：https://blog.youkuaiyun.com/m0_47252566/article/details/106891513

版权

easyui入门

ui框架主流

ui框架主流

easyui

由jQuery和html4组成，一般用来做后台的管理界面
优点：
1、代码简洁；
2、比较稳定；
3、组件比较丰富；
4、免费
缺点：
不美观，不支持响应式。

bootstrap

由jQuery和html5组成
优点：
1、界面美观；
2、免费；
缺点：
bootstrap不是免费的，代码量多，不易于维护

layui

优点：
1、免费；
2、界面美观；
缺点：
layui稳定性不如easyui,有bug

为什么学习easyui?

1、从金钱的角度上，开发首先会排除掉bootstrap
2、从学习文档的完整性、前端框架的稳定性，组件的丰富性考虑，easyui都要
优于layui
3、从公司的角度考虑选用那个框架：
easyui成本、公司的后端技术人员前端功底、前端的社区活跃度

easyui布局示例

效果

在这里插入图片描述

代码

在WebContent文件夹下新建一个static文件夹，用来放js，css，images。
在这里插入图片描述
然后在js文件夹下导入依赖文件

新建一个index,jsp放内容
首先在head标签中导入js文件以及css文件

<!-- 写全局样式 -->
<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>  
<!--组件库源文件的js文件  -->
<script type="text/javascript" src="${pageContext.request.contextPath }/static/js/jquery-easyui-1.5.1/jquery.easyui.min.js"></script>

导入顺序：
easyui.css—>icon.css–>jquery.min.js—>jquery.easyui.js
如果顺序不对，效果可能出不来。

body中的内容

<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>

结果：
在这里插入图片描述