- 背景透明度可以根据实际情况进行调节
- 可以根据需要添加wBox标题
- 支持callback函数
- 支持html内容自定义
- 支持在wBox显示#ID的内容
- 支持Ajax页面内容
- 支持iFrame
- 支持wBox拖拽功能
- ESC键,或者在背景上双击即可关闭wBox
- class为wBox_close点击可以关闭wBox,无论是组装的html,还是隐藏的html,甚至于iframe的内容中的.wBox_close
wBox特点
新功能
- 优化代码~
- 美化界面~
- 默认可拖动,drag为false关闭
- 新增wBox关闭方法:wBox.close()
- 新增wBox打开方法:wBox.showBox()
- 新增wBox定时关闭设置:通过参数timeout设置定时关闭时间
- 新增在不触发click事件的前提,显示wBox,$(s).wBox({show:true})
- 去除灯箱功能(准备做一个单独的jQuery灯箱插件)
- 去除设置窗口位置
wBox演示部分:
设置名字的wBox
代码:
var wBox=$("#wbox1").wBox({
title: "Test Title Name",
html: "<div class='demo'>点击弹出设置名字的wBox</div>"
});
点击弹出设置名字的wBox
关闭使用wBox.close(),显示使用wBox.showBox()
var wBox=$("#wbox1").wBox({
title: "Test Title Name",
html: "<div class='demo'>点击弹出设置名字的wBox</div>"
});
点击弹出设置名字的wBox
关闭使用wBox.close(),显示使用wBox.showBox()
背景为透明的wBox
弹出5秒钟自动关闭wBox
图片wBox
隐藏id为#info的层
不可拖拽的#wBoxUL层
iframe Google
代码:
$("#isFrame").wBox({requestType:"iframe",iframeWH:{800,height:400},target:"http://google.com"}
iframe google
$("#isFrame").wBox({requestType:"iframe",iframeWH:{800,height:400},target:"http://google.com"}
iframe google
本地iframe 自适用高度
Ajax加载内容
没有标题的弹出框
代码:
$("#noTitle").wBox({noTitle:true,html:"<div class='demo'>这是一个没有标题的wBox
ESC键关闭,或者双击背景关闭</div>"});
没有标题的弹出框
$("#noTitle").wBox({noTitle:true,html:"<div class='demo'>这是一个没有标题的wBox
ESC键关闭,或者双击背景关闭</div>"});
没有标题的弹出框
利用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='500px;height:400px;'></div>",
callBack:callback,drag:true});
加载地图-利用callback函数
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='500px;height:400px;'></div>",
callBack:callback,drag:true});
加载地图-利用callback函数
- 首先下载wBox文件,然后将wBox中的
- 引入wbox.js文件
- 引入wbox.css文件
- 注意:通过wbox的wBoxURL路径设置图片地址~例如:$("div").wBox({wBoxURL:"wbox/"})