淺析AmazeUI 框架下結(jié)合 datatables表格和layui組件開發(fā)web后臺界面制作過程

梁鈞儒

【摘要】Amaze UI采用國際最前沿的“組件式開發(fā)”以及“移動優(yōu)先”的設(shè)計理念，基于其豐富的組件，開發(fā)者可通過簡單拼裝即可快速構(gòu)建出HTML5網(wǎng)頁應(yīng)用。Datatables是一款jquery表格插件。它是一個高度靈活的工具，可以將任何HTML表格添加高級的交互功能，具有分頁，即時搜索和排序。layui是一款采用自身模塊規(guī)范編寫的前端 UI 框架，遵循原生 HTML/CSS/JS 的書寫與組織形式，門檻極低，拿來即用。非常適合界面的快速開發(fā)。layui更多是面向于后端開發(fā)者，所以在組織形式上毅然采用了幾年前的以瀏覽器為宿主的類 AMD 模塊管理方式，卻又并非受限于 CommonJS 的那些條條框框，它擁有自己的模式，更加輕量和簡單。

【關(guān)鍵詞】AmazeUIDatatables layui web后臺界面

有了bootstrap，為什么還要做amaze ui？

一般來說，bootstrap只是對HTML增加了CSS進(jìn)行美化。而amaze ui則在bootstrap美化的基礎(chǔ)上，主要增加JS添加了動態(tài)，以及更多樣式。

搭建后臺界面框架

用AmazeUI 框架，制作網(wǎng)頁風(fēng)格，可以用AmazeUI提供的組件工具，一點(diǎn)點(diǎn)拼接起來，也可以引入第三方j(luò)Query插件，比如引入基于swiper的兩邊疊加輪播圖，引入文件規(guī)則，是先引入第三方的，再引入AmazeUI的。對于界面風(fēng)格要求比較間潔可以引入 AmazeUI模板，在AmazeUI模板的基礎(chǔ)上，做二次界面開發(fā)。

使用方法

將amaze ui對應(yīng)的zip下載，解壓后查看該文件夾下的問assets文件，assets文件夾下又包括css、js文件夾，這兩個文件就是amaze ui中封裝，可供用用戶直接使用的樣式，把上述提到的css、js文件夾拷貝到web項(xiàng)目的WebRoot下，在項(xiàng)目中對樣式進(jìn)行使用。<！DOCTYPE html>

aaa

datatables安裝

Amazeui也有表格樣式，但datatables，具有分頁，即時搜索和排序，可以減輕后臺開發(fā)人員的工作量。在你的項(xiàng)目中使用 DataTables，只需要引入三個文件即可，jQuery庫，一個DT的核心js文件和一個DT的css文件，添加如下 HTML 代碼，并初始化Datatables。

$（document）.ready（ function （） {

$（'#table_id_example'）.DataTable（）;

} ）;

layui安裝

獲得 layui 后，將其完整地部署到你的項(xiàng)目目錄（或靜態(tài)資源服務(wù)器），你只需要引入下述兩個文件：

我們用到layer 只是作為 layui 的一個彈層模塊，在 layui 中使用 layer

layui.use（'layer'， function（）{

var layer = layui.layer;

layer.msg（'layui'）;

}）;

參考文獻(xiàn)：

[1]單頁Web應(yīng)用：JavaScript從前端到后端 . 人民郵電出版社.米可夫斯基 （Michael S. Mikowski）/鮑威爾 （Josh C.?Powell）.2014.

[2]高性能網(wǎng)站建設(shè)指南 .電子工業(yè)出版社.（美國）（SteveSounders）桑德斯.2008.

[3]CSS權(quán)威指南 .中國電力出版社.美 Eric A.Meyer.2007.

[4]HTML 5用戶指南 .機(jī)械工業(yè)出版社.（美）Bruce Lawson?Remy Sharp.2011.