编写jquery弹出框插件

1、编写jquery弹出框插件弹出框插件在web开发中经常用到，下面我就讲解一个box弹出框的制作弹出框插件的制作几个步骤1.配置弹出框信息2.执行默认是否弹出信息3.启动之前设置插件位置4.显示弹出框窗口5.在弹出框窗口绑定事件6.绑定拖拽事件7.绑定关闭事件下面我就用代码来编写这个7个步骤的实现,从而来建立一个弹出框。1.配置弹出框信息/弹出框基本配置信息和样式var default= boxUrl:"box/", /弹出窗口链接地址 opacity:0.5, /背景透明度 callBack:null, /是否有回调命令 noTitle:false, /是否有标题 show

2、: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

3、="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:1

4、0px;">&nbsp;</div> </td><td> <div class="wBox_body">' + <tr><td class="wBox_dragTitle"> </td><td width="20px" title="关闭"> <div class="wBox_close"></div></td></tr>

5、</table> ') + '<div class="wBox_content" id="wBoxContent"></div></div> </td><td class="wBox_b"><div style="width:10px;">&nbsp;</div> </td></tr><tr><td class="wBox_bl"/&g

6、t;<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(functionfunction() _this.showBox()

7、;return false;);return this;3.启动之前设置插件位置/设置弹出框的位置function setPosition() /如果弹出窗口没有内容就可以不设置高度 if(!content) return false; /得到当前DOM节点的高度 var width=content.width(), /调整未知 lt=calPosition(width); content.css( left:lt0; top:lt1 ); /得到body的高度 var $bheight=$("body").height(); /得到window窗口的高度 var $whe

8、ight=$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() /

9、移掉wBox_overlay的DOM节点 $("#wBox_ovrlay").remove(); /移掉WBox的DOM节点 $("#wBox").remove(); /将背景先隐藏掉然后添加css并且设置透明度最后加载多body下面 /最后出现function() _this.close(); ) .appendTo('body') .fadeIn(300); /将内容加入到body里面 /注意appendTo的顺序 不能先加载内容再加载背景 content=$(wBoxHtml).appendTo('body'); /

10、绑定点击事件 handleClick();5.在弹出框窗口绑定事件 /* * 处理点击 * param string what */function handleClick() var con = C.find("#wBoxContent"); ififvarfunction() img.appendTo(con.empty(); setPosition(); ); else iffunction(data) con.html(data); C.find('.wBox_close').click(_this.close); setPosition(); )

11、elsefunction() try $it = $(this).contents(); $it.find('.wBox_close').click(_this.close); fH = $it.height();/iframe heightif (!newH) return; var lt = calPosition(newW); C.css( left: lt0, top: lt1 ); $(this).css( height: newH, width: newW ); catch (e) ); else iftrue).show().appendTo(con.empty(

12、); else ifelse $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"); );

13、$(document).unbind('keydown.wBox').bind('keydown.wBox', function(e) if (e.keyCode = 27) _this.close(); return true ); typeofnullnull; if6.绑定拖拽事件/* * 拖拽函数drag */function drag() var dx, dy, moveout; var T = C.find('.wBox_dragTitle').css('cursor', 'move'); T.bind

14、("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 事件 */ functio

15、n 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(