本文只針對于layuiAdmin框架iframe版本

• • 1.目錄說明
  • 2.宿主頁面
  • 3.加載 modules 目錄下自己的 JS 模塊
  • 4.框架基礎(chǔ)方法
  • • config 模塊
    • admin 模塊
    • view 模塊
  • 5.文章彩蛋
  • 6.高階

1.目錄說明

layuiadmin/modules/：存放 JS 業(yè)務(wù)模塊，即屬于自己的對視圖進(jìn)行事件等交互性處理layuiadmin/layui/：layuiAdmin 的核心模塊，一般不推薦修改layuiadmin/lib/index.js：layuiAdmin 的入口模塊 layuiadmin/style/：存放樣式，其中 admin.css是核心樣式layuiadmin/config.js：layuiAdmin 的全局配置文件，可隨意修改。

2.宿主頁面

/dist/views/index.html

3.加載 modules 目錄下自己的 JS 模塊

<script>//加載 modules 目錄下的對應(yīng)模塊小貼士：這里 console 模塊對應(yīng) 的 console.js 并不會重復(fù)加載，然而該頁面的視圖可能會重新插入到容器，那如何保證腳本能重新控制視圖呢？有兩種方式：1): 借助 layui.factory 方法獲取 console 模塊的工廠（回調(diào)函數(shù)）給 layui.use2): 直接在 layui.use 方法的回調(diào)中書寫業(yè)務(wù)代碼，即:layui.use('console', function(){ //同 console.js 中的 layui.define 回調(diào)中的代碼 });</script>

4.框架基礎(chǔ)方法

config 模塊

你可以在任何地方通過 layui.setter 得到 config.js 中的配置信息

admin 模塊

var admin = layui.admin;1.admin.req(options)Ajax 請求，用法同 $.ajax(options)，只是該方法會進(jìn)行錯(cuò)誤處理和 token 的自動傳遞 2.admin.screen()獲取屏幕類型，根據(jù)當(dāng)前屏幕大小，返回 0 - 3 的值0: 低于768px的屏幕1：768px到992px之間的屏幕2：992px到1200px之間的屏幕3：高于1200px的屏幕3.admin.sideFlexible(status)側(cè)邊伸縮。status 為 null：收縮；status為 “spread”：展開注意：如果是在 iframe 頁面中執(zhí)行關(guān)閉，需要如下寫法：parent.layui.admin.sideFlexible();4.admin.on(eventName, callback)事件監(jiān)聽5.admin.popup(options)彈出一個(gè) layuiAdmin 主題風(fēng)格的 layer 層，參數(shù) options 跟 layer.open(options) 完全相同6.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('視圖文件所在路徑');}});7.admin.resize(callback)窗口 resize 事件處理，我們推薦你使用該方法取代 jQuery 的 resize 事件，以避免多頁面標(biāo)簽下可能存在的沖突。8.parent.layui.admin.events.fullscreen($(window.parent.document).find('a[layadmin-event="fullscreen"]'));全屏9.parent.layui.admin.events.refresh();刷新當(dāng)前右側(cè)區(qū)域10.parent.layui.admin.events.closeThisTabs(); //當(dāng)前頁面是主頁面不可關(guān)閉關(guān)閉當(dāng)前標(biāo)簽頁11.parent.layui.admin.events.closeOtherTabs();關(guān)閉其它標(biāo)簽頁12.parent.layui.admin.events.closeAllTabs();關(guān)閉全部標(biāo)簽頁13.事件監(jiān)聽13.1 監(jiān)聽路由地址改變（hash）// 下述中的 xxx 可隨意定義，不可與已經(jīng)定義的 hash 事件同名，否則會覆蓋上一事件admin.on('hash(xxx)', function(router){console.log(router); //得到路由信息});13.2 監(jiān)聽側(cè)邊伸縮（side）// 下述中的 xxx 可隨意定義，不可與已經(jīng)定義的 side 事件同名，否則會覆蓋上一事件admin.on('side(xxx)', function(obj){console.log(obj.status); //得到伸縮狀態(tài)：spread 為展開狀態(tài)，其它值為收縮狀態(tài)});

view 模塊

var view = layui.view1.view(id)獲取指定容器，并返回一些視圖渲染的方法，如：//渲染視圖，viewPath 即為視圖路徑,dataoptions為傳遞給將要渲染視圖的數(shù)據(jù)view('id').render(viewPath,{dataoptions}).then(function(){//視圖文件請求完畢，視圖內(nèi)容渲染前的回調(diào)}).done(function(){//視圖文件請求完畢和內(nèi)容渲染完畢的回調(diào)});示例：view("viewrender").render("system/theme", {id: "我是傳過去的值：",text: "配色方案"}).then(function(res) {console.log(res)}).done(function(res) {console.log(res)});2.view('id').send(tpl, data);//直接向容器插入 html，tpl 為 模板字符；data 是傳入的數(shù)據(jù)。該方法會自動完成動態(tài)模板解析示例：view("viewsend").send("我是HTML代碼片段", {id: "我是傳過去的值"}).then(function(res) {console.log(res)}).done(function(res) {console.log(res)});

5.文章彩蛋

1.如何使用jQuery？答：layui內(nèi)置了最穩(wěn)定的模塊jQuery，無需script引入jquery。加載方式： layui.use('jquery', function(){ var $ = layui.$ //重點(diǎn)處//后面就跟你平時(shí)使用jQuery一樣$('body').append('hello jquery');})；2.為什么表單不顯示或者賦不上值？答：首先表單元素應(yīng)該放在class="layui-form" 的容器中，其次，layui會對select、checkbox、 radio等原始元素進(jìn)行隱藏，進(jìn)行美化修飾處理。這就需要依賴form模塊，所以你必須加載 form模塊，并且執(zhí)行一個(gè)實(shí)例。最后，如果你的表單是動態(tài)生成的，自動渲染就會失效，你需要在創(chuàng)建 或者賦值之后執(zhí)行form.render()方法來手動渲染。3.如何手動渲染？答： /* 監(jiān)聽動態(tài)添加或者賦值*/$("#checkboxAdd").click(function(){var resultHtml="";var dynamicValue=[{value:"dance",text:"跳舞"},{value:"run",text:"跑步"}];// 模擬數(shù)據(jù)$.each(dynamicValue, function(i,item) {resultHtml+="<input type=\"checkbox\" name=\""+item.value+"\" lay-skin=\"primary\" title=\""+item.text+"\">";});$("#checkbox-box").append(resultHtml);form.render(); // 動態(tài)生成或者賦值都需要手動渲染});4.lay-submit和lay-filter如何使用？答： lay-filter：事件過濾器，主要用于事件的精確匹配，跟id選擇器是比較類似的。任意字符。lay-submit：綁定觸發(fā)提交的元素，如button。無需填寫值。任何元素一點(diǎn)加上lay-submit屬性，即具有提交功能，可以對其監(jiān)聽提交事件。如： <button class="layui-btn" lay-submit lay-filter="test">立即提交</button>5.如何監(jiān)聽submit提交？ form.on('submit(test)', function(data){ console.log(data.elem) //被執(zhí)行事件的元素DOM對象，一般為button對象console.log(data.form) //被執(zhí)行提交的form對象，一般在存在form標(biāo)簽時(shí)才會返回console.log(data.field) //當(dāng)前容器的全部表單字段，名值對形式：{name: value}這個(gè)很有用return false; //阻止表單跳轉(zhuǎn)。如果需要表單跳轉(zhuǎn)，去掉這段即可。});6.如何獲取ifream彈出層頁面中的表單值供當(dāng)前頁面使用？場景：假設(shè)在index.html里面有如下彈出框layer.open({content: "listform.html",//這里是另一個(gè)頁面yes: function(index, layero) {//分別為當(dāng)前層索引、當(dāng)前層DOM對象（listform.html層）//需求：在點(diǎn)擊確定的時(shí)候要取得listform.html頁面中某個(gè)表單的值var body = layer.getChildFrame('body', index);var iframeWin = window[layero.find('iframe')[0]['name']];//得到iframe頁的窗口對象console.log(body.find('input[name="title"]').val())//拿到listform.htmltitle表單的值} });7.日期和時(shí)間組件laydate閃屏？ laydate.render({trigger: 'click'//加上這句話});8.如何一次性獲取ifream彈出層頁面里面的所有表單值？ 1.首先在ifream頁面的表單容器（通常是from元素包裹的）里面添加一個(gè)提交按鈕，默認(rèn)隱藏。2. var body = layer.getChildFrame('body', index);var iframeWin = window[layero.find('iframe')[0]['name']]; //得到iframe頁的窗口對象，執(zhí)行iframe頁的方法：iframeWin.method();iframeWin.layui.form.on('submit(groupHigh)', function(data){layer.alert(JSON.stringify(data.field), {title: '最終的提交信息'})return false;//layer.close(index); //關(guān)閉彈層}); body.find('button[lay-filter="groupHigh"]').click();//觸發(fā)提交按鈕的提交事件

6.高階

如何擴(kuò)展和使用擴(kuò)展模塊？

1.擴(kuò)展admincommon公共模塊
在layui.define([“form”, “layer”, “formSelects”], 的數(shù)組中可以提前加載需要的模塊，其中jQuery不需要寫進(jìn)數(shù)組中，在回調(diào)函數(shù)中聲明即可var $ = layui.$。特別說明：當(dāng)依賴中存在非layui內(nèi)置的模塊如：formSelects時(shí)，那引用admincommon文件的頁面也需要依賴formSelects模塊，否則admincommon中找不到formSelects就會報(bào)錯(cuò)。



2.使用模塊
2.1頁面引用了index模塊

2.1頁面沒有引用index模塊

總結(jié)

以上是生活随笔為你收集整理的layuiAdmin框架iframe版本个人总结的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

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