Ace Admin 使用教程


(原)

公司項目要換框架,然后丟了一套國外的給我,ace admin,本想着拿來改改,翻翻百度就能用的,可它是國外的啊,國內普及率又不高,沒辦法,硬着頭皮一點點啃英文文檔吧。

最近留郵箱要文檔的太多拉,為了方便你我他,給個地址你們下面,需要5個CSDN的積分哦,如果頁面進不去,表示還在審核中,請等待一段時間再試,謝謝!

點我看下載頁面

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方法的這段代碼注釋掉,然后在自己的框架中控制這個代碼的執行。

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM