easydialog.js源码
easydialog.js
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
/** * easyDialog v2.2 * Url : http://stylechen.com/easydialog-v2.0.html * Author : chenmnkken@gmail.com * Date : 2012-04-22 */ (function( win, undefined ){ var doc = win.document, docElem = doc.documentElement; var easyDialog = function(){ var body = doc.body, isIE = !-[1,], // 判断IE6/7/8 不能判断IE9 isIE6 = isIE && /msie 6/.test( navigator.userAgent.toLowerCase() ), // 判断IE6 uuid = 1, expando = 'cache' + ( +new Date() + "" ).slice( -8 ), // 生成随机数 cacheData = { /** * 1 : { * eclick : [ handler1, handler2, handler3 ]; * clickHandler : function(){ //... }; * } */ }; var Dialog = function(){}; Dialog.prototype = { // 参数设置 getOptions : function( arg ){ var i, options = {}, // 默认参数 defaults = { container: null, // string / object 弹处层内容的id或内容模板 overlay: true, // boolean 是否添加遮罩层 drag: true, // boolean 是否绑定拖拽事件 fixed: true, // boolean 是否静止定位 follow: null, // string / object 是否跟随自定义元素来定位 followX: 0, // number 相对于自定义元素的X坐标的偏移 followY: 0, // number 相对于自定义元素的Y坐标的偏移 autoClose: 0, // number 自动关闭弹出层的时间 lock: false, // boolean 是否允许ESC键来关闭弹出层 callback: null // function 关闭弹出层后执行的回调函数 /** * container为object时的参数格式 * container : { * header : '弹出层标题', * content : '弹出层内容', * yesFn : function(){}, // 确定按钮的回调函数 * noFn : function(){} / true, // 取消按钮的回调函数 * yesText : '确定', // 确定按钮的文本,默认为‘确定’ * noText : '取消' // 取消按钮的文本,默认为‘取消’ * } */ }; for( i in defaults ){ options[i] = arg[i] !== undefined ? arg[i] : defaults[i]; } Dialog.data( 'options', options ); return options; }, // 防止IE6模拟fixed时出现抖动 setBodyBg : function(){ if( body.currentStyle.backgroundAttachment !== 'fixed' ){ body.style.backgroundImage = 'url(about:blank)'; body.style.backgroundAttachment = 'fixed'; } }, // 防止IE6的select穿透 appendIframe : function(elem){ elem.innerHTML = '<iframe style="position:absolute;left:0;top:0;width:100%;height:100%;z-index:-1;border:0 none;filter:alpha(opacity=0)"></iframe>'; }, /** * 设置元素跟随定位 * @param { Object } 跟随的DOM元素 * @param { String / Object } 被跟随的DOM元素 * @param { Number } 相对于被跟随元素的X轴的偏移 * @param { Number } 相对于被跟随元素的Y轴的偏移 */ setFollow : function( elem, follow, x, y ){ follow = typeof follow === 'string' ? doc.getElementById( follow ) : follow; var style = elem.style; style.position = 'absolute'; style.left = Dialog.getOffset( follow, 'left') + x + 'px'; style.top = Dialog.getOffset( follow, 'top' ) + y + 'px'; }, /** * 设置元素固定(fixed) / 绝对(absolute)定位 * @param { Object } DOM元素 * @param { Boolean } true : fixed, fasle : absolute */ setPosition : function( elem, fixed ){ var style = elem.style; style.position = isIE6 ? 'absolute' : fixed ? 'fixed' : 'absolute'; if( fixed ){ if( isIE6 ){ style.setExpression( 'top','fuckIE6=document.documentElement.scrollTop+document.documentElement.clientHeight/2+"px"' ); } else{ style.top = '50%'; } style.left = '50%'; } else{ if( isIE6 ){ style.removeExpression( 'top' ); } style.top = docElem.clientHeight/2 + Dialog.getScroll( 'top' ) + 'px'; style.left = docElem.clientWidth/2 + Dialog.getScroll( 'left' ) + 'px'; } }, /** * 创建遮罩层 * @return { Object } 遮罩层 */ createOverlay : function(){ var overlay = doc.createElement('div'), style = overlay.style; style.cssText = 'margin:0;padding:0;border:none;width:100%;height:100%;background:#333;opacity:0.6;filter:alpha(opacity=60);z-index:9999;position:fixed;top:0;left:0;'; // IE6模拟fixed if(isIE6){ body.style.height = '100%'; style.position = 'absolute'; style.setExpression('top','fuckIE6=document.documentElement.scrollTop+"px"'); } overlay.id = 'overlay'; return overlay; }, /** * 创建弹出层 * @return { Object } 弹出层 */ createDialogBox : function(){ var dialogBox = doc.createElement('div'); dialogBox.style.cssText = 'margin:0;padding:0;border:none;z-index:10000;'; dialogBox.id = 'easyDialogBox'; return dialogBox; }, /** * 创建默认的弹出层内容模板 * @param { Object } 模板参数 * @return { Object } 弹出层内容模板 */ createDialogWrap : function( tmpl ){ // 弹出层标题 var header = tmpl.header ? '<h4 class="easyDialog_title" id="easyDialogTitle"><a href="javascript:void(0)" title="关闭窗口" class="close_btn" id="closeBtn">×</a>' + tmpl.header + '</h4>' : '', // 确定按钮 yesBtn = typeof tmpl.yesFn === 'function' ? '<button class="btn_highlight" id="easyDialogYesBtn">' + ( typeof tmpl.yesText === 'string' ? tmpl.yesText : '确定' ) + '</button>' : '', // 取消按钮 noBtn = typeof tmpl.noFn === 'function' || tmpl.noFn === true ? '<button class="btn_normal" id="easyDialogNoBtn">' + ( typeof tmpl.noText === 'string' ? tmpl.noText : '取消' ) + '</button>' : '', // footer footer = yesBtn === '' && noBtn === '' ? '' : '<div class="easyDialog_footer">' + noBtn + yesBtn + '</div>', dialogTmpl = [ '<div class="easyDialog_content">', header, '<div class="easyDialog_text">' + tmpl.content + '</div>', footer, '</div>' ].join(''), dialogWrap = doc.getElementById( 'easyDialogWrapper' ), rScript = /<[\/]*script[\s\S]*?>/ig; if( !dialogWrap ){ dialogWrap = doc.createElement( 'div' ); dialogWrap.id = 'easyDialogWrapper'; dialogWrap.className = 'easyDialog_wrapper'; } dialogWrap.innerHTML = dialogTmpl.replace( rScript, '' ); return dialogWrap; } }; /** * 设置并返回缓存的数据 关于缓存系统详见:http://stylechen.com/cachedata.html * @param { String / Object } 任意字符串或DOM元素 * @param { String } 缓存属性名 * @param { Anything } 缓存属性值 * @return { Object } */ Dialog.data = function( elem, val, data ){ if( typeof elem === 'string' ){ if( val !== undefined ){ cacheData[elem] = val; } return cacheData[elem]; } else if( typeof elem === 'object' ){ // 如果是window、document将不添加自定义属性 // window的索引是0 document索引为1 var index = elem === win ? 0 : elem.nodeType === 9 ? 1 : elem[expando] ? elem[expando] : (elem[expando] = ++uuid), thisCache = cacheData[index] ? cacheData[index] : ( cacheData[index] = {} ); if( data !== undefined ){ // 将数据存入缓存中 thisCache[val] = data; } // 返回DOM元素存储的数据 return thisCache[val]; } }; /** * 删除缓存 * @param { String / Object } 任意字符串或DOM元素 * @param { String } 要删除的缓存属性名 */ Dialog.removeData = function( elem, val ){ if( typeof elem === 'string' ){ delete cacheData[elem]; } else if( typeof elem === 'object' ){ var index = elem === win ? 0 : elem.nodeType === 9 ? 1 : elem[expando]; if( index === undefined ) return; // 检测对象是否为空 var isEmptyObject = function( obj ) { var name; for ( name in obj ) { return false; } return true; }, // 删除DOM元素所有的缓存数据 delteProp = function(){ delete cacheData[index]; if( index <= 1 ) return; try{ // IE8及标准浏览器可以直接使用delete来删除属性 delete elem[expando]; } catch ( e ) { // IE6/IE7使用removeAttribute方法来删除属性(document会报错) elem.removeAttribute( expando ); } }; if( val ){ // 只删除指定的数据 delete cacheData[index][val]; if( isEmptyObject( cacheData[index] ) ){ delteProp(); } } else{ delteProp(); } } }; // 事件处理系统 Dialog.event = { bind : function( elem, type, handler ){ var events = Dialog.data( elem, 'e' + type ) || Dialog.data( elem, 'e' + type, [] ); // 将事件函数添加到缓存中 events.push( handler ); // 同一事件类型只注册一次事件,防止重复注册 if( events.length === 1 ){ var eventHandler = this.eventHandler( elem ); Dialog.data( elem, type + 'Handler', eventHandler ); if( elem.addEventListener ){ elem.addEventListener( type, eventHandler, false ); } else if( elem.attachEvent ){ elem.attachEvent( 'on' + type, eventHandler ); } } }, unbind : function( elem, type, handler ){ var events = Dialog.data( elem, 'e' + type ); if( !events ) return; // 如果没有传入要删除的事件处理函数则删除该事件类型的缓存 if( !handler ){ events = undefined; } // 如果有具体的事件处理函数则只删除一个 else{ for( var i = events.length - 1, fn = events[i]; i >= 0; i-- ){ if( fn === handler ){ events.splice( i, 1 ); } } } // 删除事件和缓存 if( !events || !events.length ){ var eventHandler = Dialog.data( elem, type + 'Handler' ); if( elem.addEventListener ){ elem.removeEventListener( type, eventHandler, false ); } else if( elem.attachEvent ){ elem.detachEvent( 'on' + type, eventHandler ); } Dialog.removeData( elem, type + 'Handler' ); Dialog.removeData( elem, 'e' + type ); } }, // 依次执行事件绑定的函数 eventHandler : function( elem ){ return function( event ){ event = Dialog.event.fixEvent( event || win.event ); var type = event.type, events = Dialog.data( elem, 'e' + type ); for( var i = 0, handler; handler = events[i++]; ){ if( handler.call(elem, event) === false ){ event.preventDefault(); event.stopPropagation(); } } } }, // 修复IE浏览器支持常见的标准事件的API fixEvent : function( e ){ // 支持DOM 2级标准事件的浏览器无需做修复 if ( e.target ) return e; var event = {}, name; event.target = e.srcElement || document; event.preventDefault = function(){ e.returnValue = false; }; event.stopPropagation = function(){ e.cancelBubble = true; }; // IE6/7/8在原生的window.event中直接写入自定义属性 // 会导致内存泄漏,所以采用复制的方式 for( name in e ){ event[name] = e[name]; } return event; } }; /** * 首字母大写转换 * @param { String } 要转换的字符串 * @return { String } 转换后的字符串 top => Top */ Dialog.capitalize = function( str ){ var firstStr = str.charAt(0); return firstStr.toUpperCase() + str.replace( firstStr, '' ); }; /** * 获取滚动条的位置 * @param { String } 'top' & 'left' * @return { Number } */ Dialog.getScroll = function( type ){ var upType = this.capitalize( type ); return docElem['scroll' + upType] || body['scroll' + upType]; }; /** * 获取元素在页面中的位置 * @param { Object } DOM元素 * @param { String } 'top' & 'left' * @return { Number } */ Dialog.getOffset = function( elem, type ){ var upType = this.capitalize( type ), client = docElem['client' + upType] || body['client' + upType] || 0, scroll = this.getScroll( type ), box = elem.getBoundingClientRect(); return Math.round( box[type] ) + scroll - client; }; /** * 拖拽效果 * @param { Object } 触发拖拽的DOM元素 * @param { Object } 要进行拖拽的DOM元素 */ Dialog.drag = function( target, moveElem ){ // 清除文本选择 var clearSelect = 'getSelection' in win ? function(){ win.getSelection().removeAllRanges(); } : function(){ try{ doc.selection.empty(); } catch( e ){}; }, self = this, event = self.event, isDown = false, newElem = isIE ? target : doc, fixed = moveElem.style.position === 'fixed', _fixed = Dialog.data( 'options' ).fixed; // mousedown var down = function( e ){ isDown = true; var scrollTop = self.getScroll( 'top' ), scrollLeft = self.getScroll( 'left' ), edgeLeft = fixed ? 0 : scrollLeft, edgeTop = fixed ? 0 : scrollTop; Dialog.data( 'dragData', { x : e.clientX - self.getOffset( moveElem, 'left' ) + ( fixed ? scrollLeft : 0 ), y : e.clientY - self.getOffset( moveElem, 'top' ) + ( fixed ? scrollTop : 0 ), // 设置上下左右4个临界点的位置 // 固定定位的临界点 = 当前屏的宽、高(下、右要减去元素本身的宽度或高度) // 绝对定位的临界点 = 当前屏的宽、高 + 滚动条卷起部分(下、右要减去元素本身的宽度或高度) el : edgeLeft, // 左临界点 et : edgeTop, // 上临界点 er : edgeLeft + docElem.clientWidth - moveElem.offsetWidth, // 右临界点 eb : edgeTop + docElem.clientHeight - moveElem.offsetHeight // 下临界点 }); if( isIE ){ // IE6如果是模拟fixed在mousedown的时候先删除模拟,节省性能 if( isIE6 && _fixed ){ moveElem.style.removeExpression( 'top' ); } target.setCapture(); } event.bind( newElem, 'mousemove', move ); event.bind( newElem, 'mouseup', up ); if( isIE ){ event.bind( target, 'losecapture', up ); } e.stopPropagation(); e.preventDefault(); }; event.bind( target, 'mousedown', down ); // mousemove var move = function( e ){ if( !isDown ) return; clearSelect(); var dragData = Dialog.data( 'dragData' ), left = e.clientX - dragData.x, top = e.clientY - dragData.y, et = dragData.et, er = dragData.er, eb = dragData.eb, el = dragData.el, style = moveElem.style; // 设置上下左右的临界点以防止元素溢出当前屏 style.marginLeft = style.marginTop = '0px'; style.left = ( left <= el ? el : (left >= er ? er : left) ) + 'px'; style.top = ( top <= et ? et : (top >= eb ? eb : top) ) + 'px'; e.stopPropagation(); }; // mouseup var up = function( e ){ isDown = false; if( isIE ){ event.unbind( target, 'losecapture', arguments.callee ); } event.unbind( newElem, 'mousemove', move ); event.unbind( newElem, 'mouseup', arguments.callee ); if( isIE ){ target.releaseCapture(); // IE6如果是模拟fixed在mouseup的时候要重新设置模拟 if( isIE6 && _fixed ){ var top = parseInt( moveElem.style.top ) - self.getScroll( 'top' ); moveElem.style.setExpression('top',"fuckIE6=document.documentElement.scrollTop+" + top + '+"px"'); } } e.stopPropagation(); }; }; var timer, // 定时器 // ESC键关闭弹出层 escClose = function( e ){ if( e.keyCode === 27 ){ extend.close(); } }, // 清除定时器 clearTimer = function(){ if( timer ){ clearTimeout( timer ); timer = undefined; } }; var extend = { open : function(){ var $ = new Dialog(), options = $.getOptions( arguments[0] || {} ), // 获取参数 event = Dialog.event, docWidth = docElem.clientWidth, docHeight = docElem.clientHeight, self = this, overlay, dialogBox, dialogWrap, boxChild; clearTimer(); // ------------------------------------------------------ // ---------------------插入遮罩层----------------------- // ------------------------------------------------------ // 如果页面中已经缓存遮罩层,直接显示 if( options.overlay ){ overlay = doc.getElementById( 'overlay' ); if( !overlay ){ overlay = $.createOverlay(); body.appendChild( overlay ); if( isIE6 ){ $.appendIframe( overlay ); } } overlay.style.display = 'block'; } if(isIE6){ $.setBodyBg(); } // ------------------------------------------------------ // ---------------------插入弹出层----------------------- // ------------------------------------------------------ // 如果页面中已经缓存弹出层,直接显示 dialogBox = doc.getElementById( 'easyDialogBox' ); if( !dialogBox ){ dialogBox = $.createDialogBox(); body.appendChild( dialogBox ); } if( options.follow ){ var follow = function(){ $.setFollow( dialogBox, options.follow, options.followX, options.followY ); }; follow(); event.bind( win, 'resize', follow ); Dialog.data( 'follow', follow ); if( overlay ){ overlay.style.display = 'none'; } options.fixed = false; } else{ $.setPosition( dialogBox, options.fixed ); } dialogBox.style.display = 'block'; // ------------------------------------------------------ // -------------------插入弹出层内容--------------------- // ------------------------------------------------------ // 判断弹出层内容是否已经缓存过 dialogWrap = typeof options.container === 'string' ? doc.getElementById( options.container ) : $.createDialogWrap( options.container ); boxChild = dialogBox.getElementsByTagName('*')[0]; if( !boxChild ){ dialogBox.appendChild( dialogWrap ); } else if( boxChild && dialogWrap !== boxChild ){ boxChild.style.display = 'none'; body.appendChild( boxChild ); dialogBox.appendChild( dialogWrap ); } dialogWrap.style.display = 'block'; var eWidth = dialogWrap.offsetWidth, eHeight = dialogWrap.offsetHeight, widthOverflow = eWidth > docWidth, heigthOverflow = eHeight > docHeight; // 强制去掉自定义弹出层内容的margin dialogWrap.style.marginTop = dialogWrap.style.marginRight = dialogWrap.style.marginBottom = dialogWrap.style.marginLeft = '0px'; // 居中定位 if( !options.follow ){ dialogBox.style.marginLeft = '-' + (widthOverflow ? docWidth/2 : eWidth/2) + 'px'; dialogBox.style.marginTop = '-' + (heigthOverflow ? docHeight/2 : eHeight/2) + 'px'; } else{ dialogBox.style.marginLeft = dialogBox.style.marginTop = '0px'; } // 防止select穿透固定宽度和高度 if( isIE6 && !options.overlay ){ dialogBox.style.width = eWidth + 'px'; dialogBox.style.height = eHeight + 'px'; } // ------------------------------------------------------ // --------------------绑定相关事件---------------------- // ------------------------------------------------------ var closeBtn = doc.getElementById( 'closeBtn' ), dialogTitle = doc.getElementById( 'easyDialogTitle' ), dialogYesBtn = doc.getElementById('easyDialogYesBtn'), dialogNoBtn = doc.getElementById('easyDialogNoBtn'); // 绑定确定按钮的回调函数 if( dialogYesBtn ){ event.bind( dialogYesBtn, 'click', function( event ){ if( options.container.yesFn.call(self, event) !== false ){ self.close(); } }); } // 绑定取消按钮的回调函数 if( dialogNoBtn ){ var noCallback = function( event ){ if( options.container.noFn === true || options.container.noFn.call(self, event) !== false ){ self.close(); } }; event.bind( dialogNoBtn, 'click', noCallback ); // 如果取消按钮有回调函数 关闭按钮也绑定同样的回调函数 if( closeBtn ){ event.bind( closeBtn, 'click', noCallback ); } } // 关闭按钮绑定事件 else if( closeBtn ){ event.bind( closeBtn, 'click', self.close ); } // ESC键关闭弹出层 if( !options.lock ){ event.bind( doc, 'keyup', escClose ); } // 自动关闭弹出层 if( options.autoClose && typeof options.autoClose === 'number' ){ timer = setTimeout( self.close, options.autoClose ); } // 绑定拖拽(如果弹出层内容的宽度或高度溢出将不绑定拖拽) if( options.drag && dialogTitle && !widthOverflow && !heigthOverflow ){ dialogTitle.style.cursor = 'move'; Dialog.drag( dialogTitle, dialogBox ); } // 确保弹出层绝对定位时放大缩小窗口也可以垂直居中显示 if( !options.follow && !options.fixed ){ var resize = function(){ $.setPosition( dialogBox, false ); }; // 如果弹出层内容的宽度或高度溢出将不绑定resize事件 if( !widthOverflow && !heigthOverflow ){ event.bind( win, 'resize', resize ); } Dialog.data( 'resize', resize ); } // 缓存相关元素以便关闭弹出层的时候进行操作 Dialog.data( 'dialogElements', { overlay : overlay, dialogBox : dialogBox, closeBtn : closeBtn, dialogTitle : dialogTitle, dialogYesBtn : dialogYesBtn, dialogNoBtn : dialogNoBtn }); }, close : function(){ var options = Dialog.data( 'options' ), elements = Dialog.data( 'dialogElements' ), event = Dialog.event; clearTimer(); // 隐藏遮罩层 if( options.overlay && elements.overlay ){ elements.overlay.style.display = 'none'; } // 隐藏弹出层 elements.dialogBox.style.display = 'none'; // IE6清除CSS表达式 if( isIE6 ){ elements.dialogBox.style.removeExpression( 'top' ); } // ------------------------------------------------------ // --------------------删除相关事件---------------------- // ------------------------------------------------------ if( elements.closeBtn ){ event.unbind( elements.closeBtn, 'click' ); } if( elements.dialogTitle ){ event.unbind( elements.dialogTitle, 'mousedown' ); } if( elements.dialogYesBtn ){ event.unbind( elements.dialogYesBtn, 'click' ); } if( elements.dialogNoBtn ){ event.unbind( elements.dialogNoBtn, 'click' ); } if( !options.follow && !options.fixed ){ event.unbind( win, 'resize', Dialog.data('resize') ); Dialog.removeData( 'resize' ); } if( options.follow ){ event.unbind( win, 'resize', Dialog.data('follow') ); Dialog.removeData( 'follow' ); } if( !options.lock ){ event.unbind( doc, 'keyup', escClose ); } // 执行callback if(typeof options.callback === 'function'){ options.callback.call( extend ); } // 清除缓存 Dialog.removeData( 'options' ); Dialog.removeData( 'dialogElements' ); } }; return extend; }; // ------------------------------------------------------ // ---------------------DOM加载模块---------------------- // ------------------------------------------------------ var loaded = function(){ win.easyDialog = easyDialog(); }, doScrollCheck = function(){ if ( doc.body ) return; try { docElem.doScroll("left"); } catch(e) { setTimeout( doScrollCheck, 1 ); return; } loaded(); }; (function(){ if( doc.body ){ loaded(); } else{ if( doc.addEventListener ){ doc.addEventListener( 'DOMContentLoaded', function(){ doc.removeEventListener( 'DOMContentLoaded', arguments.callee, false ); loaded(); }, false ); win.addEventListener( 'load', loaded, false ); } else if( doc.attachEvent ){ doc.attachEvent( 'onreadystatechange', function(){ if( doc.readyState === 'complete' ){ doc.detachEvent( 'onreadystatechange', arguments.callee ); loaded(); } }); win.attachEvent( 'onload', loaded ); var toplevel = false; try { toplevel = win.frameElement == null; } catch(e) {} if ( docElem.doScroll && toplevel ) { doScrollCheck(); } } } })(); })( window, undefined ); // 2012-04-12 修复跟随定位缩放浏览器时无法继续跟随的BUG // 2012-04-22 修复弹出层内容的尺寸大于浏览器当前屏尺寸的BUG