一、自定義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({ width: 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; }