Layui彈出層 加載 做編輯頁面的方法
更新時間：2019年09月16日 10:37:57 作者：東明之羞
今天小編就為大家分享一篇Layui彈出層 加載 做編輯頁面的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
layui是一款優(yōu)秀的模塊化前端框架。利用layui彈出層做編輯頁面
先上效果圖
基本準(zhǔn)備，引入layui的layui.css,layui.js文件
<link rel="stylesheet" href="../../../Publics/others/layui/css/layui.css" rel="external nofollow" media="all"> <script src="../../../Publics/others/layui/layui.js"></script>
Js方法
/**
* 頁面內(nèi)彈出編輯窗口 //需要引入 layui.js layui.css文件
* @param {} title 標(biāo)題 不顯示為false
* @param {} area 大小 ["400px","500px"] 或者 "400px"--->只設(shè)置寬度
* @param {} path 彈出頁面路徑
* @param {} sucFunName 執(zhí)行保存操作后再彈出頁面中的保存方法名稱
* @param {} callBack 執(zhí)行保存操作之后的其他操作
* @returns {}
*/
function openDetial(title, area, path, sucFunName, callBack) {
layer.open({
type: 2,
title: title, //不顯示標(biāo)題欄
closeBtn: 2,
area: area,
shade: 0.8,
id: (new Date()).valueOf(), //設(shè)定一個id，防止重復(fù)彈出 時間戳1280977330748
btn: ['保存', '取消'],
btnAlign: 'r',
moveType: 1, //拖拽模式，0或者1
content: path,
yes: function (index, layero) {
var btn = layero.find('.layui-layer-btn').find('.layui-layer-btn0');
alert("-----");
try {
var _ifr = btn[0].parentNode.parentNode.getElementsByClassName("layui-layer-content")[0].children[0].contentWindow ||
btn[0].parentNode.parentNode.getElementsByClassName("layui-layer-content")[0].children[0].children[0].contentWindow;
var func = new Function('_ifr', "return _ifr." + sucFunName + "();");
var flg = func(_ifr);
if (flg == false) {
return false;
} else {
if (callBack != null) callBack();
window.location.reload();
}
} catch (ex) {
}
},
btn2: function (index, layero) {
}
});
}
以下是測試頁面 測試頁面中具備保存方法ApplicationSave()
調(diào)用 如下參數(shù)中的ApplicationSave和編輯頁面的方法名一致
openDetial("列表維護", ['600px', '550px'], "./editor.html", "ApplicationSave", function() {alert("執(zhí)行完了");});
有興趣的小伙伴，可以試試
以上這篇Layui彈出層 加載 做編輯頁面的方法就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家詳細介紹了JavaScript瀑布流布局的實現(xiàn)代碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-05-05
這篇文章主要介紹了JavaScript調(diào)用瀏覽器打印功能的方法,實例分析了針對各種常用瀏覽器調(diào)用打印功能的相關(guān)技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-07-07
Vue2.0+ElementUI實現(xiàn)表格翻頁的實例
下面小編就為大家?guī)硪黄猇ue2.0+ElementUI實現(xiàn)表格翻頁的實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-10-10
jfreechart插件將數(shù)據(jù)展示成餅狀圖、柱狀圖和折線圖
閑暇之余，學(xué)習(xí)了一下jfreechart圖表生成，結(jié)合大蝦們的著作，小弟進行了系統(tǒng)的總結(jié)，真是獲益匪淺，這里推薦給小伙伴們，有需要的朋友可以參考下。2015-04-04
微信小程序開發(fā)之從相冊獲取圖片 使用相機拍照 本地圖片上傳
本篇文章主要介紹了微信小程序開發(fā)之從相冊獲取圖片--使用相機拍照，本地圖片上傳的相關(guān)資料。具有很好的參考價值。下面跟著小編一起來看下吧2017-04-04
微信小程序調(diào)用PHP后臺接口 解析純html文本
這篇文章主要為大家詳細介紹了微信小程序調(diào)用PHP后臺接口，解析純html文本的相關(guān)資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-06-06
本文給大家分享js設(shè)置ios中微信瀏覽器中的title的解決方法，實現(xiàn)原理比較簡單，對js微信瀏覽器title相關(guān)知識感興趣的朋友一起通過本文學(xué)習(xí)吧2016-11-11
這篇文章主要為大家詳細介紹了微信小程序?qū)崿F(xiàn)刷臉登錄，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-05-05
這篇文章主要介紹了微信小程序項目實踐之驗證碼倒計時功能,當(dāng)用戶點擊發(fā)送驗證碼按鈕，按鈕背景變色，不可點擊，顯示倒計時文字，需要的朋友可以參考下2018-07-07
這篇文章主要為大家詳細介紹了原生JS實現(xiàn)輪播圖效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-10-10