//创建一个提示框类
let Alert = function (data) {
//没有数据则返回,让后面的程序执行
if(!data)
return;
//设置内容
this.content = data.content;
//创建提示框面板
this.panel = document.createElement('div');
//创建提示内容模块
this.content_panel = document.createElement('div');
//创建确定按钮组件
this.confirmBtn =document.createElement('span');
//创建提示内容组件
this.contentNode = document.createElement('p');
//创建关闭按钮
this.closeBtn = document.createElement('span');
// 为提示面板添加类
this.panel.className = 'alert';
//为提示内容添加提示类
this.content_panel.className = "content";
//为确定按钮添加类
this.confirmBtn.className = "a_confirm";
//为关闭按钮添加类
this.closeBtn.className = "c_close";
//为确认按钮添加文案
this.confirmBtn.innerHTML = data.confirm||'确认';
this.closeBtn.innerHTML = data.close||'取消';
//为提示框添加文本
this.contentNode.innerHTML = this.content;
//
this.success = data.success||function () {
};
this.fail = data.fail || function () {
};
//创建提示框的原型方法
}
Alert.prototype = {
init:function () {
//初始化方法
this.panel.appendChild(this.content_panel);
this.content_panel.appendChild(this.contentNode);
this.content_panel.appendChild(this.closeBtn);
this.content_panel.appendChild(this.confirmBtn);
//将dom语句插入页面中
document.body.appendChild(this.panel);
//绑定事件
this.bindEvent();
//显示提示框
this.show();
},
bindEvent:function () {
let me = this;
this.closeBtn.onclick = function () {
//执行关闭取消方法
me.fail();
//隐藏弹框
me.hide();
}
this.confirmBtn.onclick = function () {
me.success();
me.hide();
}
},
hide:function () {
this.panel.style.display = 'none';
},
show:function () {
this.panel.style.display = 'block';
}
};
let RightAlert = function (data){
Alert.call(this,data);
this.confirmBtn.className = this.confirmBtn.className+" right";
}
RightAlert.prototype = new Alert();
js 面向对象设计模式--模板模式
最新推荐文章于 2022-09-22 19:57:25 发布