文档章节

开始学习使用ace admin

 青竹风
发布于 2016/09/03 10:51
字数 874
阅读 477
收藏 0

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

ACE框架主要特点如下:
   1.  有4中不同颜色的主题,可以供切换
   2.  响应式设计
   3.  参考文档,资料很多,有不懂得或者遇到问题了可以去查询到相应方案
   4.  第三方插件丰富

输入图片说明

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

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

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

<%@ 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>

© 著作权归作者所有

粉丝 0
博文 26
码字总数 10579
作品 0
厦门
私信 提问
liushoukun/yiiadmin

###YII-ADMIN 采用 yii2 + aceAdmin 开发的后台管理系统。 包括了用户,角色,权限管理; github oschina ###项目说明 此项目只是一个后台系统,并无前台,请根据自己的业务需要进行添加 ###项...

liushoukun
2017/01/08
0
0
laydate的问题

@贤心 你好,想跟你请教个问题: laydate v5 在和aceadmin框架(ajax模式)结合使用的时候,页面切换后导致控件不能选择时间 具体请看录屏 https://static.oschina.net/uploads/space/2018/0426...

亦可塞艇
2018/04/26
268
2
End Admin beta 测试版发布,基于 bootstrap 3.2 的后台模版

更多功能陆续添加。。。 力求做一个 通用、简约、实用、多功能并存的后台模版,支持移动设备,放弃老版浏览器,仅支持高大上浏览器(chrome、firefox)。IE暂不考虑。 更重要的一点它是开源免...

EnoND
2014/07/31
6.3K
29
AceAdmin后台UI框架 整合 java

说明:JAVA SpringMVC+mybatis(oracle 和 mysql) HTML5 全新高大尚后台框架 1.支持APP手机应用(android和ios)接口调用(json接口可与其它程序对接) 2.全新高大尚全HTML5+css3.0开发界面,美...

IT先锋
2014/11/12
38
0
Java 编程入门

Java 编程入门 学习 Java 语言基础知识,掌握用于构建和部署真实应用程序的结构 J Steven Perry 2016 年 11 月 02 日发布 技能水平:初学者 费用:免费 所需时间:每单元 15 - 30 分钟(总计...

J Steven Perry
2016/11/02
0
0

没有更多内容

加载失败,请刷新页面

加载更多

OpenStack 简介和几种安装方式总结

OpenStack :是一个由NASA和Rackspace合作研发并发起的,以Apache许可证授权的自由软件和开放源代码项目。项目目标是提供实施简单、可大规模扩展、丰富、标准统一的云计算管理平台。OpenSta...

小海bug
昨天
5
0
DDD(五)

1、引言 之前学习了解了DDD中实体这一概念,那么接下来需要了解的就是值对象、唯一标识。值对象,值就是数字1、2、3,字符串“1”,“2”,“3”,值时对象的特征,对象是一个事物的具体描述...

MrYuZixian
昨天
6
0
数据库中间件MyCat

什么是MyCat? 查看官网的介绍是这样说的 一个彻底开源的,面向企业应用开发的大数据库集群 支持事务、ACID、可以替代MySQL的加强版数据库 一个可以视为MySQL集群的企业级数据库,用来替代昂贵...

沉浮_
昨天
4
0
解决Mac下VSCode打开zsh乱码

1.乱码问题 iTerm2终端使用Zsh,并且配置Zsh主题,该主题主题需要安装字体来支持箭头效果,在iTerm2中设置这个字体,但是VSCode里这个箭头还是显示乱码。 iTerm2展示如下: VSCode展示如下: 2...

HelloDeveloper
昨天
7
0
常用物流快递单号查询接口种类及对接方法

目前快递查询接口有两种方式可以对接,一是和顺丰、圆通、中通、天天、韵达、德邦这些快递公司一一对接接口,二是和快递鸟这样第三方集成接口一次性对接多家常用快递。第一种耗费时间长,但是...

程序的小猿
昨天
9
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部