Javascript可拖動的模式窗口

雖然JQuery有很多類似的插件,我也試過好多個,一直都沒有找到一個適合自已的,總是感覺使用不能滿足我的要求。
Javascript的浮動窗口已經是很老的應用,但網上很少有兼容性很好,使用又方便的功能,有的往往只是支持IE,而且問題多多,不方便應用到具體的項目中。最近我的項目裏面又需要用到這個東西,以前自已都是直接寫腳本來實現,但這次用到的地方比較多,所以只有寫成一個插件的型式以方便多個地方調用。
這個我是在JQuery的框架上面開發的一個插件,已經完成常用的一些功能,後面慢慢加入一些實用的東西。
現在的功能有:居中顯示模式窗口彈出效果拖動功能
它主要是實現讓一個區域浮動起來,並加入可拖動的功能。
這樣的做法好處在於,你可以在哪個區域裏面加入任何代碼,最好的應用是配合iframe,比如跟我以前做的 AjaxUpload結合,效果很爽(這個我已經在我的項目裏面使用)。
多的不說,看看代碼和演示。

此插件必須配合 jquery.jsjquery.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 
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章