Javascript可拖动的模式窗口

本文介绍了一个基于JQuery框架的浮动窗口插件,该插件具有居中显示、模式窗口、弹出效果及拖动功能。适用于多种浏览器,便于在不同项目中复用。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

虽然JQuery有很多类似的插件,我也试过好多个,一直都没有找到一个适合自已的,总是感觉使用不能满足我的要求。
Javascript的浮动窗口已经是很老的应用,但网上很少有兼容性很好,使用又方便的功能,有的往往只是支持IE,而且问题多多,不方便应用到具体的项目中。最近我的项目里面又需要用到这个东西,以前自已都是直接写脚本来实现,但这次用到的地方比较多,所以只有写成一个插件的型式以方便多个地方调用。
这个我是在JQuery的框架上面开发的一个插件,已经完成常用的一些功能,后面慢慢加入一些实用的东西。
现在的功能有: 居中显示模式窗口弹出效果拖动功能
它主要是实现让一个区域浮动起来,并加入可拖动的功能。
这样的做法好处在于,你可以在哪个区域里面加入任何代码,最好的应用是配合iframe,比如跟我以前做的 AjaxUpload结合,效果很爽(这个我已经在我的项目里面使用)。
多的不说,看看代码和演示。

此插件必须配合 jquery.jsjquery.inteface.js 两个一起才可以使用。



Javascirpt调用方法:
<!--<br /> <br /> Code highlighting produced by Actipro CodeHighlighter (freeware)<br /> http://www.CodeHighlighter.com/<br /> <br /> --> $( " #btnExampleAll " ).click( function (){
$(
" #panelWindowAll " ).jWindowOpen({
modal:
true ,
center:
true ,
drag:
" .title " ,
close:
" #panelWindowAll.close " ,
closeHoverClass:
" hover " ,
transfererFrom:
" #btnExampleAll " ,
transfererClass:
" transferer "
});
});
<!--<br /> <br /> Code highlighting produced by Actipro CodeHighlighter (freeware)<br /> http://www.CodeHighlighter.com/<br /> <br /> -->
HTML的窗口例子代码:
<!--<br /> <br /> Code highlighting produced by Actipro CodeHighlighter (freeware)<br /> http://www.CodeHighlighter.com/<br /> <br /> --> < div class ="window" id ="panelWindowAll" >
< div class ="title" > jquery.jWindowExample2 </ div >
< div class ="content" >
这个是浮动窗口的内容,你可以在这里放iframe或其它的HTML标签,使用方便.
</ div >
< div class ="status" >< span class ="resize" ></ span ></ div >
</ div >

具体的效果以及使用方法请看下面的地址
项目下载地址与演示地址: http://www.wathon.com/opensource/js/jwindow/jwindow.html
源代码下载地址: http://www.wathon.com/opensource/js/jwindow/jquery.jWindow.zip
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值