一、自定义alert弹框知识点总结
-
利用requireJS实现模块化管理；
-
组合使用构造函数和原型模式实现弹框对象的创建；
- 巧妙利用命名空间实现换肤功能；
-
依赖jquery实现DOM操作；
-
依赖$.extend()方法实现对象的扩展，即实现默认参数和用户传入参数；
-
依赖jqueryUI实现弹框的拖动；
-
自定义事件的实现原理。
二、HTML代码(index.html)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>自定义alert弹框</title> <link rel="stylesheet" href="style/window_alertBox.css"/> <script data-main="js/main.js" src="http://apps.bdimg.com/libs/require.js/2.1.11/require.min.js"></script> </head> <body> <button id="btn">弹框</button> </body> </html>
三、入口文件代码(main.js)
// 配置路径及别名
require.config({ baseUrl:'js', paths:{ jquery : 'jquery-1.9.1', jqueryUI : 'https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min' } })
// 初始化window弹框 require(['jquery','window'],function($,w){ $('#btn').on('click',function(){ var win = new w.Window(); win.alert({ title : '提示', content : '换肤功能实现喽', btnText : '确定按钮', width : 500, height : 300, skinClassName : 'window_skin_a', hasMask : true, dragHandel : '.window_header', handlerSureBtn : function(){ alert('我是点击确定按钮后的回调...'); }, hasCloseBtn : true, handlerCloseBtn : function(){ alert('我是点击关闭按钮后的回调...'); } }); win.on('alert',function(){ alert('点击确定按钮事件01') }); win.on('alert',function(){ alert('点击确定按钮事件02') }); win.on('close',function(){ alert('点击关闭按钮事件01') }); win.on('close',function(){ alert('点击关闭按钮事件02') }); }) })
四、弹框模块实现(window.js)
define(['jquery','jqueryUI'],function($,$UI){
var Window = function(){ this.config = { title : '系统消息', // 弹框的标题文字 content : '内容', // 弹框的内容问题 btnText : '确定', // 弹框的按钮文字 width : 800, // 弹框的宽度 height : 500, // 弹框的高度 handlerSureBtn : null, // 弹框的按钮触发的事件 hasCloseBtn : false, // 弹框中是否显示关闭按钮 handlerCloseBtn : null, // 弹框关闭按钮触发的事件 skinClassName : null, // 弹框换肤 hasMask : true, // 弹框遮罩 isDraggable : true, // 弹框是否可拖动 dragHandel : null // 弹框中拖动的'把手'：'.window_title' }; this.handlers = {}; // 弹框中的自定义事件集合 };
Window.prototype = {
// 自定义事件 on : function(type, handler){ if( typeof this.handlers[type] == "undefined" ){ this.handlers[type] = []; } this.handlers[type].push(handler); }, fire : function(type, data){ if( this.handlers[type] instanceof Array ){ var handlers = this.handlers[type]; for( var i = 0; i < handlers.length; i++ ){ handlers[i](data); } } }, // 弹框事件 alert : function(cfg){
var that = this; var config = $.extend(this.config, cfg); // 弹框盒子 var boundingBox = $('<div class="window_boundingBox">' + '<div class="window_header">' + config.title + '</div>' + '<div class="window_body">' + config.content + '</div>' + '<div class="window_footer">' + '<input type="button" id="btn_sure" value=' + config.btnText + '>' + '</div>' + '</div>'); boundingBox.appendTo('body'); // 定制皮肤 if(config.skinClassName){ boundingBox.addClass(config.skinClassName); } //模态弹窗 if(config.hasMask){ var mask = $('<div class="window_mask"></div>'); mask.appendTo('body'); } //拖动属性 if(config.isDraggable){ if(config.dragHandel){ boundingBox.draggable({handle:config.dragHandel}); }else{ boundingBox.draggable(); } } // 设置宽、高、坐标 boundingBox.css({ config.width, height: config.height, left: (config.x || (window.innerWidth - config.width)/2) + 'px', top: (config.y || (window.innerHeight - config.height)/2) + 'px' }) // 关闭按钮 if(config.hasCloseBtn){ var closeBtn = $('<div class="closeBtn">X</div>'); boundingBox.append(closeBtn); $('.closeBtn').on('click',function(){ // config.handlerCloseBtn && handlerCloseBtn(); that.fire('close'); boundingBox.remove(); mask && mask.remove(); }) } // 确定按钮点击事件 $('#btn_sure').on('click',function(){ // config.handlerSureBtn && config.handlerSureBtn(); that.fire('alert'); boundingBox.remove(); mask && mask.remove(); }) // 为关闭按钮添加'close'事件 if( config.handlerCloseBtn ){ this.on('close',config.handlerCloseBtn); } // 为确定按钮添加'alert'事件 if( config.handlerSureBtn ){ this.on('alert',config.handlerSureBtn); } } }
return { Window : Window }
})
五、CSS样式(window_alertBox.css)
*{ margin: 0; padding: 0; } html,body{ width: 100%; height: 100%; } body{ font: 14/1.5 normal 'Microsoft YaHei'; background-color: #fff; } /*默认样式*/ .window_boundingBox{ background-color: #fff; width: 600px; height: 360px; border: 1px solid #4d99cb; border-radius: 10px; box-shadow: 0 0 5px rgba(0,0,0,0.3); position: fixed; overflow: hidden; z-index: 2; } .window_header{ color: #fff; width: 100%; background-color: #4d99cb; height: 36px; line-height: 36px; text-align: center; } .window_body{ padding: 10px; } .window_footer{ background-color: #dcdcdc; width: 100%; height: 36px; line-height: 36px; text-align: center; position: absolute; bottom: 0; } .closeBtn{ border-radius: 50%; cursor: pointer; width: 20px; height: 20px; padding: 2px; text-align: center; line-height: 20px; background-color: #fff; color: #333; position: absolute; right: 6px; top: 6px; color: #4d99cb; } .window_mask{ background-color: #000; opacity: 0.3; width: 100%; height: 100%; position: fixed; left: 0; top:0; z-index: 1; } /*定制皮肤*/ .window_skin_a.window_boundingBox{ border: 1px solid red; } .window_skin_a .window_header{ background-color:red; } .window_skin_a .closeBtn{ color: red; }