工作常要用到wbox,今天刚好用到,看看源码,其实很简单.
(function($){
//class为.wBox_close为关闭
$.fn.wBox = function(options){
// 配置项
var defaults = {
wBoxURL: "css/wbox/",// 改变loading.gif图片路径
opacity: 0.5,//背景透明度
callBack: null,
noTitle: false,
show:false,
timeout:0,
target:null,
requestType:null,//iframe,ajax,img
title: "wBox Title",
drag:true,
iframeWH: {//iframe 设置高宽
width: 400,
height: 300
},
html: ''//wBox内容
},_this=this;
// 继承属性
this.YQ = $.extend(defaults, options);
// 定义弹出框的边框,标题栏,页面内容区
var wBoxHtml = '<div id="wBox"><div class="wBox_popup"><table><tbody><tr><td class="wBox_tl"/><td class="wBox_b"/><td class="wBox_tr"/></tr><tr><td class="wBox_b"><div style="width:10px;"> </div></td><td><div class="wBox_body">' + (_this.YQ.noTitle ? '' : '<table class="wBox_title"><tr><td class="wBox_dragTitle"><div class="wBox_itemTitle">' + _this.YQ.title + '</div></td><td width="20px" title="关闭"><div class="wBox_close"></div></td></tr></table> ') +
'<div class="wBox_content" id="wBoxContent"></div></div></td><td class="wBox_b"><div style="width:10px;"> </div></td></tr><tr><td class="wBox_bl"/><td class="wBox_b"/><td class="wBox_br"/></tr></tbody></table></div></div>', B = null, C = null, $win = $(window),$t=$(this);//B背景，C内容jquery div
// 注意remove与empty区别,emtpy只清除元素内容
this.showBox=function (){
$("#wBox_overlay").remove();
$("#wBox").remove();
// 背景覆盖层
B = $("<div id='wBox_overlay' class='wBox_hide'></div>").hide().addClass('wBox_overlayBG').css('opacity', _this.YQ.opacity).dblclick(function(){
_this.close();
}).appendTo('body').fadeIn(300);
// 弹出框
C = $(wBoxHtml).appendTo('body');
handleClick();
}
/*
* 处理点击
这里只支持三种类型iframe,ajax,img
* @param {string} what
*/
function handleClick(){
// 弹出框中页面内容区
var con = C.find("#wBoxContent");
if (_this.YQ.requestType && $.inArray(_this.YQ.requestType, ['iframe', 'ajax','img'])!=-1) {
con.html("<div class='wBox_load'><div id='wBox_loading'><img src='"+_this.YQ.wBoxURL+"loading.gif' /></div></div>");
if (_this.YQ.requestType === "img") {
var img = $("<img />");
img.attr("src",_this.YQ.target);
img.load(function(){
img.appendTo(con.empty());
setPosition();
});
}
else
if (_this.YQ.requestType === "ajax") {
$.get(_this.YQ.target, function(data){
con.html(data);
C.find('.wBox_close').click(_this.close);
setPosition();
})
}
else {
ifr = $("<iframe name='wBoxIframe' style='width:" + _this.YQ.iframeWH.width + "px;height:" + _this.YQ.iframeWH.height + "px;' scrolling='auto' frameborder='0' src='" + _this.YQ.target + "'></iframe>");
ifr.appendTo(con.empty());
ifr.load(function(){
try {
$it = $(this).contents();
$it.find('.wBox_close').click(_this.close);
fH = $it.height();//iframe height
fW = $it.width();
w = $win;
newW = Math.min(w.width() - 40, fW);
newH = w.height() - 25 - (_this.YQ.noTitle ? 0 : 30);
newH = Math.min(newH, fH);
if (!newH)
return;
var lt = calPosition(newW);
C.css({
left: lt[0],
top: lt[1]
});
$(this).css({
height: newH,
width: newW
});
}
catch (e) {
}
});
}
}
else
if (_this.YQ.target) {
$(_this.YQ.target).clone(true).show().appendTo(con.empty());
}
else
if (_this.YQ.html) {
con.html(_this.YQ.html);
}
else {
$t.clone(true).show().appendTo(con.empty());
}
afterHandleClick();
}
/*
* 处理点击之后的处理
*/
function afterHandleClick(){
setPosition();
C.show().find('.wBox_close').click(_this.close).hover(function(){
$(this).addClass("on");
}, function(){
$(this).removeClass("on");
});
$(document).unbind('keydown.wBox').bind('keydown.wBox', function(e){
// esc
if (e.keyCode === 27)
_this.close();
return true
});
typeof _this.YQ.callBack === 'function' ? _this.YQ.callBack() : null;
!_this.YQ.noTitle&&_this.YQ.drag?drag():null;
if(_this.YQ.timeout){
setTimeout(_this.close,_this.YQ.timeout);
}
}
/*
* 设置wBox的位置
*/
function setPosition(){
if (!C) {
return false;
}
var width = C.width(), lt = calPosition(width);
C.css({
left: lt[0],
top: lt[1]
});
var $h = $("body").height(), $wh = $win.height(),$hh=$("html").height();
$h = Math.max($h, $wh);
B.height($h).width($win.width())
}
/*
* 计算wBox的位置
* @param {number} w 宽度
*/
function calPosition(w){
l = ($win.width() - w) / 2;
t = $win.scrollTop() + $win.height() /9;
return [l, t];
}
/*
* 拖拽函数drag
*/
function drag(){
var dx, dy, moveout;
var T = C.find('.wBox_dragTitle').css('cursor', 'move');
T.bind("selectstart", function(){
return false;
});
T.mousedown(function(e){
dx = e.clientX - parseInt(C.css("left"));
dy = e.clientY - parseInt(C.css("top"));
C.mousemove(move).mouseout(out).css('opacity', 0.8);
T.mouseup(up);
});
/*
* 移动改变生活
* @param {Object} e 事件
*/
function move(e){
moveout = false;
if (e.clientX - dx < 0) {
l = 0;
}
else
if (e.clientX - dx > $win.width() - C.width()) {
l = $win.width() - C.width();
}
else {
l = e.clientX - dx
}
C.css({
left: l,
top: e.clientY - dy
});
}
/*
* 你已经out啦！
* @param {Object} e 事件
*/
function out(e){
moveout = true;
setTimeout(function(){
moveout && up(e);
}, 10);
}
/*
* 放弃
* @param {Object} e事件
*/
function up(e){
C.unbind("mousemove", move).unbind("mouseout", out).css('opacity', 1);
T.unbind("mouseup", up);
}
}
/*
* 关闭弹出框就是移除还原
*/
this.close=function (){
if (C) {
B.remove();
C.stop().fadeOut(300, function(){
C.remove();
})
}
}
/*
* 触发click事件
*/
$win.resize(function(){
setPosition();
});
_this.YQ.show?_this.showBox():$t.click(function(){
_this.showBox();
return false;
});
return this;
};
})(jQuery);
看看DIV的布局
<!-- 最外层框,被setPosition()设置left: 129px; top: 57px; display: block; opacity: 1; -->
<div id="wBox">
`<!-- 设置相对position: relative; -->
<div class="wBox_popup">
<table>
<tbody>
<tr>
<!-- 上左边角width,height,overflow,background-image -->
<td class="wBox_tl" />
<!-- 中间 -->
<td class="wBox_b" />
<!-- 上右 -->
<td class="wBox_tr" />
</tr>
<tr>
<!-- 左边框 -->
<td class="wBox_b">
<div style="width: 10px;"> </div>
</td>
<!-- 所载入的页面内容 -->
<td>
<div class="wBox_body">
' + (_this.YQ.noTitle ? '' : '
<table class="wBox_title"><!-- 标题栏 -->
<tr>
<td class="wBox_dragTitle">
<div class="wBox_itemTitle">' + _this.YQ.title + '</div>
</td>
<td width="20px" title="关闭">
<div class="wBox_close"></div>
</td>
</tr>
</table>
') + '
<div class="wBox_content" id="wBoxContent"></div><!-- 内容区,head和body内容 -->
</div>
</td>
<!-- 右边框 -->
<td class="wBox_b">
<div style="width: 10px;"> </div>
</td>
</tr>
<tr>
<!-- 下边框 -->
<td class="wBox_bl" />
<td class="wBox_b" />
<td class="wBox_br" />
</tr>
</tbody>
</table>
</div>
</div>关于wbox关闭:
1.使用ajax方式
可直接使用父页面的对象,如wbox.close();
2.使用iframe方式
使用parent.wbox.close();
版权声明：本文为weistar103原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。