From 8825c63bdf0a9fa24b6a0e35572c8a77b1340119 Mon Sep 17 00:00:00 2001 From: sight <1453017105@qq.com> Date: Fri, 27 May 2022 13:56:50 +0800 Subject: [PATCH] =?UTF-8?q?feat(drawer):=20=E6=B7=BB=E5=8A=A0=20iframe=20?= =?UTF-8?q?=E5=92=8C=20url=20=E5=8F=82=E6=95=B0,=20=E6=94=AF=E6=8C=81?= =?UTF-8?q?=E5=8A=A0=E8=BD=BD=E8=BF=9C=E7=A8=8B=E9=A1=B5=E9=9D=A2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- component/pear/module/drawer.js | 94 ++-- component/pear/module/loading.js | 752 +++++++++++++++--------------- view/document/drawer.html | 83 +++- view/document/drawerFragment.html | 385 +++++++++++++++ 4 files changed, 889 insertions(+), 425 deletions(-) create mode 100644 view/document/drawerFragment.html diff --git a/component/pear/module/drawer.js b/component/pear/module/drawer.js index 99878cd..49c24d7 100644 --- a/component/pear/module/drawer.js +++ b/component/pear/module/drawer.js @@ -1,4 +1,4 @@ -layui.define(['jquery', 'element', 'layer'], function (exports) { +layui.define(['jquery', 'element', 'layer', 'loading'], function (exports) { "use strict"; /** @@ -7,7 +7,8 @@ layui.define(['jquery', 'element', 'layer'], function (exports) { var MOD_NAME = 'drawer', $ = layui.jquery, element = layui.element, - layer = layui.layer; + layer = layui.layer, + loading = layui.loading; var drawer = new function () { @@ -43,43 +44,71 @@ layui.define(['jquery', 'element', 'layer'], function (exports) { } /** - * + * * 封装 layer.open * type,anim,move,fixed不可用,其它参数和 layer.open 一致 - * @param {LayerOption} option + * @param {LayerOption} option * @returns 原生 layer 的 index */ function layerDrawer(option) { - var opt = normalizeOption(option) - if (opt.target) { - var targetDOM = $(opt.target); - var contentDOM = $(opt.content); - contentDOM.appendTo(targetDOM); - opt.skin = getDrawerAnimationClass(opt.offset, true); - opt.offset = calcOffset(opt.offset, opt.area, targetDOM); - // 处理关闭后偶现 DOM 仍显示的问题,layer 的 BUG - opt.end = Aspect(opt.end, function () { - contentDOM.css("display", "none"); - }) - if (opt.shade) { - // 遮罩和弹层同级处理 - opt.success = Aspect(opt.success, function (layero) { - var shadeDOM = $(".layui-layer-shade"); - shadeDOM.css("position", "absolute"); - shadeDOM.appendTo(layero.parent()); - }) - } - } + if (opt.target) appendToTarget(opt); + if (opt.url) loadFragment(opt); var layerIndex = layer.open(opt); return layerIndex; } + /** + * 加载 HTML 片段到 layer content + * @param {*} option + */ + function loadFragment(option) { + option.success = Aspect(option.success, function (layero, index) { + var layerID = "#" + layero.attr("id"); + loading.block({ + type: 1, + elem: layerID, + msg: '' + }); + $.ajax({ + url: option.url, + dataType: "html", + success: function (result) { + layero.children('.layui-layer-content').html(result); + loading.blockRemove(layerID); + } + }) + }) + } + + /** + *将 layer 挂载到指定节点 + * @param {object} opt + */ + function appendToTarget(opt) { + var targetDOM = $(opt.target); + var contentDOM = $(opt.content); + contentDOM.appendTo(targetDOM); + opt.skin = getDrawerAnimationClass(opt.offset, true); + opt.offset = calcOffset(opt.offset, opt.area, targetDOM); + // 处理关闭后偶现 DOM 仍显示的问题,layer 的 BUG + opt.end = Aspect(opt.end, function () { + contentDOM.css("display", "none"); + }) + if (opt.shade) { + opt.success = Aspect(opt.success, function (layero, index) { + var shadeDOM = $("#layui-layer-shade" + index); + shadeDOM.css("position", "absolute"); + shadeDOM.appendTo(layero.parent()); + }) + } + } + /** * 规格化 layer.open 选项,兼容原版 Drawer 所有选项 * @param {LayerOption} option layer.open 的选项 - * @returns 规格化后的 layer.open 选项 + * @returns 规格化后的 layer.open 选项 */ function normalizeOption(option) { if (option.direction && !option.offset) { @@ -109,6 +138,10 @@ layui.define(['jquery', 'element', 'layer'], function (exports) { option.anim = -1; option.move = false; option.fixed = true; + if (option.iframe) { + option.type = 2; + option.content = option.iframe; + } if (option.offset === undefined) option.offset = "r"; option.area = calcDrawerArea(option.offset, option.area); if (option.title === undefined) option.title = false; @@ -125,7 +158,7 @@ layui.define(['jquery', 'element', 'layer'], function (exports) { /** * 计算抽屉宽高 - * @param {string} offset 抽屉方向 l = 左, r = 右, t = 上, b = 下 + * @param {string} offset 抽屉方向 l = 左, r = 右, t = 上, b = 下 * @param {string[] | string} drawerArea 抽屉大小,字符串数组格式:[width, height],字符串格式:百分比或单位 px。 * @returns 抽屉宽高数组 */ @@ -208,10 +241,10 @@ layui.define(['jquery', 'element', 'layer'], function (exports) { } /** - * 一个简易的切面 + * 简易的切面 * @param {Function} func 被通知的对象,原函数 - * @param {Function} before 前置通知 - * @param {Function} after 后置通知 + * @param {Function | undefined} before 前置通知 + * @param {Function | undefined} after 后置通知 * @returns 代理函数 */ function Aspect(target, before, after) { @@ -348,7 +381,6 @@ layui.define(['jquery', 'element', 'layer'], function (exports) { open: function () { var d = this; d.wrap.style.display = "block"; - setTimeout(function () { d.inner.style.transform = "translate3d(0,0,0)"; d.inner.style.webkitTransform = "translate3d(0,0,0)"; @@ -385,4 +417,4 @@ layui.define(['jquery', 'element', 'layer'], function (exports) { } }; b.mSlider = a -})(window); \ No newline at end of file +})(window); diff --git a/component/pear/module/loading.js b/component/pear/module/loading.js index e9f6f1a..447bd38 100644 --- a/component/pear/module/loading.js +++ b/component/pear/module/loading.js @@ -4,15 +4,11 @@ layui.define(['table', 'jquery', 'element'], function (exports) { var MOD_NAME = 'loading', $ = layui.jquery, element = layui.element; - var pearOper = new function () { - this.blockRemove = function(dom,time){ Notiflix.Block.Remove(dom, time); } - this.block = function(option){ - if(option.type==1){ Notiflix.Block.Standard( option.elem @@ -29,7 +25,6 @@ layui.define(['table', 'jquery', 'element'], function (exports) { ,option.msg); } else if(option.type==4){ - Notiflix.Block.Arrows( option.elem ,option.msg); @@ -45,46 +40,45 @@ layui.define(['table', 'jquery', 'element'], function (exports) { ,option.msg); } } - this.report = function(option){ if(option.type=="success"){ Notiflix.Report.Success( option.title, - option.message,'确认'); + option.message,'确认'); }else if(option.type=="failure"){ Notiflix.Report.Failure( option.title, - option.message,'确认'); + option.message,'确认'); }else if(option.type=="warning"){ Notiflix.Report.Warning( option.title, - option.message,'确认'); + option.message,'确认'); }else if(option.type=="info"){ Notiflix.Report.Info( option.title, - option.message,'确认'); + option.message,'确认'); } } - + this.notice = function(option){ Notiflix.Notify.Init({ position:option.position?"right-top":option.position, }); if(option.type=="success"){ - + Notiflix.Notify.Success(option.title); }else if(option.type=="failure"){ - + Notiflix.Notify.Failure(option.title); }else if(option.type=="warning"){ - - Notiflix.Notify.Warning(option.title); + + Notiflix.Notify.Warning(option.title); }else if(option.type=="info"){ - - Notiflix.Notify.Info(option.title); + + Notiflix.Notify.Info(option.title); } } - + this.confirm = function(option){ Notiflix.Confirm.Show( option.title, @@ -95,7 +89,7 @@ layui.define(['table', 'jquery', 'element'], function (exports) { option.cancle ); } - + this.drawer = function(position,dom,distance){ var _right = new mSlider({ dom: dom, @@ -104,11 +98,11 @@ layui.define(['table', 'jquery', 'element'], function (exports) { }); _right.open(); } - + this.loadRemove = function(time){ Notiflix.Loading.Remove(time); } - + this.Load = function(type,message){ if(type==1){ Notiflix.Loading.Standard(message); @@ -122,27 +116,27 @@ layui.define(['table', 'jquery', 'element'], function (exports) { Notiflix.Loading.Pulse(message); } } - + this.msg = function(option){ if(option.type=="success"){ - + layer.msg(option.title,{icon:1,time:option.time},option.callback); - + }else if(option.type=="failure"){ - + layer.msg(option.title,{icon:2,time:option.time},option.callback); - + }else if(option.type=="warning"){ - + layer.msg(option.title,{icon:3,time:option.time},option.callback); - + }else if(option.type=="info"){ - + layer.msg(option.title,{icon:4,time:option.time},option.callback); } } }; - + // Notiflix: Notify Default Settings on var notifySettings = { wrapID: 'NotiflixNotifyWrap', // can not customizable @@ -159,7 +153,7 @@ layui.define(['table', 'jquery', 'element'], function (exports) { plainText: true, showOnlyTheLastOne: false, clickToClose: false, - + ID: 'NotiflixNotify', className: 'notiflix-notify', zindex: 4001, @@ -174,7 +168,7 @@ layui.define(['table', 'jquery', 'element'], function (exports) { useFontAwesome: false, fontAwesomeIconStyle: 'basic', // 'basic' - 'shadow' fontAwesomeIconSize: '34px', - + success: { background: '#32c682', textColor: '#fff', @@ -183,7 +177,7 @@ layui.define(['table', 'jquery', 'element'], function (exports) { fontAwesomeClassName: 'fas fa-check-circle', fontAwesomeIconColor: 'rgba(0,0,0,0.2)', }, - + failure: { background: '#ff5549', textColor: '#fff', @@ -192,7 +186,7 @@ layui.define(['table', 'jquery', 'element'], function (exports) { fontAwesomeClassName: 'fas fa-times-circle', fontAwesomeIconColor: 'rgba(0,0,0,0.2)', }, - + warning: { background: '#eebf31', textColor: '#fff', @@ -201,7 +195,7 @@ layui.define(['table', 'jquery', 'element'], function (exports) { fontAwesomeClassName: 'fas fa-exclamation-circle', fontAwesomeIconColor: 'rgba(0,0,0,0.2)', }, - + info: { background: '#26c0d3', textColor: '#fff', @@ -212,7 +206,7 @@ layui.define(['table', 'jquery', 'element'], function (exports) { }, }; // Notiflix: Notify Default Settings off - + // Notiflix: Report Default Settings on var reportSettings = { ID: 'NotiflixReportWrap', // can not customizable @@ -237,7 +231,7 @@ layui.define(['table', 'jquery', 'element'], function (exports) { cssAnimation: true, cssAnimationDuration: 360, cssAnimationStyle: 'fade', // 'fade' - 'zoom' - + success: { svgColor: '#32c682', titleColor: '#1e1e1e', @@ -245,7 +239,7 @@ layui.define(['table', 'jquery', 'element'], function (exports) { buttonBackground: '#32c682', buttonColor: '#fff', }, - + failure: { svgColor: '#ff5549', titleColor: '#1e1e1e', @@ -253,7 +247,7 @@ layui.define(['table', 'jquery', 'element'], function (exports) { buttonBackground: '#ff5549', buttonColor: '#fff', }, - + warning: { svgColor: '#eebf31', titleColor: '#1e1e1e', @@ -261,7 +255,7 @@ layui.define(['table', 'jquery', 'element'], function (exports) { buttonBackground: '#eebf31', buttonColor: '#fff', }, - + info: { svgColor: '#26c0d3', titleColor: '#1e1e1e', @@ -271,7 +265,7 @@ layui.define(['table', 'jquery', 'element'], function (exports) { }, }; // Notiflix: Report Default Settings off - + // Notiflix: Confirm Default Settings on var confirmSettings = { ID: 'NotiflixConfirmWrap', // can not customizable @@ -291,15 +285,15 @@ layui.define(['table', 'jquery', 'element'], function (exports) { cssAnimationStyle: 'fade', // 'zoom' - 'fade' cssAnimationDuration: 300, plainText: true, - + titleColor: '#32c682', titleFontSize: '16px', titleMaxLength: 34, - + messageColor: '#1e1e1e', messageFontSize: '14px', messageMaxLength: 110, - + buttonsFontSize: '15px', buttonsMaxLength: 34, okButtonColor: '#f8f8f8', @@ -308,7 +302,7 @@ layui.define(['table', 'jquery', 'element'], function (exports) { cancelButtonBackground: '#a9a9a9', }; // Notiflix: Confirm Default Settings off - + // Notiflix: Loading Default Settings on var loadingSettings = { ID: 'NotiflixLoadingWrap', // can not customizable @@ -330,7 +324,7 @@ layui.define(['table', 'jquery', 'element'], function (exports) { messageColor: '#dcdcdc', }; // Notiflix: Loading Default Settings off - + // Notiflix: Block Default Settings on var blockSettings = { ID: 'NotiflixBlockWrap', // can not customizable @@ -351,7 +345,7 @@ layui.define(['table', 'jquery', 'element'], function (exports) { messageColor: '#383838', }; // Notiflix: Block Default Settings off - + // Notiflix: Extend on var extendNotiflix = function () { // variables @@ -383,7 +377,7 @@ layui.define(['table', 'jquery', 'element'], function (exports) { return extended; }; // Notiflix: Extend off - + // Notiflix: Plaintext on var notiflixPlaintext = function (html) { var htmlPool = document.createElement('div'); @@ -391,7 +385,7 @@ layui.define(['table', 'jquery', 'element'], function (exports) { return htmlPool.textContent || htmlPool.innerText || ''; }; // Notiflix: Plaintext off - + // Notiflix: GoogleFont on var notiflixGoogleFont = function (use, family) { if (!document.getElementById('NotiflixQuicksand') && use && (family && typeof family === 'string' && family.toLowerCase() === 'quicksand')) { @@ -402,7 +396,7 @@ layui.define(['table', 'jquery', 'element'], function (exports) { var dnsFragment = dnsRange.createContextualFragment(dns); document.head.appendChild(dnsFragment); // google fonts dns prefetch off - + // google fonts style on var font = ''; var fontRange = document.createRange(); @@ -413,19 +407,19 @@ layui.define(['table', 'jquery', 'element'], function (exports) { } }; // Notiflix: GoogleFont off - + // Notiflix: Console Error on var notiflixConsoleError = function (title, message) { return console.error('%c ' + title + ' ', 'padding:2px;border-radius:20px;color:#fff;background:#ff5549', '\n' + message + '\nVisit documentation page to learn more: https://www.notiflix.com/documentation'); }; // Notiflix: Console Error off - + // Notiflix: Console Log on var notiflixConsoleLog = function (title, message) { return console.log('%c ' + title + ' ', 'padding:2px;border-radius:20px;color:#fff;background:#26c0d3', '\n' + message + '\nVisit documentation page to learn more: https://www.notiflix.com/documentation'); }; // Notiflix: Console Log off - + // Notiflix: Main on var newNotifySettings; var newReportSettings; @@ -435,7 +429,7 @@ layui.define(['table', 'jquery', 'element'], function (exports) { var Notiflix = { // Notify on Notify: { - + // Init Init: function (userNotifyOpt) { // extend options @@ -443,7 +437,7 @@ layui.define(['table', 'jquery', 'element'], function (exports) { // use GoogleFonts if "Quicksand" notiflixGoogleFont(newNotifySettings.useGoogleFont, newNotifySettings.fontFamily); }, - + // Merge First Init Merge: function (userNotifyExtend) { // if initialized already @@ -456,7 +450,7 @@ layui.define(['table', 'jquery', 'element'], function (exports) { return false; } }, - + // Display Notification: Success Success: function (message, callback) { // if not initialized pretend like init @@ -466,7 +460,7 @@ layui.define(['table', 'jquery', 'element'], function (exports) { var theType = newNotifySettings.success; NotiflixNotify(message, callback, theType, 'Success'); }, - + // Display Notification: Failure Failure: function (message, callback) { // if not initialized pretend like init @@ -476,7 +470,7 @@ layui.define(['table', 'jquery', 'element'], function (exports) { var theType = newNotifySettings.failure; NotiflixNotify(message, callback, theType, 'Failure'); }, - + // Display Notification: Warning Warning: function (message, callback) { // if not initialized pretend like init @@ -486,7 +480,7 @@ layui.define(['table', 'jquery', 'element'], function (exports) { var theType = newNotifySettings.warning; NotiflixNotify(message, callback, theType, 'Warning'); }, - + // Display Notification: Info Info: function (message, callback) { // if not initialized pretend like init @@ -498,10 +492,10 @@ layui.define(['table', 'jquery', 'element'], function (exports) { }, }, // Notify off - + // Report on Report: { - + // Init Init: function (userReportOpt) { // extend options @@ -509,7 +503,7 @@ layui.define(['table', 'jquery', 'element'], function (exports) { // use GoogleFonts if "Quicksand" notiflixGoogleFont(newReportSettings.useGoogleFont, newReportSettings.fontFamily); }, - + // Merge First Init Merge: function (userReportExtend) { // if initialized already @@ -522,7 +516,7 @@ layui.define(['table', 'jquery', 'element'], function (exports) { return false; } }, - + // Display Report: Success Success: function (title, message, buttonText, buttonCallback) { // if not initialized pretend like init @@ -532,7 +526,7 @@ layui.define(['table', 'jquery', 'element'], function (exports) { var theType = newReportSettings.success; NotiflixReport(title, message, buttonText, buttonCallback, theType, 'Success'); }, - + // Display Report: Failure Failure: function (title, message, buttonText, buttonCallback) { // if not initialized pretend like init @@ -542,7 +536,7 @@ layui.define(['table', 'jquery', 'element'], function (exports) { var theType = newReportSettings.failure; NotiflixReport(title, message, buttonText, buttonCallback, theType, 'Failure'); }, - + // Display Report: Warning Warning: function (title, message, buttonText, buttonCallback) { // if not initialized pretend like init @@ -552,7 +546,7 @@ layui.define(['table', 'jquery', 'element'], function (exports) { var theType = newReportSettings.warning; NotiflixReport(title, message, buttonText, buttonCallback, theType, 'Warning'); }, - + // Display Report: Info Info: function (title, message, buttonText, buttonCallback) { // if not initialized pretend like init @@ -564,10 +558,10 @@ layui.define(['table', 'jquery', 'element'], function (exports) { }, }, // Report off - + // Confirm on Confirm: { - + // Init Init: function (userConfirmOpt) { // extend options @@ -575,7 +569,7 @@ layui.define(['table', 'jquery', 'element'], function (exports) { // use GoogleFonts if "Quicksand" notiflixGoogleFont(newConfirmSettings.useGoogleFont, newConfirmSettings.fontFamily); }, - + // Merge First Init Merge: function (userConfirmExtend) { // if initialized already @@ -588,7 +582,7 @@ layui.define(['table', 'jquery', 'element'], function (exports) { return false; } }, - + // Display Confirm: Show Show: function (title, message, okText, cancelText, okCallback, cancelCallback) { if (!title) { title = 'Notiflix Confirm'; } @@ -601,10 +595,10 @@ layui.define(['table', 'jquery', 'element'], function (exports) { }, }, // Confirm off - + // Loading on Loading: { - + // Init Init: function (userLoadingOpt) { // extend options @@ -612,7 +606,7 @@ layui.define(['table', 'jquery', 'element'], function (exports) { // use GoogleFonts if "Quicksand" notiflixGoogleFont(newLoadingSettings.useGoogleFont, newLoadingSettings.fontFamily); }, - + // Merge First Init Merge: function (userLoadingExtend) { // if initialized already @@ -625,63 +619,63 @@ layui.define(['table', 'jquery', 'element'], function (exports) { return false; } }, - + // Display Loading: Standard Standard: function (message) { NotiflixLoading(message, 'standard', true, 0); // true => display || 0 => delay }, - + // Display Loading: Hourglass Hourglass: function (message) { NotiflixLoading(message, 'hourglass', true, 0); // true => display || 0 => delay }, - + // Display Loading: Circle Circle: function (message) { NotiflixLoading(message, 'circle', true, 0); // true => display || 0 => delay }, - + // Display Loading: Arrows Arrows: function (message) { NotiflixLoading(message, 'arrows', true, 0); // true => display || 0 => delay }, - + // Display Loading: Dots Dots: function (message) { NotiflixLoading(message, 'dots', true, 0); // true => display || 0 => delay }, - + // Display Loading: Pulse Pulse: function (message) { NotiflixLoading(message, 'pulse', true, 0); // true => display || 0 => delay }, - + // Display Loading: Custom Custom: function (message) { NotiflixLoading(message, 'custom', true, 0); // true => display || 0 => delay }, - + // Display Loading: Notiflix Notiflix: function (message) { NotiflixLoading(message, 'notiflix', true, 0); // true => display || 0 => delay }, - + // Remove Loading Remove: function (theDelay) { if (!theDelay) { theDelay = 0; } NotiflixLoading(false, false, false, theDelay); // false = Remove }, - + // Change The Message Change: function (newMessage) { NotiflixLoadingChange(newMessage); }, }, // Loading off - + // Block on Block: { - + // Initialize Init: function (userBlockOpt) { // extend options @@ -689,7 +683,7 @@ layui.define(['table', 'jquery', 'element'], function (exports) { // use GoogleFonts if "Quicksand" notiflixGoogleFont(newBlockSettings.useGoogleFont, newBlockSettings.fontFamily); }, - + // Merge First Initialize Merge: function (userBlockExtend) { // if initialized already @@ -702,49 +696,49 @@ layui.define(['table', 'jquery', 'element'], function (exports) { return false; } }, - + // Display Block: Standard Standard: function (selector, message) { var block = true; var theIcon = 'standard'; NotiflixBlockUnblockElement(block, selector, theIcon, message); }, - + // Display Block: Hourglass Hourglass: function (selector, message) { var block = true; var theIcon = 'hourglass'; NotiflixBlockUnblockElement(block, selector, theIcon, message); }, - + // Display Block: Circle Circle: function (selector, message) { var block = true; var theIcon = 'circle'; NotiflixBlockUnblockElement(block, selector, theIcon, message); }, - + // Display Block: Arrows Arrows: function (selector, message) { var block = true; var theIcon = 'arrows'; NotiflixBlockUnblockElement(block, selector, theIcon, message); }, - + // Display Block: Dots Dots: function (selector, message) { var block = true; var theIcon = 'dots'; NotiflixBlockUnblockElement(block, selector, theIcon, message); }, - + // Display Block: Pulse Pulse: function (selector, message) { var block = true; var theIcon = 'pulse'; NotiflixBlockUnblockElement(block, selector, theIcon, message); }, - + // Remove Block Remove: function (selector, delay) { var block = false; @@ -756,54 +750,54 @@ layui.define(['table', 'jquery', 'element'], function (exports) { // Block off }; // Notiflix: Main off - - + + // Notiflix: Notify Single on var notiflixNotifyCount = 0; var NotiflixNotify = function (message, callback, theType, staticType) { if (arguments && arguments.length === 4) { - + // notify counter on notiflixNotifyCount++; // notify counter off - + // if no message on if (!message) { message = 'Notiflix ' + staticType; } // if no message off - - // if plainText true = HTML tags not allowed on + + // if plainText true = HTML tags not allowed on if (newNotifySettings.plainText) { message = notiflixPlaintext(message); // message plain text } // if plainText true = HTML tags not allowed off - + // if plainText false but the message length more than messageMaxLength = HTML tags error on if (!newNotifySettings.plainText && message.length > newNotifySettings.messageMaxLength) { Notiflix.Notify.Merge({ closeButton: true, plainText: false, }); message = 'HTML Tags Error: Your content length is more than "messageMaxLength" option.'; // message html error } // if plainText false but the message length more than messageMaxLength = HTML tags error off - + // message max length substring on if (message.length > newNotifySettings.messageMaxLength) { message = message.substring(0, newNotifySettings.messageMaxLength) + '...'; } // message max length substring off - + // font awesome icon style on if (newNotifySettings.fontAwesomeIconStyle === 'shadow') { theType.fontAwesomeIconColor = theType.background; } // font awesome icon style off - + // if cssAnimaion false -> duration on if (!newNotifySettings.cssAnimation) { newNotifySettings.cssAnimationDuration = 0; } // if cssAnimaion false -> duration off - + // notify wrap on var docBody = document.body; var ntflxNotifyWrap = document.createElement('div'); @@ -811,7 +805,7 @@ layui.define(['table', 'jquery', 'element'], function (exports) { ntflxNotifyWrap.style.width = newNotifySettings.width; ntflxNotifyWrap.style.zIndex = newNotifySettings.zindex; ntflxNotifyWrap.style.opacity = newNotifySettings.opacity; - + // wrap position on if (newNotifySettings.position === 'right-bottom') { ntflxNotifyWrap.style.right = newNotifySettings.distance; @@ -835,7 +829,7 @@ layui.define(['table', 'jquery', 'element'], function (exports) { ntflxNotifyWrap.style.bottom = 'auto'; } // wrap position off - + // if background overlay true on var notifyOverlay; if (newNotifySettings.backOverlay) { @@ -857,12 +851,12 @@ layui.define(['table', 'jquery', 'element'], function (exports) { } } // if background overlay true off - + if (!document.getElementById(ntflxNotifyWrap.id)) { docBody.appendChild(ntflxNotifyWrap); } // notify wrap off - + // notify content on var ntflxNotify = document.createElement('div'); ntflxNotify.id = newNotifySettings.ID + '-' + notiflixNotifyCount; @@ -871,31 +865,31 @@ layui.define(['table', 'jquery', 'element'], function (exports) { ntflxNotify.style.color = theType.textColor; ntflxNotify.style.background = theType.background; ntflxNotify.style.borderRadius = newNotifySettings.borderRadius; - + // rtl on if (newNotifySettings.rtl) { ntflxNotify.setAttribute('dir', 'rtl'); ntflxNotify.classList.add('rtl-on'); } // rtl off - + // font-family on ntflxNotify.style.fontFamily = '"' + newNotifySettings.fontFamily + '"' + ', sans-serif'; // font-family off - + // use css animation on if (newNotifySettings.cssAnimation) { ntflxNotify.style.animationDuration = newNotifySettings.cssAnimationDuration + 'ms'; } // use css animation off - + // close button element on var closeButtonHTML = ''; if (newNotifySettings.closeButton && !callback) { closeButtonHTML = ''; } // close buttpon element off - + // use icon on if (newNotifySettings.useIcon) { // use font awesome @@ -925,7 +919,7 @@ layui.define(['table', 'jquery', 'element'], function (exports) { } // use icon off // notify content off - + // notify append or prepend on if (newNotifySettings.position === 'left-bottom' || newNotifySettings.position === 'right-bottom') { // the new one will be first var notifyWrap = document.getElementById(ntflxNotifyWrap.id); @@ -933,7 +927,7 @@ layui.define(['table', 'jquery', 'element'], function (exports) { } else { document.getElementById(ntflxNotifyWrap.id).appendChild(ntflxNotify); } - + if (newNotifySettings.useIcon) { // if useIcon, dynamically vertical align the contents var messageIcon = document.getElementById(ntflxNotify.id).querySelectorAll('.nmi')[0]; var messageIconH = 40; @@ -954,7 +948,7 @@ layui.define(['table', 'jquery', 'element'], function (exports) { } } // notify append or prepend off - + // remove by timeout or click on if (document.getElementById(ntflxNotify.id)) { // set elements on @@ -965,12 +959,12 @@ layui.define(['table', 'jquery', 'element'], function (exports) { removeOverlay = document.getElementById(notifyOverlay.id); } // set elements on - + // timeout vars on var timeoutHide; var timeoutRemove; // timeout vars off - + // hide notify elm and hide overlay on var hideNotifyElementsAndOverlay = function () { removeDiv.classList.add('remove'); @@ -980,7 +974,7 @@ layui.define(['table', 'jquery', 'element'], function (exports) { clearTimeout(timeoutHide); }; // hide notify elm and hide overlay off - + // remove notify elm and wrapper on var removeNotifyElmentsAndWrapper = function () { var notifyExist = document.getElementById(ntflxNotify.id); @@ -996,8 +990,8 @@ layui.define(['table', 'jquery', 'element'], function (exports) { clearTimeout(timeoutRemove); }; // remove notify elm and wrapper off - - // if close button and callback undefined on + + // if close button and callback undefined on if (newNotifySettings.closeButton && !callback) { var closeButtonElm = document.getElementById(ntflxNotify.id).querySelectorAll('span.notify-close-button')[0]; closeButtonElm.addEventListener('click', function () { @@ -1009,7 +1003,7 @@ layui.define(['table', 'jquery', 'element'], function (exports) { }); } // if close button and callback undefined off - + // if callback or click to close on if ((callback && typeof callback === 'function') || newNotifySettings.clickToClose) { removeDiv.addEventListener('click', function (e) { @@ -1024,7 +1018,7 @@ layui.define(['table', 'jquery', 'element'], function (exports) { }); } // if callback or click to close off - + // else auto remove on if (!newNotifySettings.closeButton && !callback) { timeoutHide = setTimeout(function () { @@ -1037,7 +1031,7 @@ layui.define(['table', 'jquery', 'element'], function (exports) { // else auto remove off } // remove by timeout or click off - + // notify - show only the last one on if (newNotifySettings.showOnlyTheLastOne && notiflixNotifyCount > 0) { var allNotifyElmNotTheLastOne = document.querySelectorAll('[id^=' + newNotifySettings.ID + '-]:not([id=' + newNotifySettings.ID + '-' + notiflixNotifyCount + '])'); @@ -1049,17 +1043,17 @@ layui.define(['table', 'jquery', 'element'], function (exports) { } } // notify - show only the last one off - + } else { notiflixConsoleError('Notiflix Error', 'Where is the arguments?'); } }; // Notiflix: Notify Single off - - + + // Notiflix: Report Single on var NotiflixReport = function (title, message, buttonText, buttonCallback, theType, staticType) { - + // check the arguments on if (!title) { title = 'Notiflix ' + staticType; } if (!message) { @@ -1079,7 +1073,7 @@ layui.define(['table', 'jquery', 'element'], function (exports) { if (!buttonText) { buttonText = 'Okay'; } if (!buttonCallback) { buttonCallback = undefined; } // check the arguments off - + // if plainText true = HTML tags not allowed on if (newReportSettings.plainText) { title = notiflixPlaintext(title); @@ -1087,7 +1081,7 @@ layui.define(['table', 'jquery', 'element'], function (exports) { buttonText = notiflixPlaintext(buttonText); } // if plainText true = HTML tags not allowed off - + // if plainText false but the contents length more than *MaxLength = HTML tags error on if (!newReportSettings.plainText) { if (title.length > newReportSettings.titleMaxLength) { @@ -1107,7 +1101,7 @@ layui.define(['table', 'jquery', 'element'], function (exports) { } } // if plainText false but the contents length more than *MaxLength = HTML tags error off - + // max length on if (title.length > newReportSettings.titleMaxLength) { title = title.substring(0, newReportSettings.titleMaxLength) + '...'; @@ -1119,13 +1113,13 @@ layui.define(['table', 'jquery', 'element'], function (exports) { buttonText = buttonText.substring(0, newReportSettings.buttonMaxLength) + '...'; } // max length off - + // if cssAnimaion false -> duration on if (!newReportSettings.cssAnimation) { newReportSettings.cssAnimationDuration = 0; } // if cssAnimaion false -> duration off - + // report wrap on var docBody = document.body; var ntflxReportWrap = document.createElement('div'); @@ -1135,21 +1129,21 @@ layui.define(['table', 'jquery', 'element'], function (exports) { ntflxReportWrap.style.zIndex = newReportSettings.zindex; ntflxReportWrap.style.borderRadius = newReportSettings.borderRadius; ntflxReportWrap.style.fontFamily = '"' + newReportSettings.fontFamily + '"' + ', sans-serif'; - + // rtl on if (newReportSettings.rtl) { ntflxReportWrap.setAttribute('dir', 'rtl'); ntflxReportWrap.classList.add('rtl-on'); } // rtl off - + // overlay on var reportOverlay = ''; if (newReportSettings.backOverlay) { reportOverlay = '
'; } // overlay off - + // svg icon on var svgIcon = ''; if (staticType === 'Success') { @@ -1162,25 +1156,25 @@ layui.define(['table', 'jquery', 'element'], function (exports) { svgIcon = notiflixReportSvgInfo(newReportSettings.svgSize, theType.svgColor); } // svg icon off - + ntflxReportWrap.innerHTML = reportOverlay + 'layui.use(['drawer'], function() { var drawer = layui.drawer; - + drawer.open({ direction: "right", dom: ".layer-top", @@ -80,7 +80,7 @@@@ -115,7 +115,7 @@var dom; - + $(".drawer-close-mask").click(function() { dom = drawer.open({ direction: "right", @@ -89,11 +89,11 @@ maskClose: false }); }) - + $("#btnClose").click(function() { dom.close(); }) - +layui.use(['drawer'], function() { var drawer = layui.drawer; - + $(".drawer-auto-close").click(function() { dom = drawer.open({ direction: "right", @@ -147,14 +147,14 @@layui.use(['drawer'], function() { var drawer = layui.drawer; - + $(".drawer-auto-close").click(function() { dom = drawer.open({ direction: "right", dom: ".layer-auto-close", distance: "30%", success:function(){ - layer.msg("触发回调函数"); + layer.msg("触发回调函数"); } }); }) @@ -170,9 +170,9 @@扩展@@ -344,7 +373,7 @@下 -@@ -274,7 +279,7 @@ content: "bottom内容", }) }) - + $("#layerDrawer").click(function () { var index = drawer.open({ legacy: false, @@ -294,7 +299,7 @@ }) $("#layerDrawerParent").click(function () { - + var index = parent.layui.drawer.open({ legacy: false, title: ['标题', 'font-size:16px;color:#2d8cf0'], @@ -321,6 +326,30 @@ distance: "50%", }); }) + + $("#layerDrawerIframe").click(function () { + drawer.open({ + legacy: false, + title: ['用户管理', 'font-size:16px;color:#2d8cf0'], + offset: 'r', + area: "80%", + maxmin: true, + closeBtn: 1, + iframe: window.location.origin + "/view/document/table.html" + }) + }) + + $("#layerDrawerURL").click(function () { + drawer.open({ + legacy: false, + title: ['用户管理', 'font-size:16px;color:#2d8cf0'], + offset: 'r', + area: "80%", + maxmin: true, + closeBtn: 1, + url: window.location.origin + "/view/document/drawerFragment.html" + }) + })iframe远程页面 + +指定容器内打开,需使用 layer 捕获层模式,并设置目标容器 style="overflow: hidden; position: relative;"++ 使用 url 参数指定抽屉代码片段地址,会使用 ajax 请求将代码片段拼接到抽屉中,和原来的页面在同一个页面上, 传值更方便。注意片段和原页面不能出现相同的 ID。 +
下侧弹层内容...
- +