代码改变世界

写一个jquery弹出层插件gbox,简单多功能...

2011-11-13 14:00  飞魚  阅读(1179)  评论(2编辑  收藏  举报

由于在公司经常写一些弹出层功能,且需求不同需要找不同插件...有时需要改动也有很多不便...

所以自己写了一个弹出层插件,更多的是自己操作...

插件代码如下,不足或更通用写法还望指教...

View Code
; (function($) {
$.fn.gbox = function(options) {
var _options = this.options = {
'fixed': true, //是否相对视窗定位
'fleft': 0,
'ftop': 0,
'fright': 0,
'fbottom': 0,
'lay': true, //是否有遮罩层
'center': true,
'box': null,
'closeBox': null,
'backgroundColor': '#000',
'opacity': 50,
'zIndex': 1000,
'isIE6': $.browser.msie && $.browser.version == '6.0',
'onShow': $.noop,
'onClose': $.noop
};
$.extend(_options, options || {});

if (_options.lay) {
var _lay = this.lay = $('<div></div>').css({
'display': 'none',
'position': _options.fixed ? 'fixed' : 'absolute',
'left': 0, 'top': 0,
'width': '100%', 'height': '100%',
'zIndex': _options.zIndex,
'background-color': _options.backgroundColor,
'opacity': _options.opacity / 100,
'filter': 'alpha(opacity=' + _options.opacity + ')'
});
$('body').append(_lay);
}

this.css({
'zIndex': _options.zIndex + 1,
'position': _options.fixed ? 'fixed' : 'absolute',
'display': 'none'
});

//兼容ie6的处理 因为ie6不支持fixed全部变回absolute
var that = this;
if (_options.isIE6) {
that.css({ 'position': 'absolute' });
if (_lay) {
_lay.css({
'position': 'absolute',
'width': $(document).width(),
'height': $(document).height()
});
}
that._fixed = function() {
if (_options.center) setCenter();
else setFixed();
}

that._resize = function() {
if (_options.center) setCenter();
else setFixed();
}
}

//显示弹出层
$(_options.box).click(function() {
that.show();
_lay && _lay.show();
if (_options.fixed) {
if (_options.center) {
setCenter();
} else {
if (_options.fright) {
that.css({ 'right': _options.fright, 'bottom': _options.fbottom });
}
else {
that.css({ 'left': _options.fleft, 'top': _options.ftop });
}
}
if (_options.isIE6) {
$('select').css('visibility', 'hidden');
$(window).resize(that._resize).scroll(that._fixed);
}

} else {
var p = $(this).offset(),
w = p.left + $(this).width(),
h = p.top + $(this).height();
that.css({ 'left': w, 'top': h });
}
_options.onShow();
});

//关闭弹出层
$(_options.closeBox).click(function() {
that.hide();
_lay && _lay.hide();
if (_options.fixed) {
if (_options.isIE6) {
$('select').css('visibility', 'visible');
$(window).remove('resize scroll')
}
}
_options.onClose();
});

function setCenter() {
that.css({
'top': '50%', 'left': '50%',
'marginTop': $(document).scrollTop() - that.height() / 2 + "px",
'marginLeft': $(document).scrollLeft() - that.width() / 2 + "px"
});
}

function setFixed() {
if (_options.fright) {
that.css({
'right': _options.fright + $(document).scrollLeft(),
'bottom': _options.fbottom + $(document).scrollTop()
});
} else {
that.css({
'left': _options.fleft + $(document).scrollLeft(),
'top': _options.ftop + $(document).scrollTop()
});
}
}

return this
}

})(jQuery);

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>

<script src="jquery-1.4.4.js" type="text/javascript"></script>

<script type="text/javascript" src="gbox.js"></script>

<script>
$(function() {
$("#sd").gbox({
'box': '#ygm',
'closeBox': '#clo'
});
});
</script>

</head>
<body style="height: 1000px;">
<div id="sd" style="height: 200px; width: 300px; border: 5px solid #000; background-color: #fff">
<div id="clo" style="background-color: Gray; height: 30px; line-height: 30px">
title</div>
<div>
content
</div>
</div>
<input id="ygm" value="text" type="button" />
</body>
</html>

如上调用即可...

参数说明

'fixed': true, //是否相对视窗定位
'fleft': 0,  //非居中定位时的上下左右值
'ftop': 0,
'fright': 0,
'fbottom': 0,
'lay': true, //是否有遮罩层
'center': true,//是否居中
'box': null,//触发弹出层元素
'closeBox': null,//关闭弹出曾元素
'backgroundColor': '#000',
'opacity': 50,
'zIndex': 1000,
'isIE6': $.browser.msie && $.browser.version == '6.0',
'onShow': $.noop,//显示时执行函数
'onClose': $.noop//关闭时执行函数

以上均为默认值...实际操作自己传参覆盖即可...具体能干什么 自己挖掘,扩展..