/**
* 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 ? ('
') : '',
'
'].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);