思维导图
1、ui框架:
easyui=jquery+html4(用来做后台的管理界面) 2016 不要钱;
bootstrap=jquery+html5 2016-2018 要钱、api文档不全;
layui 2018-2021 不要钱 有bug、文档不全。
2、为什么要学习easyui
从效果来看easyui的界面效果要远远差于bootstrap;
跟layui比,界面效果也更差;
从金钱的角度上,开发首先会排除掉bootstrap;
从学习文档的完整性、前端框架的稳定性,组件的丰富性考虑,easyui都要;
优于layui;
3、从公司的角度考虑选用那个框架
成本、公司的后端技术人员前端功底、前端的社区活跃度(使用讨论区) ;
4、常用控件
layout、tree、tabs、datagrid、form、messager、combobox.
EasyUI下载:Download EasyUI Package - jQuery,Angular,React,Vue
一、WebContext下建一个Static静态文件夹内放easyui相关依赖库
二、 下载程序库并导入EasyUI的CSS和Javascript文件到页面
1、绝对路径
快捷键:Ctrl+Shift+R
<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>
2、相对路径
<link rel="stylesheet" type="text/css" href="static/js/jquery-easyui-1.5.1/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="static/js/jquery-easyui-1.5.1/themes/icon.css">
<script type="text/javascript" src="static/js/jquery-easyui-1.5.1/jquery.min.js"></script>
<script type="text/javascript" src="static/js/jquery-easyui-1.5.1/jquery.easyui.min.js"></script>
三、Layout(布局)
布局容器有5个区域:北、南、东、西和中间。中间区域面板是必须的,边缘的面板都是可选的。每个边缘区域面板都可以通过拖拽其边框改变大小,也可以点击折叠按钮将面板折叠起来。布局可以进行嵌套,用户可以通过组合布局构建复杂的布局结构。
1、使用完整页面创建布局
<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>
2、界面展示
今天到这里就结束了~~~