Ace Admin 使用教程
(原)
公司项目要换框架,然后丢了一套国外的给我,ace admin,本想着拿来改改,翻翻百度就能用的,可它是国外的啊,国内普及率又不高,没办法,硬着头皮一点点啃英文文档吧。
File(文件)
简介:ACE是一个功能丰富易于使用的轻量级模板,当前包含的功能有:
4套皮肤、基于bootstrap 3.3.5版本的相应式布局、js和css的功能构建、一套发送邮件的布局、自定义元素的插件以及jquery ui,bootstrap 的部分插件。
所有的html文件放在了html目录下,如果开发人员需要更改这些,可以从一个简单的页面开始,页面放在了:html/empty.html中。
(以上为页面结构)
胡子文件夹,说明中第一句中写的:你不需要在你的应运中使用到它。它实际上是存的给Demo演示用到的json文件及文档中需要的信息描述文件。
css样式,在第8条里面,它提供了一个css builder (样式生成器),可以根据项目需要的功能点的样式,它可以单独的导出。
对于bootstrap样式,这里他们做了一些改动,如把bootstrap中的槽宽,由30px改成了24px等一些其它的改动。
引入样式文件的顺序
关于ace文件。这里的与ace有关的js文件都被封装成各种js插件,ace.js包含主函数,如侧边栏,小部件等。
注意:bootstrap.css被轻量的修改过,不要使用CDN上的该文件或是官网及其它地方引入的该文件
最后,你需要所有插件引入完以后加上,ace-element.min.js和ace.min.js这二个js文件(引入JS的顺序),js 的文档的第四部分讲的是js文件引入的顺序。
页面布局部分,这里讲了demo的页的设计结构以及每部分需要引入的样式
导航部分介绍了布局,样式的引用,品牌、标题按钮以响应式布局的演示(这部分写的很详细)。
侧边栏同样的介绍了布局、菜单列表、快捷键、最小化按钮、侧边栏功能,响应式侧边框以及ajax和非ajax布局。
主内容布分介绍了页面布局、路径导航(也叫面包屑导航屑)、查询框、页面标题、主内容区域以及页面的设置区域
ajax部分(重点)
(上图为踩过的坑)
在一些ajax页面中,有些页面没有包含横向菜单和jquery UI渲染的页面。
这是因为横向菜单是基于改变well的(well是bootstrap中一个样式)
在加载完jQuery UI库以后,其中的提示控件(tooltip)和日历控件(datepicker)会覆盖bootstrap的样式,在你使用jquery UI或是bootstrap 的日历时这都不是问题,但是请不要在使用以上控制时同时使用jquery ui库和bootstrap库。
后面一块黑色区域代码很重要,文档上意思是,你只有调用了如下ace_ajax方法,你才能使用ajax加载。
画红框的地方非常重要,虽然顺着文档看时,可能看不明白什么问题,但是把问题解决以后再来看这里,这里其实是一个大坑,文档上说,在ace demo中,有一个样式为.page-content-area及以有一个属性为data-ajax-content="true"的元素,这个元素中间的部分是可用ajax更新的,因为在默认的ace中下面的代码是可用的。
在html/ajax/ajax.html下,有一个空白的ajax页面,它可以方便开发人员以他的页面格式开发自己的的content页面。(文档中这样描述)。
而实际上,它的文档中并没有这个文件,不过html/ajax下有一个blank.html文件,该文件是个空文件,你可以以这个文件为模板进行开发,(这里应该是描述地址的一个错误)。
setting up 设置部分说了,你能找到一个样式为.page-content-area及以有一个属性为data-ajax-content="true"的元素,如上图。
顺便说一下,你需要改变上面设置参数中的content_url部分,或者你重新初始化一个属于你自己的ace_ajax方法。
第三部分讲的是ace_ajax方法的参数,其中最重要的就是一个就是content_url,它是一个带返回url值的函数,文档这里蓝色部分说的是,请注意,如果你的ajax 加载的内容部分是递归的,你需要一个合适的函数基于函数值返回一个有效的url值。
(这里就是ajax开头部分踩到的坑,直接在空白页面无论怎么配置文档里提供的ace_ajax方法,结果都一样,永远是一个首页无限递归。)
当时想到这个问题的原因是,一定会有一个地方设置它的跳转,90%可能是在它的相关插件的源码里
在它的源码中,ace_ajax首先是做了参数的处理,然后初始化了一个AceAjax对象,并把参数传了进去。
在AceAjax方法中,仅是对content_url进行了传值,包括以后的部分也都是在对传入的这个url值做处理, 中也没有page/index 这个参数值,因为首页无限加载首页,那么一定是递归了page/index页面(至少会有index关键字),因为在加入了ajax content以后,再次访问页面时,地址栏会自动带了#page/index。
最后全局搜索关键在,在ace.js中找到了page/index,被定义在了demo_ajax_option变量里。
接着用$('[data-ajax-content=true]').ace_ajax(demo_ajax_options)调用了ace_ajax方法,上面还有一段注释,说的是初始化那个在demo页面中有着page-content-area[data-ajax-content=true]属性的元素。
也就是说这个代码针对于他的demo演示页面做的跳转,而你在使用它的demo,仅是在页面级做修改,他的ajax跳转主页永远会是index页面。
在上面,它的文档里提到了,说在ace里有如下代码做ajax内容区的跳转,但是没有没有指明是具体的哪个文件(这里应该是ace.js文件),并且关键参数区域被省略掉了(红框部分),而实际上它是在ace.js的行这么写的:
这一块属于文档描述关键点的缺失,解决这个问题有2个简单的方法,
1、将ace.js中的ace_ajax方法的参数按自己实际项目需求重新修改。
2、将执行ace_ajax方法的这段代码注释掉,然后在自己的框架中控制这个代码的执行。
Ace Admin 使用教程的更多相关文章
- YII与Ace Admin 的集成
目录 一. 前言... 1 二.为什么要使用YII+ace. 1 三.新建YII模块... 1 四.如何修改模板... 3 五.注意的地方... 4 六.整合的不足之处... 4 一. 前言 yii- ...
- 改造 Ace Admin 模板的 ace_tree 组件的 folderSelect 样式
*注:我用的Ace Admin版本为1.3.4 Ace Admin 是一个轻量,功能丰富,HTML5.响应式.支持手机及平板电脑上浏览的优秀管理后台模板. 关于tree的使用,html文件夹下tree ...
- Ace admin 如何实现类似于freamset加载页面
如上标题所述,ace admin做后台页面的时候,可以实现类似于用freamset的功能,但是ace admin做的比freamset更好,他可以用异步加载的形式展示,而加载的页面的内容可以尽可能的少 ...
- 并发编程概述 委托(delegate) 事件(event) .net core 2.0 event bus 一个简单的基于内存事件总线实现 .net core 基于NPOI 的excel导出类,支持自定义导出哪些字段 基于Ace Admin 的菜单栏实现 第五节:SignalR大杂烩(与MVC融合、全局的几个配置、跨域的应用、C/S程序充当Client和Server)
并发编程概述 前言 说实话,在我软件开发的头两年几乎不考虑并发编程,请求与响应把业务逻辑尽快完成一个星期的任务能两天完成绝不拖三天(剩下时间各种浪),根本不会考虑性能问题(能接受范围内).但随着工 ...
- ace admin 左侧菜单定位
后台模版来自:Ace Admin http://ace.jeka.by/form-elements.html 左侧菜单,通过js根据url来判断显示哪块 window.location.pathnam ...
- windows下ACE安装使用教程(转)
ACE简介:ACE是一个跨平台的用于并发通信的C++框架.它提供了丰富的C++封装器和框架组件.使用ACE,开发者可以开发出高性能,实时的通信服务和应用.ACE利用进程间通信,事件分离,动态链接和并发 ...
- ace admin后台模板
http://ace.jeka.by/index.html 下载: http://www.daimajiayuan.com/plus/download.php?open=0&aid=18152 ...
- 基于Ace Admin 的菜单栏实现
1.首先是数据库表必然包含以下几个字段Id ,ParnetId,Url,Name等 create table dbo.Module ( Id uniqueidentifier not null con ...
- ace editor 使用教程
<!DOCTYPE html><html> <head> <title>Demo of ACE Editor</title> <!-- ...
随机推荐
- CI框架浅析(二)
该文延续上篇文章: CI框架浅析(一) 在CI框架的核心库中,CodeIgniter.php负责加载所有需要的类库,第一个加载的是公共库 core/Common.php Common.php 负责加载 ...
- C++ struct 初始化的问题
struct student { int age; string name; int id; }; 初始化: student st1={10, "li ming", 01}; 修改 ...
- Java Tomcat 启动失败的解决思路
好久没写新博文了,离自己要求的每年几篇的目标也是渐行渐远. 最近在学习Java,也是从基础学习,因为我是一个.net开发人员,所以学习的成本相对低些.Java JDK,JRE,Tomact 的安装及配 ...
- 从源码角度入手实现RecyclerView的Item点击事件
RecyclerView 作为 ListView 和 GridView 的替代产物,相信在Android界已广为流传. RecyclerView 本是不会有类似 ListView 的那种点击事件,但是 ...
- python自动化测试应用-番外篇--接口测试2
篇2 book-python-auto-test-番外篇--接口测试2 --lamecho辣么丑 大家好! 我是lamecho(辣么丑),今天将继续上一篇python接 ...
- Javascript中Array(数组)对象常用的几个方法
Javascript中Array数组的几个常用方法 pop() --获取数组中末尾的元素 shift() --获取数组中首位元素 push() --在数组中末尾增加元素 slice() --按照下 ...
- 纯JS单页面赛车游戏代码分享
分享一个以前写的小游戏,纯js游戏,代码很简单.欢迎大家来喷呦! 效果图: 代码展示://直接复制到html文件即可 支持IE9+版本 <!DOCTYPE html> <html&g ...
- 基于header的一些常用指令详解
header常用指令 header分为三部分: 第一部分为HTTP协议的版本(HTTP-Version): 第二部分为状态代码(Status): 第三部分为原因短语(Reason-Phrase) ...
- PHP获取随机数
<?php $FileID=date("Ymd-His") . '-' . rand(100,999); //$FileID为 20100903-132121-908 ...
- 做一个常规的banner图——负边距的使用、banner图的拼法
在这之前,首先要了解如何设置块级元素在块级元素水平居中 方法: 设置子容器为定位元素 水平居中 left:50%:margin-left:-width/2: 垂直居中 top:50%:margin-t ...