layuiAdmin.std（iframe 版） 是完全基於 layui 架構而成的通用型后台管理模板系統，采用傳統的 iframe 多頁面開發模式，可更快速直接地開發網頁后台應用程序，無需過多地學習成本，簡單高效，擼起袖子直接干。
題外
該文檔適用於 layuiAdmin.std 常規版（iframe），閱讀之前請務必確認是否與你使用的版本對應。
熟練掌握 layuiAdmin 的前提是熟練掌握 layui，因此除了本篇文檔， layui 的文檔 也是必不可少的存在。
快速上手
目錄說明
解壓文件后，你將看到以下目錄：
src/
layuiAdmin 源代碼，通常用於開發環境（如本地）。
src/layuiadmin/：layuiAdmin 的靜態資源（JS、CSS、模塊碎片等）
src/layuiadmin/json/：模擬接口返回的 JSON 相應信息，實際應用時可無視。
src/layuiadmin/layui/：layui 基礎框架，功能一般領先於官網提供下載的版本。
src/layuiadmin/lib/：layuiAdmin 的核心模塊，通常不建議修改。
src/layuiadmin/modules/：layuiAdmin 的業務模塊
src/layuiadmin/style/：layuiAdmin 的樣式文件
src/layuiadmin/tpl/：layuiAdmin 部分區塊可能用到的模版碎片
src/layuiadmin/config.js：全局配置文件
src/views/：layuiAdmin 提供的視圖文件，你可以將其移動到你服務端工程的 view 層中，注意修改 JS/CSS 的路徑即可。
dist/
通過 gulp 將 資源包的 src 目錄的源代碼進行構建后生成的目錄（即：將 JS 和 CSS 文件進行了壓縮等處理），通常用於線上環境。關於 gulp 的使用，下文也有介紹。
部署到服務端
將 src 目錄中的 views 文件夾整個復制到你 服務端工程 的 view 層中，通過本地 web 服務器訪問（Tomcat / IIS / Apache / Nginx 等）
確保可以訪問后，修改好 HTML 文件中的 JS/CSS 路徑，即可正常運行頁面。
iframe 常規版 相比於 單頁面模式的專業版 ，無論是在目錄結構還是開發模式上都要簡單很多。因為單頁版是接管了服務端 MVC 的視圖層，而 iframe 版則將視圖交給了服務端來控制和輸出，可以避免鑒權的復雜程度，直接可銜接好新老項目（因為你們的大部分老項目都是采用 iframe 模式）。
全局配置
當你已經順利在本地預覽了 layuiAdmin 后，你一定迫不及待關注更深層的結構。假設你頁面引入的是 src 目錄 的 JS，你還需要關注的是 src/layuiadmin/
目錄中的 config.js，它里面存儲着所有的默認配置。你可以按照實際需求選擇性修改：
layui.define(['laytpl', 'layer', 'element', 'util'], function(exports){ exports('setter', { container: 'LAY_app' //容器ID ,base: layui.cache.base //記錄靜態資源所在路徑 ,views: layui.cache.base + 'tpl/' //動態模板所在目錄 ,entry: 'index' //默認視圖文件名 ,engine: '.html' //視圖文件后綴名 ,pageTabs: true //是否開啟頁面選項卡功能。iframe 版推薦開啟 ,name: 'layuiAdmin' ,tableName: 'layuiAdmin' //本地存儲表名 ,MOD_NAME: 'admin' //模塊事件名 ,debug: true //是否開啟調試模式。如開啟，接口異常時會拋出異常 URL 等信息 //自定義請求字段 ,request: { tokenName: false //自動攜帶 token 的字段名（如：access_token）。可設置 false 不攜帶。 } //自定義響應字段 ,response: { statusName: 'code' //數據狀態的字段名稱 ,statusCode: { ok: 0 //數據狀態一切正常的狀態碼 ,logout: 1001 //登錄狀態失效的狀態碼 } ,msgName: 'msg' //狀態信息的字段名稱 ,dataName: 'data' //數據詳情的字段名稱 } //擴展的第三方模塊 ,extend: [ 'echarts', //echarts 核心包 'echartsTheme' //echarts 主題 ] //主題配置 ,theme: { //配色方案，如果用戶未設置主題，第一個將作為默認 color: [{ main: '#20222A' //主題色 ,selected: '#009688' //選中色 ,logo: '' //logo區域背景色 ,header: '' //頭部區域背景色 ,alias: 'default' //默認別名 }] //為了減少篇幅，更多主題此處不做列舉，可直接參考 config.js //初始的顏色索引，對應上面的配色方案數組索引 //如果本地已經有主題色記錄，則以本地記錄為優先，除非清除 LocalStorage（步驟：F12呼出調試工具→Aplication→Local Storage→選中頁面地址→layuiAdmin→再點上面的X） // 1.0 正式版開始新增 ,initColorIndex: 0 } }); });
基礎方法
config 模塊
你可以在任何地方通過 layui.setter 得到 config.js 中的配置信息。如：layui.setter.base
admin 模塊
var admin = layui.admin;
admin.req(options)
Ajax 請求，用法同 $.ajax(options)，只是該方法會進行錯誤處理
admin.screen()
獲取屏幕類型，根據當前屏幕大小，返回 0 - 3 的值
0: 低於768px的屏幕
1：768px到992px之間的屏幕
2：992px到1200px之間的屏幕
3：高於1200px的屏幕
admin.sideFlexible(status)
側邊伸縮。status 為 null：收縮；status為 “spread”：展開
admin.on(eventName, callback)
事件監聽，下文會有講解
admin.popup(options)
彈出一個 layuiAdmin 主題風格的 layer 層，參數 options 跟 layer.open(options) 完全相同
admin.popupRight(options)
在屏幕右側呼出一個面板層。options 同上。
admin.popupRight({
id: 'LAY-popup-right-new1' //定義唯一ID，防止重復彈出
,success: function(){
//將 views 目錄下的某視圖文件內容渲染給該面板
layui.view(this.id).render('視圖文件所在路徑');
}
});
admin.resize(callback)
窗口 resize 事件處理，我們推薦你使用該方法取代 jQuery 的 resize 事件，以避免多頁面標簽下可能存在的沖突。
admin.fullScreen()
全屏
admin.exitScreen()
退出全屏
admin.events
admin.events.refresh()
刷新當前右側區域
admin.events.closeThisTabs()
關閉當前標簽頁
admin.resize(callback)
窗口 resize 事件處理，我們推薦你使用該方法取代 jQuery 的 resize 事件，以避免多頁面標簽下可能存在的沖突。
admin.fullScreen()
全屏
admin.exitScreen()
退出全屏
admin.events
admin.events.refresh()
刷新當前右側區域
admin.events.closeThisTabs()
關閉當前標簽頁
注意：如果是在 iframe 頁面中執行關閉，需要如下寫法：
parent.layui.admin.events.closeThisTabs();
admin.events.closeOtherTabs()
關閉其它標簽頁
admin.events.closeAllTabs()
關閉全部標簽頁
view 模塊
用法同 專業版：http://fly.layui.com/docs/5/#base-view
在 iframe 頁面內部打開新標簽
通常你會涉及一些在右側 iframe 頁面內部去打開一個新標簽的需求，目前有以下方式可以實現
方法一：
直接在 a 標簽上加上相關屬性
<a lay-href="url">文本</a>
方法二：
調用 index 模塊的相關方法
parent.layui.index.openTabsPage(href, text); //這里要注意的是 parent 的層級關系
自定義標簽欄標題
每當你打開一個標簽頁，頭部都會出現標題。它默認讀取的是所點元素的文本，但是你也可以自定義標題。
<a lay-href="url" lay-text="自定義標題文本">默認讀取的文本</a>
值得說明的是，只要你配置了上述的 lay-href 屬性，就會打開一個新的標簽，如果要在當前標簽跳轉，直接配置 href="" 屬性即可。
實用組件
Hover 提示層
通過對元素設置 lay-tips="提示內容" 來開啟一個 hover 提示，如：
<i class="layui-icon layui-icon-tips" lay-tips="要支持的噢" lay-offset="5"></i>
其中 lay-offset 用於定於水平偏移距離（單位px），以調整箭頭讓其對准元素
兼容性
layuiAdmin 使用到了 layui 的柵格系統，而柵格則是基於瀏覽器的媒體查詢。ie8、9不支持。
所以要在宿主頁面（如 start/index.html ）加上下面這段保證兼容：
<!-- 讓IE8/9支持媒體查詢，從而兼容柵格 --> <!--[if lt IE 9]> <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script> <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script> <![endif]-->
升級事項
從官網更新資源包后，以 src 目錄為例（dist 由於是 src 構建后生成的目錄，所以本質是和 src 一樣的）
src 目錄下可以直接覆蓋的有：
src/json/
src/layui/
src/lib/
src/style/
需要靈活調配的有：
src/modules/
src/tpl/
src/config.js
如果沒有改動默認配置，事實上 config.js 也可以覆蓋升級
源碼構建
當你在 src 目錄完成開發后，你可通過 gulp 對 src 源碼進行自動化構建，以生成用於線上環境的 dist 目錄。並在 HTML 源代碼中引入該目錄的 JS/CSS。
在資源包中根目錄下看到的 gulpfile.js 是 layuiAdmin 寫好的任務腳本，package.json 是任務配置文件，你只需按照以下步驟：
step1：確保你的電腦已經安裝好了 Node.js，如果未安裝，可去官網下載安裝
step2: 命令行安裝 gulp：npm install gulp -g
step3：切換到 layuiAdmin 項目根目錄（即 gulpfile.js 所在目錄），命令行安裝任務所依賴的包：npm install
安裝完成后，后續只需直接執行命令：gulp 即可完成 src 到 dist 目錄的構建