开始学习使用ace admin

时间 2019-12-05

标签开始学习使用 ace admin 繁體版

原文原文链接

由于项目要求，最近在作一个管理系统的时候，须要一个比较强大的前端框架。经朋友介绍，网上查询，找到了这个响应式Bootstrap网站后台管理系统模板ace admin，一款很是不错的轻量级易用的admin后台管理系统,它是基于Boostrap的后台管理系统模板，咱们只要根据它提供的例子，参照着使用就能够实现很绚丽的前端展现了。界面很美观，并且对浏览器兼容性很强，能够让开发人员很大程度上不须要考虑分辨率等等问题。至于模板下载的地址，网上去搜就有了，这里记录下我在项目中使用的主要文件。javascript

ACE框架主要特色以下：
   1.  有4中不一样颜色的主题，能够供切换
   2.  响应式设计
   3.  参考文档，资料不少，有不懂得或者遇到问题了能够去查询到相应方案
   4.  第三方插件丰富

如上面所示，后台界面有伸缩，有左边树形菜单，右边内容区，点击 树形菜单，出现tab页面到右边区域，至关符合目前主流的后台管理系统，并且例子很丰富，能够参考着就应用到项目中，很方便。

    首先，根据各自项目须要，将ace相关主要文件放入同一个文件中，做为common文件，如common.jsp后面功能页面能够直接引入common后，根据具体须要，参照ace例子，去把相应的js、css文件放入各自功能模块,或者也能够懒一点，直接把全部文件都放到common里，之后的功能文件就不须要管ace相关的了。

下面是我在项目中的common文件css

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!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">
</head>
<body>
<c:set var="ctx" value="${pageContext.request.contextPath}" />
<meta charset="utf-8" />
<title>XX管理系统</title>

<meta name="description"
	content="Dynamic tables and grids using jqGrid plugin" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />

<!-- basic styles -->

<link href="${ctx}/resources/ace_jqgrid/assets/css/bootstrap.min.css" rel="stylesheet" />
<link rel="stylesheet" href="${ctx}/resources/ace_jqgrid/assets/css/font-awesome.min.css" />

<!-- page specific plugin styles -->

<link rel="stylesheet" href="${ctx}/resources/ace_jqgrid/assets/css/jquery-ui-1.10.3.full.min.css" />
<link rel="stylesheet" href="${ctx}/resources/ace_jqgrid/assets/css/datepicker.css" />
<link rel="stylesheet" href="${ctx}/resources/ace_jqgrid/assets/css/ui.jqgrid.css" />

<!-- fonts -->

<link rel="stylesheet" href="${ctx}/resources/ace_jqgrid/assets/css/ace-fonts.css" />

<!-- ace styles -->

<link rel="stylesheet" href="${ctx}/resources/ace_jqgrid/assets/css/ace.min.css" />
<link rel="stylesheet" href="${ctx}/resources/ace_jqgrid/assets/css/ace-rtl.min.css" />
<link rel="stylesheet" href="${ctx}/resources/ace_jqgrid/assets/css/ace-skins.min.css" />

<script src="${ctx}/resources/ace_jqgrid/assets/js/ace-extra.min.js"></script>


<!-- basic scripts -->
<script type="text/javascript">
	var rootPath = "${ctx}";
	var $path_base = "${ctx}";//this will be used in gritter alerts containing images
</script>

<script type="text/javascript">
	window.jQuery
			|| document.write("<script src='${ctx}/resources/ace_jqgrid/assets/js/jquery-2.0.3.min.js'>"
					+ "<"+"/script>");
</script>

<script type="text/javascript">
	if ("ontouchend" in document)
		document.write("<script src='${ctx}/resources/ace_jqgrid/assets/js/jquery.mobile.custom.min.js'>"
				+ "<"+"/script>");
</script>
<script src="${ctx}/resources/ace_jqgrid/assets/js/bootstrap.min.js"></script>
<script src="${ctx}/resources/ace_jqgrid/assets/js/typeahead-bs2.min.js"></script>

<script src="${ctx}/resources/ace_jqgrid/assets/js/jquery-ui-1.10.3.custom.min.js"></script>
<!-- page specific plugin scripts -->
<!-- 时间选择器相关脚本 -->
<script src="${ctx}/resources/ace_jqgrid/assets/js/chosen.jquery.min.js"></script>
<script src="${ctx}/resources/ace_jqgrid/assets/js/date-time/bootstrap-datepicker.min.js"></script>
<script src="${ctx}/resources/ace_jqgrid/assets/js/date-time/bootstrap-timepicker.min.js"></script>
<script src="${ctx}/resources/ace_jqgrid/assets/js/date-time/moment.min.js"></script>
<script src="${ctx}/resources/ace_jqgrid/assets/js/date-time/daterangepicker.min.js"></script>
<script src="${ctx}/resources/ace_jqgrid/assets/js/date-time/locales/bootstrap-datepicker.zh-CN.js"></script>
<script src="${ctx}/resources/ace_jqgrid/assets/js/jqGrid/jquery.jqGrid.min.js"></script>
<script src="${ctx}/resources/ace_jqgrid/assets/js/jqGrid/i18n/grid.locale-cn.js"></script>

<!-- ace scripts -->

<script src="${ctx}/resources/ace_jqgrid/assets/js/ace-elements.min.js"></script>
<script src="${ctx}/resources/ace_jqgrid/assets/js/ace.min.js"></script>



</body>
</html>