/** * jQuery弹出层插件,简单精致,结构简单,样式简洁,接口丰富,满足轻量应用 * email: tianshaojie@msn.com * date: 2013-01-15 * version: 1.0.0 */ (function($) { var $doc = $(document), $win = $(window), ie = /msie/.test(navigator.userAgent.toLowerCase()), ie6 = ('undefined' == typeof(document.body.style.maxHeight)), max = Math.max, min = Math.min, purebox = function(options) { return purebox.list[options.id] ? purebox.list[options.id] : new purebox.fn._init(options); }; purebox.fn = purebox.prototype = { constructor : purebox, _init : function(options) { var opts = $.extend({}, purebox.defaults, options || {}), template = ['
', opts.head ? ('
' + (opts.xBtn ? '\u2715' : '') + ''+opts.title+'
') : '', '
', opts.foot ? ('
'+(opts.cBtn ? '' + opts.ok_title + '' : '') + (opts.cl_cBtn ? '' + opts.cl_title + '' : '') + '
') : '', '
'].join(''), $pb = $(template), $head = $pb.find('.pb-hd'), $foot = $pb.find('.pb-ft'), that = this; that.$pb = $pb, that.$head = $head; that.$foot = $foot; that.$xBtn = $head.find('.pb-x'); that.$cont = $pb.find('.pb-ct'); that.$cBtn = $foot.find('.pb-cl'); that.$oBtn = $foot.find('.pb-ok'); that.$pb.appendTo(document.body); that.opts = opts; that.offsetHeight = $head.outerHeight()+$foot.outerHeight(); that._bindEvent(); that._setPbZindex(); that.resize(opts.width, opts.height); that.setContent(opts.content); opts.drag && that._setDrag(); opts.mask && that._setMask(); opts.resize && that.$pb.resizable({ handles: "e, s, se", onResize:function() { that.$cont.height(that.$pb.innerHeight() - that.offsetHeight); }, onStopResize:function() { that.$cont.height(that.$pb.innerHeight() - that.offsetHeight); } }); !opts.fixed && that.$pb.css('position','absolute'); that.setPos(opts.top, opts.left); purebox.list[opts.id] = that; that._focus(); return that; }, //定义全局变量window.zindex,每次Z值加一 _zindex : function() { window.pb_zindex = window.pb_zindex || 100000; return ++window.pb_zindex; }, //设置弹出层Z轴坐标 _setPbZindex : function() { var that = this; return that.$pb.css('z-index', that._zindex()); }, //设置遮罩层Z轴坐标 _setMaskZindex : function() { var that = this; return $('#pb-mask').css('z-index', that._zindex()).show(); }, //设置遮罩,遮罩的Z轴比最上面弹出层小,比已打开的弹出层大 _setMask : function() { var that = this; if($('#pb-mask').length) { that._setMaskZindex(); that._setPbZindex(); } else { var css = 'position:fixed;width:100%;height:100%;top:0;left:0;filter: progid:DXImageTransform.Microsoft.Alpha(opacity=40);opacity:0.4;overflow:hidden;background-color:#fff;_position:absolute;left:expression(documentElement.scrollLeft+documentElement.clientWidth-this.offsetWidth);top:expression(documentElement.scrollTop+documentElement.clientHeight-this.offsetHeight);', iframe = ie6 ? '' : ''; $('
' + iframe + '
').css('z-index', that._zindex()).appendTo(document.body); that._setPbZindex(); } }, //设置弹出层是否可以拖拽 _setDrag : function() { return new purebox.dragable(this.$pb, this.$head); }, //绑定触发事件 _bindEvent : function(opts) { var that = this, opts = that.opts; that.$xBtn.length && that.$xBtn.click(function() { $.isFunction(opts.onClose) && opts.onClose(); that.dispose(); }); that.$cBtn.length && that.$cBtn.click(function() { $.isFunction(opts.onCancel) && opts.onCancel(); that.dispose(); }); that.$oBtn.length && that.$oBtn.click(function() { $.isFunction(opts.onOk) && opts.onOk(); that.dispose(); }); //窗口调整大小事件 var resizeTimer; $win.resize(function() { resizeTimer && clearTimeout(resizeTimer); resizeTimer = setTimeout(function () { that.setPos(opts.top, opts.left); }, 40); }); }, _focus : function() { var focus = purebox.focus; this.prev = focus; purebox.focus = this; }, //设置尺寸 resize : function(width, height) { var that = this; that.$pb.css('width', max.call(Math,150,width) + 'px'); that.$cont.css('height', max.call(Math,50,height) + 'px'); return that; }, //设置位置 setPos : function(top, left) { var that = this, dl = that.opts.fixed ? 0 : $doc.scrollLeft(), dt = that.opts.fixed ? 0 : $doc.scrollTop(); if(top === 'c') { top = $win.height() - that.$pb.outerHeight(); top = top > 0 ? dt + (top>>1)-(top>>3) : 0; } if(left === 'c') { left = $win.width() - that.$pb.outerWidth(); left = left > 0 ? dl + (left>>1) : 0; } that.$pb.css({top:top,left:left}); return that; }, center : function() { return this.setPos('c', 'c'); }, //设置弹出要显示的内容,支持html和jQuery对象,暂不支持URL和Image setContent : function(c) { var that = this; if(typeof(c) === 'string') { that.$cont.html(c); } else if(c instanceof jQuery) { var display = c.css('display'), prev = c.prev(), next = c.next(), parent = c.parent(); that._elemBack = function () { if (prev.length) { prev.after(c); } else if (next.length) { next.before(c); } else if (parent.length) { parent.append(c); }; c.css('display',display); that._elemBack = null; }; that.$cont.append(c); } return that; }, //关闭按钮对应的操作 dispose : function() { var that = this; that._elemBack && that._elemBack(); that.$pb.remove(); delete purebox.list[that.opts.id]; purebox.focus = purebox.focus.prev; if(purebox.focus) { if(purebox.focus.opts.mask) { that._setMaskZindex(); } else { $('#pb-mask').hide(); } $('.pb').last().css('z-index', that._zindex()); } else { $('#pb-mask').remove(); } } }; purebox.fn._init.prototype = purebox.fn; purebox.defaults = { id : 'pb', //弹出层ID title : '\u6807\u9898', //弹出层标题,默认“标题” content : '', //弹出层内容,支持html和jQuery对象,暂不支持URL和Image width : 'auto', //弹出层宽度 height : 'auto', //弹出层高度 left : 'c', //X轴坐标,center默认居中显示 top : 'c', //Y轴坐标,center默认居中显示 fixed : true, //是否静止定位 drag : true, //是否拖拽 mask : true, //是否锁屏 resize : false, //是否可以调节尺寸,需要引入jquery.resizable.js head : true, //是否显示标题栏 foot : true, //是否显示按钮栏 xBtn : true, //是否显示关闭按钮 cBtn : true, //是否显示取消按钮 cl_cBtn : true, onClose : null, //关闭回调事件 onOk : null, //确定回调事件 onCancel: null //取消回调事件 }; purebox.focus = null; purebox.list = {}; //拖拽 purebox.dragable = function() { return this.initialize.apply(this, arguments); }; purebox.dragable.prototype = { //拖放对象 initialize: function($drag, $handle) { this._drag = $drag;//拖放对象 this._handle = $handle || this._drag; //事件代理 this.move = $.proxy(this.onMove,this); this.stop = $.proxy(this.onStop,this); this._handle.bind("mousedown", $.proxy(this.onStart,this)); }, //准备拖动 onStart: function(event) { //记录鼠标相对拖放对象的位置 this._x = event.clientX - parseInt(this._drag.css('left'), 10); this._y = event.clientY - parseInt(this._drag.css('top'), 10); $doc.bind('mousemove',this.move).bind('mouseup', this.stop); if(ie){ //焦点丢失 this._handle.bind("losecapture", this.stop); //设置鼠标捕获 this._handle.get(0).setCapture(); }else{ //焦点丢失 $doc.bind("blur", this.stop); //阻止默认动作 event.preventDefault(); }; }, //拖动 onMove: function(event) { //清除选择 window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty(); //设置移动参数、范围限制,动态的使用$win.width()和$drag.outerWidth()是为了避免窗口大小和弹出层大小改变是对拖动位置的影响 var iLeft = event.clientX - this._x, iTop = event.clientY - this._y, fixed = this._drag.css('position') === 'fixed', dl = fixed ? 0 : $doc.scrollLeft(), dt = fixed ? 0 : $doc.scrollTop(), maxLeft = dl + $win.width() - this._drag.outerWidth(), maxTop = dt + $win.height() - this._drag.outerHeight(); iLeft = max(min(iLeft, maxLeft), dl); iTop = max(min(iTop, maxTop), dt); this._drag.css({top:iTop, left:iLeft}); }, //停止拖动 onStop: function() { //移除事件 $doc.unbind("mousemove", this.move); $doc.unbind("mouseup", this.stop); if(ie){ this.unbind("losecapture", this.stop); this._handle.get(0).releaseCapture(); }else{ $doc.unbind("blur", this.stop); }; } }; //扩展到jQuery工具集 window.pb = $.pb = $.purebox = purebox; //扩展到jQuery包装集 $.fn.pb = $.fn.purebox = function (options) { return this.bind('click', function() { $.pb(options); }); }; //扩展alert $.pb.alert = function(content, callback) { return $.pb({ id : 'pb-alert', title : '\u63d0\u793a', content : wrapCont(content), width : 300, height : 70, onOk : callback, cBtn : false, resize : false }); }; //扩展confirm $.pb.confirm = function(content, ok, cancel) { return $.pb({ id : 'pb-confirm', title : '\u786e\u8ba4', content : wrapCont(content), width : 300, height : 70, onOk : ok, onCancel : cancel, resize : false }); }; //居中显示文字Alert,Confirm function wrapCont(cont) { return '
' + cont + '
'; } })(window.jQuery);