雖然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>
具體的效果以及使用方法請看下面的地址
項目與示範地址:http://www.wathon.com/opensource/js/jwindow/jwindow.html
原始碼:http://www.wathon.com/opensource/js/jwindow/jquery.jWindow.zip