Javascript可拖动的模式窗口

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

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


Javascirpt调用方法:

$("#btnExampleAll").click(function(){
$(
"#panelWindowAll").jWindowOpen({
modal:
true,
center:
true,
drag :
".title",
close:
"#panelWindowAll .close",
closeHoverClass:
"hover",
transfererFrom:
"#btnExampleAll",
transfererClass:
"transferer"
});
});

 


HTML的窗口例子代码:

<div class="window " id="panelWindowAll">
<div class="title">jquery.jWindow Example 2</div>
<div class="content">
这个是浮动窗口的内容,你可以在这里放iframe或其它的HTML标签,使用方便.
</div>
<div class="status"><span class="resize"></span></div>
</div>
posted @ 2012-11-07 11:39  温诗袀  阅读(267)  评论(0编辑  收藏  举报