開始學習使用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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。