jQuery外掛程式—輕量級的快顯視窗wBox

文章目錄

• 置名字的wBox
• 景為透明的wBox
• 出無背景wBox
• ref為圖片的進行wBox
• 藏id為#info的層
• 拖拽的#wBoxUL層
• mg燈箱連看
• frame頁面嵌入百度
• 地iframe 自使用高度
• 置位置為left300 top 100
• jax載入內容
• 有標題的彈出框
• 用callback添加地圖的wBox

 

Sender's name : 斷橋殘雪
Sender's Email : ksky521@gmail.com
Referrer : http://www.cssrain.cn/demo/1/mail.html

wBox——輕量級的快顯視窗jQuery外掛程式，基於jQuery1.4開發，主要實現彈出框的效果，並且加入了很多有趣的功能，比如可img燈箱效果，callback函數，顯示隱藏層，Ajax頁面，iframe嵌入頁面……

1. 背景透明度可以根據實際情況進行調節，甚至不設定背景
2. 可以根據需要添加wBox標題
3. 支援設定視窗位置，預設為在中心顯示
4. 支援callback函數
5. 支援html內容自訂
6. img燈箱看圖功能
7. 支援在wBox顯示#ID的內容
8. 支援Ajax頁面內容
9. 支援設定背景，不設定背景
10. 支援wBox拖拽功能
11. ESC鍵，或者在背景上雙擊即可關閉wBox
12. .wBoxClose的內容click可以關閉wBox，無論是組裝的html，還是隱藏的html，甚至於iframe的內容中的.wBoxClose

下面簡單介紹下wBox的使用方法：

簡單的使用方法

1. 首先下載wBox檔案，然後將wBox中的
2. 引入wbox.js檔案
3. 引入wbox.css檔案
4. 注意：wBox原始碼檔案夾中的圖片要跟js，css放在相同的目錄下,loading.gif要跟你頁面放在同一個目錄

html代碼如下：

<a href="#nosee" class='wBox'>這是一個隱藏wBox</a><div id="nosee" style="display:none">這裡是個隱藏的id為nosee的DIV</div><a href='http://www.js8.in/wbox/001.jpg' class='wBox'>這是一個image wBox</a>

js代碼如下：

$(".wBox").wBox();

這樣就建立了一個最簡單的wBox.

 

置名字的wBox

$("#wbox1").wBox({title: "Test Title Name",html: "點擊彈出設定名字的wBox"});

景為透明的wBox

$("#wbox2").wBox({opacity:0,html:'點擊彈出背景為透明的wBox'});

出無背景wBox

$("#wbox3").wBox({overlay:false,html:'點擊彈出無背景wBox'});

ref為圖片的進行wBox

$('.wbox').wBox();

藏id為#info的層

代碼：

$('.wbox').wBox();

拖拽的#wBoxUL層

$('#drag').wBox({drag:true,title:'wBox功能簡介部分的層'});

mg燈箱連看

$("#imgA").wBox({images:['001.jpg','002.jpg','003.jpg','004.jpg','005.jpg'],isImage:true});

frame頁面嵌入百度

$("#isFrame").wBox({isFrame:true,iframeWH:{width:800,height:400}});

地iframe 自使用高度

$("#isFrame2").wBox({isFrame:true});

置位置為left300 top 100

$('#setPos').wBox({setPos:true,left:300,top:100,html:'設定位置為left300 top 100'});

jax載入內容

$("#ajax").wBox();

有標題的彈出框

$("#noTitle").wBox({noTitle:true});

用callback添加地圖的wBox

var maplet=null;oo=false;var callback=function(){maplet = new Maplet('myMap');maplet.centerAndZoom(new MPoint('HEUIDVZVVHUEEU'),8);maplet.addControl(new MStandardControl({view: {pan:false,ruler: false}}));}$("#map").wBox({title:'<span style="font-size:14px">普加地圖</span>--<span style="font-size:12px">可拖拽</span>',html:"<div id='myMap' style='width:500px;height:400px;'></div>",callBack:callback,drag:true});

載入地圖-利用callback函數

查看示範

博文來源：http://www.cssrain.cn/default.asp?id=1435