Eova Dialog详解 | 易学教程

【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>>

Eova中已封装好一套对话框，可在自定义按钮时直接调用来打开新的对话框
新的对话框属于一个新的页面，页面上具有默认的回调事件

// 确认按钮回调
var btnSaveCallback = function($dialog, ID, $$) {
   submitForm($$, ID, $form, action, msg);
};

这里解析一下默认dialog

var index = layer.open({
				type : 2,//0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）
				id : id,
				title : name,
				content : url,
				maxmin : true,
				resize : true,
				area : [defWidth + 'px', defHeight + 'px'],
				btnAlign : 'c',
				shade : 0.3,
				zIndex : layer.zIndex,
				success : function(layero, index) {
					// layer.setTop(layero);// 窗口置顶
					bindKey(layero, index, ID);
					// 设置焦点
					var $win = layero.find('iframe').get(0).contentWindow;
					$win.focus();

					// 获取弹窗元素 var body = layer.getChildFrame('body', index);
					if (!height) {
						$.dialogAuto(index);
						// 强制修正 添加DOM 到 body 出现滚动条
						var $win = $(layero).find('iframe');
						$(layero).height($(layero).height() + 0.5);
						$win.height($win.height() + 0.5);
					}
				},
				btn : [ '确定', '取消' ],// , '自定义'
				btn1 : function(index, layero) {
					$.countDown(".layui-layer-btn0", 1000, function() {
						layero.find('iframe')[0].contentWindow.btnSaveCallback(layero, ID, parent.$);
					});
				},
				btn2 : function(index, layero) {
					return true;
				}
			// ,
			// btn3: function (index, layero) {
			// alert('自定义业务逻辑');
			// return false;// 不关闭
			// }
			});

其就是封装layui框架的弹出事件，里面定义了两个按钮——保存和关闭，在保存按钮中调用了btnSaveCallback（）方法，和整体结构形成闭环
如要自定义新的dialog,可在此基础上进一步扩展，添加或者减少按钮，定义新的函数调用

来源：oschina

链接：https://my.oschina.net/u/3630262/blog/3145127

标签

dialog