該文檔適用于 layuiAdmin.std 常規(guī)版（iframe），閱讀之前請(qǐng)務(wù)必確認(rèn)是否與你使用的版本對(duì)應(yīng)。
熟練掌握 layuiAdmin 的前提是熟練掌握 layui，因此除了本篇文檔， layui 的文檔 也是必不可少的存在。

目錄說(shuō)明

解壓文件后，你將看到以下目錄：

src/
layuiAdmin 源代碼，通常用于開(kāi)發(fā)環(huán)境（如本地）。
src/layuiadmin/：layuiAdmin 的靜態(tài)資源（JS、CSS、模塊碎片等）
src/layuiadmin/json/：模擬接口返回的 JSON 相應(yīng)信息，實(shí)際應(yīng)用時(shí)可無(wú)視。
src/layuiadmin/layui/：layui 基礎(chǔ)框架，功能一般領(lǐng)先于官網(wǎng)提供下載的版本。
src/layuiadmin/lib/：layuiAdmin 的核心模塊，通常不建議修改。
src/layuiadmin/modules/：layuiAdmin 的業(yè)務(wù)模塊
src/layuiadmin/style/：layuiAdmin 的樣式文件
src/layuiadmin/tpl/：layuiAdmin 部分區(qū)塊可能用到的模版碎片
src/layuiadmin/config.js：全局配置文件
src/views/：layuiAdmin 提供的視圖文件，你可以將其移動(dòng)到你服務(wù)端工程的 view 層中，注意修改 JS/CSS 的路徑即可。

dist/
通過(guò) gulp 將 資源包的 src 目錄的源代碼進(jìn)行構(gòu)建后生成的目錄（即：將 JS 和 CSS 文件進(jìn)行了壓縮等處理），通常用于線上環(huán)境。關(guān)于 gulp 的使用，下文也有介紹。

部署到服務(wù)端

將 src 目錄中的 views 文件夾整個(gè)復(fù)制到你 服務(wù)端工程 的 view 層中，通過(guò)本地 web 服務(wù)器訪問(wèn)（Tomcat / IIS / Apache / Nginx 等） 確保可以訪問(wèn)后，修改好 HTML 文件中的 JS/CSS 路徑，即可正常運(yùn)行頁(yè)面。 iframe 常規(guī)版 相比于 單頁(yè)面模式的專業(yè)版 ，無(wú)論是在目錄結(jié)構(gòu)還是開(kāi)發(fā)模式上都要簡(jiǎn)單很多。因?yàn)閱雾?yè)版是接管了服務(wù)端 MVC 的視圖層，而 iframe 版則將視圖交給了服務(wù)端來(lái)控制和輸出，可以避免鑒權(quán)的復(fù)雜程度，直接可銜接好新老項(xiàng)目（因?yàn)槟銈兊拇蟛糠掷享?xiàng)目都是采用 iframe 模式）。

全局配置

當(dāng)你已經(jīng)順利在本地預(yù)覽了 layuiAdmin 后，你一定迫不及待關(guān)注更深層的結(jié)構(gòu)。假設(shè)你頁(yè)面引入的是 src 目錄 的 JS，你還需要關(guān)注的是 src/layuiadmin/
目錄中的 config.js，它里面存儲(chǔ)著所有的默認(rèn)配置。你可以按照實(shí)際需求選擇性修改：

layui.define(['laytpl', 'layer', 'element', 'util'], function(exports){exports('setter', {container: 'LAY_app' //容器ID,base: layui.cache.base //記錄靜態(tài)資源所在路徑,views: layui.cache.base + 'tpl/' //動(dòng)態(tài)模板所在目錄,entry: 'index' //默認(rèn)視圖文件名,engine: '.html' //視圖文件后綴名,pageTabs: true //是否開(kāi)啟頁(yè)面選項(xiàng)卡功能。iframe 版推薦開(kāi)啟,name: 'layuiAdmin',tableName: 'layuiAdmin' //本地存儲(chǔ)表名,MOD_NAME: 'admin' //模塊事件名,debug: true //是否開(kāi)啟調(diào)試模式。如開(kāi)啟，接口異常時(shí)會(huì)拋出異常 URL 等信息//自定義請(qǐng)求字段,request: {tokenName: false //自動(dòng)攜帶 token 的字段名（如：access_token）。可設(shè)置 false 不攜帶。}//自定義響應(yīng)字段,response: {statusName: 'code' //數(shù)據(jù)狀態(tài)的字段名稱,statusCode: {ok: 0 //數(shù)據(jù)狀態(tài)一切正常的狀態(tài)碼,logout: 1001 //登錄狀態(tài)失效的狀態(tài)碼},msgName: 'msg' //狀態(tài)信息的字段名稱,dataName: 'data' //數(shù)據(jù)詳情的字段名稱}//擴(kuò)展的第三方模塊,extend: ['echarts', //echarts 核心包'echartsTheme' //echarts 主題]//主題配置,theme: {//配色方案，如果用戶未設(shè)置主題，第一個(gè)將作為默認(rèn)color: [{main: '#20222A' //主題色,selected: '#009688' //選中色,logo: '' //logo區(qū)域背景色,header: '' //頭部區(qū)域背景色,alias: 'default' //默認(rèn)別名}] //為了減少篇幅，更多主題此處不做列舉，可直接參考 config.js//初始的顏色索引，對(duì)應(yīng)上面的配色方案數(shù)組索引//如果本地已經(jīng)有主題色記錄，則以本地記錄為優(yōu)先，除非清除 LocalStorage（步驟：F12呼出調(diào)試工具→Aplication→Local Storage→選中頁(yè)面地址→layuiAdmin→再點(diǎn)上面的X）// 1.0 正式版開(kāi)始新增,initColorIndex: 0}}); });

基礎(chǔ)方法

config 模塊
你可以在任何地方通過(guò) layui.setter 得到 config.js 中的配置信息。如：layui.setter.base

admin 模塊
var admin = layui.admin;

admin.req(options)
Ajax 請(qǐng)求，用法同 $.ajax(options)，只是該方法會(huì)進(jìn)行錯(cuò)誤處理

admin.screen()
獲取屏幕類型，根據(jù)當(dāng)前屏幕大小，返回 0 - 3 的值
0: 低于768px的屏幕
1：768px到992px之間的屏幕
2：992px到1200px之間的屏幕
3：高于1200px的屏幕

admin.sideFlexible(status)
側(cè)邊伸縮。status 為 null：收縮；status為 “spread”：展開(kāi)

admin.on(eventName, callback)
事件監(jiān)聽(tīng)，下文會(huì)有講解

admin.popup(options)
彈出一個(gè) layuiAdmin 主題風(fēng)格的 layer 層，參數(shù) options 跟 layer.open(options) 完全相同

admin.popupRight(options)
在屏幕右側(cè)呼出一個(gè)面板層。options 同上。

admin.popupRight({
id: 'LAY-popup-right-new1' //定義唯一ID，防止重復(fù)彈出
,success: function(){
//將 views 目錄下的某視圖文件內(nèi)容渲染給該面板
layui.view(this.id).render('視圖文件所在路徑');
}
});

admin.resize(callback)
窗口 resize 事件處理，我們推薦你使用該方法取代 jQuery 的 resize 事件，以避免多頁(yè)面標(biāo)簽下可能存在的沖突。

admin.fullScreen()
全屏

admin.exitScreen()
退出全屏

admin.events

admin.events.refresh()
刷新當(dāng)前右側(cè)區(qū)域

admin.events.closeThisTabs()
關(guān)閉當(dāng)前標(biāo)簽頁(yè)

admin.resize(callback)
窗口 resize 事件處理，我們推薦你使用該方法取代 jQuery 的 resize 事件，以避免多頁(yè)面標(biāo)簽下可能存在的沖突。

admin.fullScreen()
全屏

admin.exitScreen()
退出全屏

admin.events

admin.events.refresh()
刷新當(dāng)前右側(cè)區(qū)域

admin.events.closeThisTabs()
關(guān)閉當(dāng)前標(biāo)簽頁(yè)

注意：如果是在 iframe 頁(yè)面中執(zhí)行關(guān)閉，需要如下寫(xiě)法： parent.layui.admin.events.closeThisTabs();

admin.events.closeOtherTabs()
關(guān)閉其它標(biāo)簽頁(yè)

admin.events.closeAllTabs()
關(guān)閉全部標(biāo)簽頁(yè)

view 模塊
用法同 專業(yè)版：http://fly.layui.com/docs/5/#base-view
在 iframe 頁(yè)面內(nèi)部打開(kāi)新標(biāo)簽
通常你會(huì)涉及一些在右側(cè) iframe 頁(yè)面內(nèi)部去打開(kāi)一個(gè)新標(biāo)簽的需求，目前有以下方式可以實(shí)現(xiàn)

方法一：

直接在 a 標(biāo)簽上加上相關(guān)屬性

<a lay-href="url">文本</a>

方法二：

JS里調(diào)用 index 模塊的相關(guān)方法

parent.layui.index.openTabsPage(href, text); //這里要注意的是 parent 的層級(jí)關(guān)系

自定義標(biāo)簽欄標(biāo)題

每當(dāng)你打開(kāi)一個(gè)標(biāo)簽頁(yè)，頭部都會(huì)出現(xiàn)標(biāo)題。它默認(rèn)讀取的是所點(diǎn)元素的文本，但是你也可以自定義標(biāo)題。

<a lay-href="url" lay-text="自定義標(biāo)題文本">默認(rèn)讀取的文本</a>

值得說(shuō)明的是，只要你配置了上述的 lay-href 屬性，就會(huì)打開(kāi)一個(gè)新的標(biāo)簽，如果要在當(dāng)前標(biāo)簽跳轉(zhuǎn)，直接配置 href="" 屬性即可。

實(shí)用組件

Hover 提示層
通過(guò)對(duì)元素設(shè)置 lay-tips="提示內(nèi)容" 來(lái)開(kāi)啟一個(gè) hover 提示，如：

<i class="layui-icon layui-icon-tips" lay-tips="要支持的噢" lay-offset="5"></i>

其中 lay-offset 用于定于水平偏移距離（單位px），以調(diào)整箭頭讓其對(duì)準(zhǔn)元素

兼容性
layuiAdmin 使用到了 layui 的柵格系統(tǒng)，而柵格則是基于瀏覽器的媒體查詢。ie8、9不支持。
所以要在宿主頁(yè)面（如 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]-->

升級(jí)事項(xiàng)

從官網(wǎng)更新資源包后，以 src 目錄為例（dist 由于是 src 構(gòu)建后生成的目錄，所以本質(zhì)是和 src 一樣的）
src 目錄下可以直接覆蓋的有：

src/json/ src/layui/ src/lib/ src/style/

需要靈活調(diào)配的有：
src/modules/
src/tpl/
src/config.js
如果沒(méi)有改動(dòng)默認(rèn)配置，事實(shí)上 config.js 也可以覆蓋升級(jí)

源碼構(gòu)建
當(dāng)你在 src 目錄完成開(kāi)發(fā)后，你可通過(guò) gulp 對(duì) src 源碼進(jìn)行自動(dòng)化構(gòu)建，以生成用于線上環(huán)境的 dist 目錄。并在 HTML 源代碼中引入該目錄的 JS/CSS。

在資源包中根目錄下看到的 gulpfile.js 是 layuiAdmin 寫(xiě)好的任務(wù)腳本，package.json 是任務(wù)配置文件，你只需按照以下步驟：

step1：確保你的電腦已經(jīng)安裝好了 Node.js，如果未安裝，可去官網(wǎng)下載安裝
step2: 命令行安裝 gulp：npm install gulp -g
step3：切換到 layuiAdmin 項(xiàng)目根目錄（即 gulpfile.js 所在目錄），命令行安裝任務(wù)所依賴的包：npm install
安裝完成后，后續(xù)只需直接執(zhí)行命令：gulp 即可完成 src 到 dist 目錄的構(gòu)建

總結(jié)

以上是生活随笔為你收集整理的layuiAdmin 框架iframe基础常用方法事件文档的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。