ace admin
Ace Admin 使用教程
(轉(zhuǎn))
公司項(xiàng)目要換框架,然后丟了一套國外的給我,ace admin,本想著拿來改改,翻翻百度就能用的,可它是國外的啊,國內(nèi)普及率又不高,沒辦法,硬著頭皮一點(diǎn)點(diǎn)啃英文文檔吧。
最近留郵箱要文檔的太多拉,為了方便你我他,給個(gè)地址你們下面,需要5個(gè)CSDN的積分哦,如果頁面進(jìn)不去,表示還在審核中,請等待一段時(shí)間再試,謝謝!
點(diǎn)我看下載頁面
File(文件)
簡介:ACE是一個(gè)功能豐富易于使用的輕量級模板,當(dāng)前包含的功能有:
4套皮膚、基于bootstrap 3.3.5版本的相應(yīng)式布局、js和css的功能構(gòu)建、一套發(fā)送郵件的布局、自定義元素的插件以及jquery ui,bootstrap 的部分插件。
所有的html文件放在了html目錄下,如果開發(fā)人員需要更改這些,可以從一個(gè)簡單的頁面開始,頁面放在了:html/empty.html中。
(以上為頁面結(jié)構(gòu))
胡子文件夾,說明中第一句中寫的:你不需要在你的應(yīng)運(yùn)中使用到它。它實(shí)際上是存的給Demo演示用到的json文件及文檔中需要的信息描述文件。
css樣式,在第8條里面,它提供了一個(gè)css builder (樣式生成器),可以根據(jù)項(xiàng)目需要的功能點(diǎn)的樣式,它可以單獨(dú)的導(dǎo)出。
?
對于bootstrap樣式,這里他們做了一些改動,如把bootstrap中的槽寬,由30px改成了24px等一些其它的改動。
引入樣式文件的順序
關(guān)于ace文件。這里的與ace有關(guān)的js文件都被封裝成各種js插件,ace.js包含主函數(shù),如側(cè)邊欄,小部件等。
?
注意:bootstrap.css被輕量的修改過,不要使用CDN上的該文件或是官網(wǎng)及其它地方引入的該文件
最后,你需要所有插件引入完以后加上,ace-element.min.js和ace.min.js這二個(gè)js文件(引入JS的順序),js 的文檔的第四部分講的是js文件引入的順序。
頁面布局部分,這里講了demo的頁的設(shè)計(jì)結(jié)構(gòu)以及每部分需要引入的樣式
導(dǎo)航部分介紹了布局,樣式的引用,品牌、標(biāo)題按鈕以響應(yīng)式布局的演示(這部分寫的很詳細(xì))。
側(cè)邊欄同樣的介紹了布局、菜單列表、快捷鍵、最小化按鈕、側(cè)邊欄功能,響應(yīng)式側(cè)邊框以及ajax和非ajax布局。
?
?
?
?
主內(nèi)容布分介紹了頁面布局、路徑導(dǎo)航(也叫面包屑導(dǎo)航屑)、查詢框、頁面標(biāo)題、主內(nèi)容區(qū)域以及頁面的設(shè)置區(qū)域
ajax部分(重點(diǎn))
?
(上圖為踩過的坑)
?
在一些ajax頁面中,有些頁面沒有包含橫向菜單和jquery UI渲染的頁面。
這是因?yàn)闄M向菜單是基于改變well的(well是bootstrap中一個(gè)樣式)
在加載完jQuery UI庫以后,其中的提示控件(tooltip)和日歷控件(datepicker)會覆蓋bootstrap的樣式,在你使用jquery UI或是bootstrap 的日歷時(shí)這都不是問題,但是請不要在使用以上控制時(shí)同時(shí)使用jquery ui庫和bootstrap庫。
后面一塊黑色區(qū)域代碼很重要,文檔上意思是,你只有調(diào)用了如下ace_ajax方法,你才能使用ajax加載。
?
畫紅框的地方非常重要,雖然順著文檔看時(shí),可能看不明白什么問題,但是把問題解決以后再來看這里,這里其實(shí)是一個(gè)大坑,文檔上說,在ace demo中,有一個(gè)樣式為.page-content-area及以有一個(gè)屬性為data-ajax-content="true"的元素,這個(gè)元素中間的部分是可用ajax更新的,因?yàn)樵谀J(rèn)的ace中下面的代碼是可用的。
?
在html/ajax/ajax.html下,有一個(gè)空白的ajax頁面,它可以方便開發(fā)人員以他的頁面格式開發(fā)自己的的content頁面。(文檔中這樣描述)。
?
而實(shí)際上,它的文檔中并沒有這個(gè)文件,不過html/ajax下有一個(gè)blank.html文件,該文件是個(gè)空文件,你可以以這個(gè)文件為模板進(jìn)行開發(fā),(這里應(yīng)該是描述地址的一個(gè)錯誤)。
setting up 設(shè)置部分說了,你能找到一個(gè)樣式為.page-content-area及以有一個(gè)屬性為data-ajax-content="true"的元素,如上圖。
順便說一下,你需要改變上面設(shè)置參數(shù)中的content_url部分,或者你重新初始化一個(gè)屬于你自己的ace_ajax方法。
?
第三部分講的是ace_ajax方法的參數(shù),其中最重要的就是一個(gè)就是content_url,它是一個(gè)帶返回url值的函數(shù),文檔這里藍(lán)色部分說的是,請注意,如果你的ajax 加載的內(nèi)容部分是遞歸的,你需要一個(gè)合適的函數(shù)基于函數(shù)值返回一個(gè)有效的url值。
(這里就是ajax開頭部分踩到的坑,直接在空白頁面無論怎么配置文檔里提供的ace_ajax方法,結(jié)果都一樣,永遠(yuǎn)是一個(gè)首頁無限遞歸。)
?
當(dāng)時(shí)想到這個(gè)問題的原因是,一定會有一個(gè)地方設(shè)置它的跳轉(zhuǎn),90%可能是在它的相關(guān)插件的源碼里
?
在它的源碼中,ace_ajax首先是做了參數(shù)的處理,然后初始化了一個(gè)AceAjax對象,并把參數(shù)傳了進(jìn)去。
?
在AceAjax方法中,僅是對content_url進(jìn)行了傳值,包括以后的部分也都是在對傳入的這個(gè)url值做處理, 中也沒有page/index 這個(gè)參數(shù)值,因?yàn)槭醉摕o限加載首頁,那么一定是遞歸了page/index頁面(至少會有index關(guān)鍵字),因?yàn)樵诩尤肓薬jax content以后,再次訪問頁面時(shí),地址欄會自動帶了#page/index。
最后全局搜索關(guān)鍵在,在ace.js中找到了page/index,被定義在了demo_ajax_option變量里。
接著用$('[data-ajax-content=true]').ace_ajax(demo_ajax_options)調(diào)用了ace_ajax方法,上面還有一段注釋,說的是初始化那個(gè)在demo頁面中有著page-content-area[data-ajax-content=true]屬性的元素。
也就是說這個(gè)代碼針對于他的demo演示頁面做的跳轉(zhuǎn),而你在使用它的demo,僅是在頁面級做修改,他的ajax跳轉(zhuǎn)主頁永遠(yuǎn)會是index頁面。
?
?
在上面,它的文檔里提到了,說在ace里有如下代碼做ajax內(nèi)容區(qū)的跳轉(zhuǎn),但是沒有沒有指明是具體的哪個(gè)文件(這里應(yīng)該是ace.js文件),并且關(guān)鍵參數(shù)區(qū)域被省略掉了(紅框部分),而實(shí)際上它是在ace.js的行這么寫的:
?
這一塊屬于文檔描述關(guān)鍵點(diǎn)的缺失,解決這個(gè)問題有2個(gè)簡單的方法,
1、將ace.js中的ace_ajax方法的參數(shù)按自己實(shí)際項(xiàng)目需求重新修改。
2、將執(zhí)行ace_ajax方法的這段代碼注釋掉,然后在自己的框架中控制這個(gè)代碼的執(zhí)行。
總結(jié)
- 上一篇: 流体力学与NS方程
- 下一篇: Vim直接打开Tampermonkey网