测试页面需要引用jquery的js文件 插件文件jquery.Jwin.js
jquery.Jwin插件的使用参数都有详细说明，代码如下：
(function ($) { var imgdir = 'images/';//图片文件夹路径 var autoHide=false;//悬浮div是否自动隐藏 var hideType='hide';//隐藏的方式 可选参数 hide、slide、fade var hideDelay=0;//悬浮div隐藏过程使用的时间 var hideTime=0;//悬浮div延迟隐藏时间 var zIndex=100;//多个div时获取焦点的div处于顶层 var showType='show';//悬浮div显示方式 可选参数 hide、slide、fade var showTime=0;//悬浮div显示过程使用的时间 var showDelay=0;//悬浮div延迟显示的时间 //以下两个变量用于保证div被拖动后隐藏 再次打开后出现的位置仍然为首次出现的位置 var oldTop='';//保存div初次出现的top var oldLeft='';//保存div初次出现的left $.fn.extend({ Jwin:function(option){ var op=$.extend({ id:'',//悬浮div的id （必须） title: '',//标题 message:'',//显示信息 elementId:'',//显示元素的id url: '',//显示的页面地址 width: 400,//悬浮div的宽度 height: 300,//悬浮div的高度 clickClose:false,//点击div之外的地方关闭div //悬浮div显示参数 showType:'show',//悬浮div显示方式 可选参数 hide、slide、fade showTime:0,//悬浮div显示过程使用的时间 showDelay:0,//悬浮div延迟显示的时间 //悬浮div隐藏参数 autoHide:false,//悬浮div是否自动隐藏 hideType:'hide',//隐藏的方式 可选参数 hide、slide、fade hideTime:0,//悬浮div隐藏过程使用的时间 hideDelay:0,//悬浮div自动隐藏延迟时间 },option); if(op.id==''){ alert("缺少WinId"); return; } autoHide = op.autoHide; hideType = op.hideType; hideDelay = op.hideDelay; hideTime = op.hideTime; showType = op.showType; showTime = op.showTime; showDelay = op.showDelay; zIndex = zIndex + 1; var winEle = $("#"+op.id); if(winEle.length == 0){ this.width = parseInt(op.width); this.height = parseInt(op.height); var banner=this.JwinCreatBanner(op.id,this.width,op.title); oldTop = this.height >= document.documentElement.clientHeight ? 0 : (document.documentElement.clientHeight-this.height)/2; oldLeft = this.width >= document.body.clientWidth ? 0 : (document.body.clientWidth-this.width)/2; //创建div元素 win=$('<div id="' + op.id + '"></div>'); win.css({'position':'absolute','top':oldTop,'left':oldLeft,'width':(this.width+2),'zIndex':(zIndex+1),'display':'none'}); win.html(banner); win.find("#close").bind('click',function(){$(this).JwinClose(op.id);}); win.find("#bannerMiddle").bind('mousedown',function(){$(this).JwinMove(op.id);}); //创建内容容器 var container=$('<div id="' + op.id + '_con"></div>'); container.css({'float':'left','width':+this.width,'height':this.height,'word-break':'break-all','overflow-x':'hidden','overflow-y':'auto','border':'1px solid #1972e1','background-color':'#FFF','clear':'both'}); if(op.message.length>0){ container.css('text-align','center'); container.append(op.message); } else if(op.url.length>0){ var iframe=$('<iframe frameborder="0"></iframe>'); iframe.css({'width':'100%','height':'100%','overflow':'visible','border':'0'}); iframe.attr('src',op.url); container.append(iframe); } else if(op.elementId.length>0){ var element=$("#"+op.elementId); if(element){ container.append(element); element.show(); } } win.append(container); $(document.body).append(win); this.JwinShow(win); //是否设点击页面隐藏div if(op.clickClose){ setTimeout(function(){win.focus();},0); win.bind('blur',function(){$(this).JclickHide(op.id)}); } //是否设置自动关闭 if(autoHide){ this.JwinHide(win); } } else{ winEle.css({'zIndex':(zIndex+1),'top':oldTop,'left':oldLeft}); this.JwinShow(winEle); if(op.clickClose){ setTimeout(function(){win.focus();},0); win.bind('blur',function(){$(this).JclickHide(op.id)}); } } }, //创建标题 JwinCreatBanner:function(winId,width,title){ var bannerImddleWidth = width-47;//拖动部分div宽度为总宽度减去两边圆角宽度、关闭按钮宽度 var banner = '<div style="folat:left;width:'+(width+2)+';clear:both;font-size:14px;font:Arial,Helvetica,sans-serif;color:#FFF;">'; banner += '<div style="width:14px;height:30px;line-height:30px;float:left;background:url('+imgdir+'windows_banner_left.gif) no-repeat;"></div>'; banner += '<div id="bannerMiddle" style="width:'+bannerImddleWidth+'px;height:30px;float:left;line-height:30px;cursor:move;float:left;text-align:left;background:url('+imgdir+'windows_banner.gif) repeat-x;" >'+title+'</div>'; banner += '<div style="width:21px;height:30px;line-height:30px;float:left;background:url('+imgdir+'windows_banner.gif) repeat-x;"><img style="border:0;margin-top:4px;" id="close" src="'+imgdir+'win_close_normal.gif" οnmοuseοver="this.src=\''+imgdir+'win_close_hover.gif\'" οnmοuseοut="this.src=\''+imgdir+'win_close_normal.gif\'" /></div>'; banner += '<div style="width:14px;height:30px;line-height:30px;float:left;background:url('+imgdir+'windows_banner_right.gif) no-repeat;"></div>'; banner += '</div>'; return banner; }, //拖动 JwinMove:function(winId){ var floatWin=document.getElementById(winId); zIndex=zIndex+1; floatWin.style.zIndex=zIndex; o=window.event.srcElement||window.event.target; var d=document; var a=window.event; var x=a.layerX?a.layerX:a.offsetX; var y=a.layerY?a.layerY:a.offsetY; if(o.setCapture){ o.setCapture(); } else if(window.captureEvents){ window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP); } d.onmousemove=function(a){ if(!a)a=window.event; if(!a.pageX)a.pageX=a.clientX; if(!a.pageY)a.pageY=a.clientY; var tx=a.pageX-x,ty=a.pageY-y; var maxx=document.documentElement.clientWidth-floatWin.clientWidth; var maxy=document.documentElement.clientHeight-floatWin.clientHeight; tx=(tx<0)?0:tx; ty=(ty<0)?0:ty; tx=(tx>maxx)?maxx:tx; ty=(ty>maxy)?maxy:ty; floatWin.style.left=tx; floatWin.style.top=ty; }; d.onmouseup=function(){ if(o.releaseCapture){ o.releaseCapture(); } else if(window.captureEvents){ window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP); } d.onmousemove=null; d.onmouseup=null; }; }, //显示 JwinShow:function(win){ var t = showDelay; switch(showType){ case 'slide': setTimeout(function(){win.slideDown(showTime);}, t); break; case 'fade': setTimeout(function(){win.fadeIn(showTime);},t); break; default: setTimeout(function(){win.show();},t); break; } }, //点击隐藏 JclickHide:function(winId){ $(document).bind('click',function(){ var flag=true; var ele=window.event.srcElement||event.target; $(ele).parents().each(function(){ if($(this).attr("id")==winId){ flag=false; } }); if(flag){ $(this).JwinClose(winId); } }) }, //隐藏 JwinHide:function(winId,atonce){ var win = $("#"+winId); var t = atonce ? 0 : hideDelay; switch(hideType){ case 'slide': setTimeout(function(){win.slideUp(hideTime);}, t); break; case 'fade': setTimeout(function(){win.fadeOut(hideTime);},t); break; default: setTimeout(function(){win.hide();},t); break; } win.unbind('blur'); $(document).unbind('click'); }, //关闭 JwinClose:function(winId){ this.JwinHide(winId,true); } }); })(jQuery)
页面调用：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <script language="javascript" src="js/jquery-1.4.2.min.js" type="text/javascript"></script> <script language="javascript" src="js/jquery.Jwin.js" type="text/javascript"></script> <script language="javascript" type="text/javascript"> $(document).ready(function(){ /*$("#btn").Jwin({id:'myid', width:'600px', title:'我的标题', message:'sdfsdfsd', //autoHide:true, //elementId:'d1', //url:'test.html' //hideType:'hide', hideTime:500, hideDelay:'2000' });*/ /*$('#btn1').Jwin({id:'myid1', width:'100px', title:'我的标题', message:'message', //autoHide:true, //elementId:'d1', //url:'test.html' hideType:'fade', hideTime:500, hideDelay:'2000', showType:'show', showTime:1000, showDelay:1000 });*/ //$(document).bind('click',function(){alert('ddd');}); }); function s(){ $(this).Jwin({id:'myid1', width:'300px', title:'我的标题', message:'message', //autoHide:true, //elementId:'d1', //url:'test.html' hideType:'hide', hideTime:500, hideDelay:'2000', clickClose:true //showType:'show', //showTime:1000, //showDelay:1000 }); //$(document.body).bind('click',function(){alert('ddd');}); } function s2(){ $(this).Jwin({id:'myid2', width:'600px', title:'我的标题2', //message:'message2', //autoHide:true, //elementId:'d1', //url:'test.html' //hideType:'hide', url:'test.html', hideTime:500, hideDelay:'2000'//, //clickClose:true }); } </script> </head> <body> <input type="button" id="btn1" value="show" onclick="s()" /> <input type="button" id="btn1" value="show" onclick="s2()" /> </body> </html>
2605
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
