编写jquery弹出框插件

弹出框插件在web开发中经常用到，下面我就讲解一个box弹出框的制作

弹出框插件的制作几个步骤

1.配置弹出框信息

2.执行默认是否弹出信息

3.启动之前设置插件位置

4.显示弹出框窗口

5.在弹出框窗口绑定事件

6.绑定拖拽事件

7.绑定关闭事件

下面我就用代码来编写这个7个步骤的实现,从而来建立一个弹出框。

1.配置弹出框信息

//弹出框基本配置信息和样式
var default={

boxUrl:"box/",    //弹出窗口链接地址
opacity:0.5,      //背景透明度
callBack:null,    //是否有回调命令
noTitle:false,    //是否有标题
show:false,       //默认是否显示
timeout:0         //弹出框消失时间
target:null,      //目标
requestType:null, //设置弹出框请求类型
title:"Title",    //设置标题名词
drag:true,        //是否可以拖拽
ifreameWH:{       //ifream设置高度和宽度
width:400,
height:300
},
html:''          //弹出框内容

}

//传递参数和默认参数合并
this.options = $.extend({},defaults, options);
//弹出对话框颜色
var  boxHtml =
'<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.options.noTitle ? '' : '<table class="wBox_title">                <tr><td class="wBox_dragTitle">                <div class="wBox_itemTitle">' + _this.options.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>',
//背景
background = null,
//内容
content   = null,
$win = $(window),
$_this=this;
$this=$(this);

2.执行默认是否弹出信息

//是否默认弹出
$win.resize(function{
setPosition();
})
_this.options.show?_this.showBox():$t.click(function(){

_this.showBox();
return false;
});
return this;

3.启动之前设置插件位置

//设置弹出框的位置
function setPosition()
{
//如果弹出窗口没有内容就可以不设置高度
if(!content){
return false;
}

//得到当前DOM节点的高度
var width=content.width(),
//调整未知
lt=calPosition(width);
content.css({
left:lt[0];
top:lt[1]
});
//得到body的高度
var $bheight=$("body").height();
//得到window窗口的高度
var $wheight=$win.height();
//得到html页面的高度
$hheight=$("html").height();

//得到最大的高度
$h=Math.max($hheith,$wheight);
//设置背景的高度和宽度
background.height($h).width($win.width());
}

//计算弹出框位置
function calPosition(w)
{
l=($win.width()-w)/2;
t=$win.scrollTop()+$win.height()/9;
return [l,t];
}

4.显示弹出框窗口

this.showBox=function()
{
//移掉wBox_overlay的DOM节点
$("#wBox_ovrlay").remove();
//移掉WBox的DOM节点
$("#wBox").remove();

//将背景先隐藏掉然后添加css并且设置透明度最后加载多body下面
//最后出现
backgroud=$("<div id='wBox_overlay'  class='wBox_hide'></div>")
.hide()
.addClass('wBox_overlayBG')
.css(
'opacity',_this.options.opacity
)
.dblclick(function(){
_this.close();
})
.appendTo('body')
.fadeIn(300);
//将内容加入到body里面
//注意appendTo的顺序 不能先加载内容再加载背景
content=$(wBoxHtml).appendTo('body');
//绑定点击事件
handleClick();
}

5.在弹出框窗口绑定事件

/**
* 处理点击
* @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){
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);
}

}

6.绑定拖拽事件

/*
* 拖拽函数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);
}
}

7.绑定关闭事件

/*
* 关闭弹出框就是移除还原
*/
this.close=function (){
if (C) {
B.remove();
C.stop().fadeOut(300, function(){
C.remove();
})
}
}