编写jquery弹出框插件.docxVIP

HYPERLINK /justneedwater/archive/2010/12/30/.html 编写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 trtd class=wBox_tl/ td class=wBox_b/ td class=wBox_tr/ /tr tr td class=wBox_b div style=width:10px;nbsp;/div /tdtd div class=wBox_body + (_this.options.noTitle ? : table class=wBox_title trtd class=wBox_dragTitle div class=wBox_itemTitle + _this.options.title + /div /tdtd width=20px title=关闭 div class=wBox_close/div/td/tr/table ) + div class=wBox_content id=wBoxContent/div/div /tdtd class=wBox_bdiv style=width:10px;nbsp;/div /td/trtrtd 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