jquery.Jwin.js 基于jquery的彈出層插件代碼
更新時間:2012年05月23日 15:48:23 作者:
測試頁面需要引用jquery的js文件 插件文件jquery.Jwin.js
jquery.Jwin插件的使用參數(shù)都有詳細(xì)說明
代碼如下:
(function ($) {
var imgdir = 'images/';//圖片文件夾路徑
var autoHide=false;//懸浮div是否自動隱藏
var hideType='hide';//隱藏的方式 可選參數(shù) hide、slide、fade
var hideDelay=0;//懸浮div隱藏過程使用的時間
var hideTime=0;//懸浮div延遲隱藏時間
var zIndex=100;//多個div時獲取焦點(diǎn)的div處于頂層
var showType='show';//懸浮div顯示方式 可選參數(shù) hide、slide、fade
var showTime=0;//懸浮div顯示過程使用的時間
var showDelay=0;//懸浮div延遲顯示的時間
//以下兩個變量用于保證div被拖動后隱藏 再次打開后出現(xiàn)的位置仍然為首次出現(xiàn)的位置
var oldTop='';//保存div初次出現(xiàn)的top
var oldLeft='';//保存div初次出現(xiàn)的left
$.fn.extend({
Jwin:function(option){
var op=$.extend({
id:'',//懸浮div的id (必須)
title: '',//標(biāo)題
message:'',//顯示信息
elementId:'',//顯示元素的id
url: '',//顯示的頁面地址
width: 400,//懸浮div的寬度
height: 300,//懸浮div的高度
//懸浮div顯示參數(shù)
showType:'show',//懸浮div顯示方式 可選參數(shù) hide、slide、fade
showTime:0,//懸浮div顯示過程使用的時間
showDelay:0,//懸浮div延遲顯示的時間
//懸浮div隱藏參數(shù)
autoHide:false,//懸浮div是否自動隱藏
hideType:'hide',//隱藏的方式 可選參數(shù) 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=$('<div id="' + op.id + '"></div>');
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=$('<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.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);
//是否設(shè)置自動關(guān)閉
if(autoHide){
this.JwinHide(op.id);
}
}
else{
winEle.css({'zIndex':(winEle.css('zIndex')+2),'top':oldTop,'left':oldLeft});
this.JwinShow(winEle);
}
},
//創(chuàng)建標(biāo)題
JwinCreatBanner:function(winId,width,title){
var bannerImddleWidth = width-47;//拖動部分div寬度為總寬度減去兩邊圓角寬度、關(guān)閉按鈕寬度
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" onmouseover="this.src=\''+imgdir+'win_close_hover.gif\'" onmouseout="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;
}
},
//隱藏
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;
}
},
//關(guān)閉
JwinClose:function(winId){
this.JwinHide(winId,true);
}
});
})(jQuery)
復(fù)制代碼 代碼如下:
(function ($) {
var imgdir = 'images/';//圖片文件夾路徑
var autoHide=false;//懸浮div是否自動隱藏
var hideType='hide';//隱藏的方式 可選參數(shù) hide、slide、fade
var hideDelay=0;//懸浮div隱藏過程使用的時間
var hideTime=0;//懸浮div延遲隱藏時間
var zIndex=100;//多個div時獲取焦點(diǎn)的div處于頂層
var showType='show';//懸浮div顯示方式 可選參數(shù) hide、slide、fade
var showTime=0;//懸浮div顯示過程使用的時間
var showDelay=0;//懸浮div延遲顯示的時間
//以下兩個變量用于保證div被拖動后隱藏 再次打開后出現(xiàn)的位置仍然為首次出現(xiàn)的位置
var oldTop='';//保存div初次出現(xiàn)的top
var oldLeft='';//保存div初次出現(xiàn)的left
$.fn.extend({
Jwin:function(option){
var op=$.extend({
id:'',//懸浮div的id (必須)
title: '',//標(biāo)題
message:'',//顯示信息
elementId:'',//顯示元素的id
url: '',//顯示的頁面地址
width: 400,//懸浮div的寬度
height: 300,//懸浮div的高度
//懸浮div顯示參數(shù)
showType:'show',//懸浮div顯示方式 可選參數(shù) hide、slide、fade
showTime:0,//懸浮div顯示過程使用的時間
showDelay:0,//懸浮div延遲顯示的時間
//懸浮div隱藏參數(shù)
autoHide:false,//懸浮div是否自動隱藏
hideType:'hide',//隱藏的方式 可選參數(shù) 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=$('<div id="' + op.id + '"></div>');
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=$('<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.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);
//是否設(shè)置自動關(guān)閉
if(autoHide){
this.JwinHide(op.id);
}
}
else{
winEle.css({'zIndex':(winEle.css('zIndex')+2),'top':oldTop,'left':oldLeft});
this.JwinShow(winEle);
}
},
//創(chuàng)建標(biāo)題
JwinCreatBanner:function(winId,width,title){
var bannerImddleWidth = width-47;//拖動部分div寬度為總寬度減去兩邊圓角寬度、關(guān)閉按鈕寬度
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" onmouseover="this.src=\''+imgdir+'win_close_hover.gif\'" onmouseout="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;
}
},
//隱藏
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;
}
},
//關(guān)閉
JwinClose:function(winId){
this.JwinHide(winId,true);
}
});
})(jQuery)
您可能感興趣的文章:
- jQuery Dialog 彈出層對話框插件
- JQUERY THICKBOX彈出層插件
- Jquery 彈出層插件實(shí)現(xiàn)代碼
- 基于jquery的blockui插件顯示彈出層
- jQuery插件zoom實(shí)現(xiàn)圖片全屏放大彈出層特效
- boxy基于jquery的彈出層對話框插件擴(kuò)展應(yīng)用 彈出層選擇器
- 一個jquery的彈出層的插件
- jQuery boxy彈出層插件中文演示及使用講解
- Jquery實(shí)現(xiàn)彈出層分享微博插件具備動畫效果
- jQuery彈出層插件Lightbox_me使用指南
- Jquery彈出層插件ThickBox的使用方法
- jQuery彈出層插件popShow用法示例
相關(guān)文章
jQuery實(shí)現(xiàn)可拖拽3D萬花筒旋轉(zhuǎn)特效
本文主要介紹了使用了CSS3立體效果的強(qiáng)大特效,本特效使用jQuery跟CSS3 transform來實(shí)現(xiàn)在用戶鼠標(biāo)按下拖動時,環(huán)形圖片墻可以跟隨鼠標(biāo)進(jìn)行3D旋轉(zhuǎn)動畫。下面跟著小編一起來看下吧2017-01-01解決JQeury顯示內(nèi)容沒有邊距內(nèi)容緊挨著瀏覽器邊線
JQuery頁面顯示的內(nèi)容沒有邊距,內(nèi)容緊挨著瀏覽器邊線,下面有個不錯的解決方法,大家可以嘗試下2013-12-12讓新消息在網(wǎng)頁標(biāo)題閃爍提示的jQuery代碼
可能有一些站長會注意到這樣的效果,到收到的新消息會閃爍標(biāo)題提示,那么新消息在網(wǎng)頁標(biāo)題閃爍顯示的效果如何實(shí)現(xiàn),下面有個不錯的示例,感興趣的朋友可以參考下2013-11-11用Jquery.load載入頁面實(shí)現(xiàn)局部刷新
用jquery.load的方法載入新的頁面,以實(shí)現(xiàn)局部刷新,可結(jié)果發(fā)現(xiàn)載入進(jìn)來的頁面與原來單獨(dú)的頁面不一樣,樣式?jīng)]了,關(guān)于這個問題,下面有個不錯的解決方法2014-01-01jQuery simplePage+AJAX plus分頁插件用法實(shí)例
這篇文章主要介紹了jQuery simplePage+AJAX plus分頁插件用法,結(jié)合實(shí)例形式分析了jQuery基于extend擴(kuò)展實(shí)現(xiàn)分頁插件的具體技巧,需要的朋友可以參考下2016-02-023kb jQuery代碼搞定各種樹形選擇的實(shí)現(xiàn)方法
下面小編就為大家?guī)硪黄?kb jQuery代碼搞定各種樹形選擇的實(shí)現(xiàn)方法。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-06-06jquery分析文本里url或郵件地址為真實(shí)鏈接的方法
這篇文章主要介紹了jquery分析文本里url或郵件地址為真實(shí)鏈接的方法,涉及jQuery正則匹配與替換的相關(guān)技巧,需要的朋友可以參考下2015-06-06由簡入繁實(shí)現(xiàn)Jquery樹狀結(jié)構(gòu)的方法(推薦)
下面小編就為大家?guī)硪黄珊喨敕睂?shí)現(xiàn)Jquery樹狀結(jié)構(gòu)的方法(推薦)。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-06-06