layuiAdmin 框架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，它里面存儲著所有的默認配置。你可以按照實際需求選擇性修改：
基礎方法
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()
關閉當前標簽頁
admin.events.closeOtherTabs()
關閉其它標簽頁
admin.events.closeAllTabs()
關閉全部標簽頁
view 模塊
用法同 專業版：http://fly.layui.com/docs/5/#base-view
在 iframe 頁面內部打開新標簽
通常你會涉及一些在右側 iframe 頁面內部去打開一個新標簽的需求，目前有以下方式可以實現
方法一：
直接在 a 標簽上加上相關屬性
<a lay-href="url">文本</a>方法二：
JS里調用 index 模塊的相關方法
parent.layui.index.openTabsPage(href, text); //這里要注意的是 parent 的層級關系自定義標簽欄標題
每當你打開一個標簽頁，頭部都會出現標題。它默認讀取的是所點元素的文本，但是你也可以自定義標題。
<a lay-href="url" lay-text="自定義標題文本">默認讀取的文本</a>值得說明的是，只要你配置了上述的 lay-href 屬性，就會打開一個新的標簽，如果要在當前標簽跳轉，直接配置 href="" 屬性即可。
實用組件
Hover 提示層
通過對元素設置 lay-tips="提示內容" 來開啟一個 hover 提示，如：
其中 lay-offset 用于定于水平偏移距離（單位px），以調整箭頭讓其對準元素
兼容性
layuiAdmin 使用到了 layui 的柵格系統，而柵格則是基于瀏覽器的媒體查詢。ie8、9不支持。
所以要在宿主頁面（如 start/index.html ）加上下面這段保證兼容：
升級事項
從官網更新資源包后，以 src 目錄為例（dist 由于是 src 構建后生成的目錄，所以本質是和 src 一樣的）
src 目錄下可以直接覆蓋的有：
需要靈活調配的有：
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 目錄的構建
總結
以上是生活随笔為你收集整理的layuiAdmin 框架iframe基础常用方法事件文档的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： layuiAdmin框架iframe版本
- 下一篇： CSU 1646: HearthSton