一,easyUI简介
why:快速开发
虽然从效果来看,easyUI的界面效果要远远差于bootstrap,layout,但
从金钱的角度上,开发首先会排除掉bootstrap
从学习文档的完整性、前端框架的稳定性,组件的丰富性考虑,easyui都要优于layui
从公司的角度,考虑框架成本、公司的后端技术人员前端功底、前端的社区活跃度
what:html4+jQuery的快速开发的前端框架
where:后端开发管理界面
常用控件:layout,tree,tabs,datagrid,form,messager,combobox
二,easyUI的学习和使用
解压下面的压缩包
文件里的内容如下:
下载easyUI,我们可以通过api和domo来学习和使用它
三, layout控件
1.导包
框架,js文件,css文件都属于静态资源,因此把他们放在静态资源包下
如下图所示在WebContent下建立静态资源包:
同样方法在静态资源包下建立js,css,images
完成做框架的第一步,导入jar包,在这里就是把我们之前解压得到的文件复制粘贴到js目录下
2.在WebContent下建立index.jsp界面
导入EasyUI的CSS和Javascript文件到index.jsp界面,即如下代码
<link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css">
<script type="text/javascript" src="easyui/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
修改 href 和 src,使用文件全路径名 ,快捷键 Ctrl+shift+r
不同的界面风格显示出不同的颜色,这里我们使用默认风格
依次复制上图四个文件的全路径名修改 href 和 src
根据项目取项目名${pageContext.request.contextPath }
修改完后的代码如下:
<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>
3. 使用完整页面创建布局
<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>
完整页面分为东南西北四个面板,在这里我们不需要east面板所以注掉,修改对应title
运行结果如下: