jquery.Jwin.js jquery_jquery를 기반으로 하는 팝업 레이어 플러그인 코드-JS 튜토리얼-php.cn

jquery.Jwin.js jquery_jquery를 기반으로 하는 팝업 레이어 플러그인 코드

WBOY

풀어 주다： 2016-05-16 17:53:37

원래의

1126명이 탐색했습니다.

코드는 다음과 같습니다.

코드 복사 코드는 다음과 같습니다

(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的高度
//悬浮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;

win=$('

');
win.css({'position':'absolute','top':oldTop,'left':oldLeft,'width':(this.width+2),'zIndex':zIndex,'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=$('

');
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.append(op.message);
}
else if(op.url.length>0){
var 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);

//是否设置自动关闭
if(autoHide){
this.JwinHide(op.id);
}
}
else{
winEle.css({'zIndex':(winEle.css('zIndex')+2),'top':oldTop,'left':oldLeft});
this.JwinShow(winEle);
}
},

//创建标题
JwinCreatBanner:function(winId,width,title){
var bannerImddleWidth = width-47;//拖动部分div宽度为总宽度减去两边圆角宽度、关闭按钮宽度
var banner = '

';
banner += '

'+title+'

';
banner += '

';
banner = '

< /div>';
배너 = '

';
반품 배너;
},

//拖动
JwinMove:function(winId){
var floatWin=document.getElementById(winId);
zIndex=zIndex 1;
floatWin.style.zIndex=zIndex;
o=window.event.srcElement||window.event.target;
var d=문서;
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);
휴식;
케이스 '페이드':
setTimeout(function(){win.fadeIn(showTime);},t);
휴식;
기본값:
setTimeout(function(){win.show();},t);
휴식;
}
},

//隐藏
JwinHide:function(winId,atonce){
var win = $("#" winId);
var t = atonce ? 0 : 숨기기지연;
switch(hideType){
case 'slide':
setTimeout(function(){win.slideUp(hideTime);}, t);
휴식;
케이스 '페이드':
setTimeout(function(){win.fadeOut(hideTime);},t);
휴식;
기본값:
setTimeout(function(){win.hide();},t);
휴식;
}
},

//关闭
JwinClose:function(winId){
this.JwinHide(winId,true);
}
});
})(jQuery)