標籤：blog http os io strong 檔案 ar cti
Box Demo
wBox——輕量級的快顯視窗jQuery外掛程式，基於jQuery1.4.2開發，主要實現彈出框的效果，並且加入了很多有趣的功能，比如可img燈箱效果，callback函數，顯示隱藏層，Ajax頁面，iframe嵌入頁面……
- 背景透明度可以根據實際情況進行調節，甚至不設定背景
- 可以根據需要添加wBox標題
- 支援設定視窗位置，預設為在中心顯示
- 支援callback函數
- 支援html內容自訂
- img燈箱看圖功能
- 支援在wBox顯示#ID的內容
- 支援Ajax頁面內容
- 支援設定背景，不設定背景
- 支援wBox拖拽功能
- ESC鍵，或者在背景上雙擊即可關閉wBox
- .wBoxClose的內容click可以關閉wBox，無論是組裝的html，還是隱藏的html，甚至於iframe的內容中的.wBoxClose
示範部分：
設定名字的wBox代碼：
$("#wbox1").wBox({
title: "Test Title Name",
html: "點擊彈出設定名字的wBox"
});
點擊彈出設定名字的wBox背景為透明的wBox代碼：
$("#wbox2").wBox({opacity:0,html:‘點擊彈出背景為透明的wBox‘});
點擊彈出2背景為透明的wBox彈出無背景wBox代碼：
$("#wbox3").wBox({overlay:false,html:‘點擊彈出無背景wBox‘});
點擊彈出無背景wBox測試圖片href代碼：
$(‘.wbox‘).wBox();
測試圖片href隱藏id為#info的層代碼：
$(‘.wbox‘).wBox();
隱藏id為#info的層可拖拽的#wBoxUL層代碼：
$(‘#drag‘).wBox({drag:true,title:‘wBox功能簡介部分的層‘});
可拖拽的#wBoxUL層img燈箱連看代碼：
$("#imgA").wBox({images:[‘001.jpg‘,‘002.jpg‘,‘003.jpg‘,‘004.jpg‘,‘005.jpg‘],isImage:true});
測試img燈箱連看iframe百度代碼：
$("#isFrame").wBox({isFrame:true,iframeWH:{width:800,height:400}});
測試iframe baidu本地iframe 自適用高度代碼：
$("#isFrame2").wBox({isFrame:true});
本地iframe 自適用高度設定位置為left300 top 100代碼：
$(‘#setPos‘).wBox({setPos:true,left:300,top:100,html:‘設定位置為left300 top 100‘});
設定位置為left300 top 100查看效果要滾動到頂部100px處哦~Ajax載入內容代碼：
$("#ajax").wBox();
ajax 1.html沒有標題的彈出框代碼：
$("#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:‘普加地圖--可拖拽‘,
html:" ",
callBack:callback,drag:true});
載入地圖-利用callback函數點擊此處下載wBox
- 首先下載wBox檔案，然後將wBox中的
- 引入wbox.js檔案
- 引入wbox.css檔案
- 注意：wBox原始碼檔案夾中的圖片要跟js，css放在相同的目錄下
