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"
});
});
$("#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>
<div class="title">jquery.jWindow Example 2</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