‘闲’聊:
ui框架
easyui=jquery+html4(用来做后台的管理界面)
我们为什么要学习easyui
从效果来看easyui的界面效果要远远差于bootstrap
跟layui比,界面效果也更差
从金钱的角度上,开发首先会排除掉bootstrap
从学习文档的完整性、前端框架的稳定性,组件的丰富性考虑,easyui都要
优于layui
从公司的角度考虑选用那个框架
成本、公司的后端技术人员前端功底、前端的社区活跃度。
这就是简单或许又粗暴的讲述。
应用:
1.在eclipse 中新建 Web 项目
2.在WebContent 下 建立 static 包
3.在 static 下 建 js, images,css 等文件夹
4.在 js 下 把 jquery-easyui-1.5.1(已有的文件夹) 复制在其下。
5.创建 index.jsp 界面
6.从 jQuery EasyUI 官方API文档中文版 把 路径复制过来,再改路径。
- <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>
假设 找 icon.css shift+ctrl+r 就可以找到 然后 复制文件名 :Copy Qualified Name
粘贴就可以了。再把前面的改成:${pageContext.request.contextPath }
改完之后为:
<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>
<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">
index.jsp界面 layout 布局 示例:
jQuery EasyUI 官方API文档中文版 有代码,把其粘过来就可以了。(body 内的代码)
<%@ 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>
<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>
<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">
</head>
<body>
<div id="cc" class="easyui-layout" style="width:600px;height:400px;">
<div data-options="region:'north',title:'North Title',split:true" style="height:100px;"></div>
<div data-options="region:'south',title:'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:'West',split:true" style="width:100px;">
<ul id="tt" class="easyui-tree">
<li>
<span>Folder</span>
<ul>
<li>
<span>Sub Folder 1</span>
<ul>
<li>
<span><a href="#">File 11</a></span>
</li>
<li>
<span>File 12</span>
</li>
<li>
<span>File 13</span>
</li>
</ul>
</li>
<li>
<span>File 2</span>
</li>
<li>
<span>File 3</span>
</li>
</ul>
</li>
<li>
<span>File21</span>
</li>
</ul>
</div>
<div data-options="region:'center',title:'center title'" style="padding:5px;background:#eee;"></div>
</div>
</body>
</html>
图片: