自己封装js组件 - 中级

Posted 2020-08-25 三胖子

书接上文，上次弄了个基本版本的alert组件（其实就是十分钟前）但是很多功能都没有实现 没有关闭按钮 没有下面确定按钮 没有模态框 没有这那的 这次终极篇就都给它完善好弄个中级版本也是基本可用版本！

 

define([‘jquery‘],function($){
function Window(){
this.cfg = {
width:400,
height:200,
content:‘我是默认文本内容‘,
handle:null,
title:‘系统消息‘,
skinClassName:null,
hasCloseBtn:false,
hasMask:false
}
}
Window.prototype = {
alert:function(cfg){
var CFG = $.extend(this.cfg,cfg);
//var boundingBox = $(‘<div class="window_boundingBox"></div>‘);
var boundingBox = $(‘<div class="window_boundingBox">‘+
‘<div class="window_header">‘+CFG.title+‘</div>‘+
‘<div class="window_body">‘+CFG.content+‘</div>‘+
‘<div class="window_footer"><input type="button" value="确定"></div>‘+
‘</div>‘);

boundingBox.appendTo(‘body‘)

var btn = $(‘.window_footer input‘);

if(CFG.hasMask){

mask = $(‘<div class="window_mask"></div>‘);
mask.appendTo(‘body‘);

}
btn.appendTo(boundingBox);
btn.click(function(){
CFG.handle && CFG.handle();
boundingBox.remove();
mask && mask.remove();
})

boundingBox.css({
width:this.cfg.width + ‘px‘,
height:this.cfg.height + ‘px‘,
left:(CFG.x || (window.innerWidth - CFG.width)/2)+‘px‘,
top:(CFG.y || (window.innerHeight - CFG.height)/2)+‘px‘,
})

//右上角关闭按钮
if(CFG.hasCloseBtn){
var closeBtn = $(‘<span class="window_closeBtn">X</span>‘);
closeBtn.appendTo(boundingBox);
closeBtn.click(function(){
boundingBox.remove();
mask && mask.remove();
})
}

//定制样式
if(CFG.skinClassName){
boundingBox.addClass(CFG.skinClassName);
}
}
}
return {
Window:Window
}
})

 

main.js调用

require([‘jquery‘,‘window‘],function($,w){
new w.Window().alert({
width:500,
height:300,
content:‘新年快乐‘,
title:‘我是正确标题‘,
hasCloseBtn:true,
hasMask:true
})
})

 

靠！靠！靠！直接上代码  对就是这么简单暴力！