基于jQuery1.4.2轻量级的弹出窗口jQuery插件wBox 1.0

Box特点

• 背景透明度可以根据实际情况进行调节
• 可以根据需要添加wBox标题
• 支持callback函数
• 支持html内容自定义
• 支持在wBox显示#ID的内容
• 支持Ajax页面内容
• 支持iFrame
• 支持wBox拖拽功能
• ESC键，或者在背景上双击即可关闭wBox
• class为wBox_close点击可以关闭wBox，无论是组装的html，还是隐藏的html，甚至于iframe的内容中的.wBox_close

 

新功能

• 优化代码~
• 美化界面~
• 默认可拖动，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,wBox.showBox()
关闭使用wBox.close()，显示使用wBox.showBox()

背景为透明的wBox

代码：
$("#wbox2").wBox({opacity:0,html:"<div class='demo'>点击弹出背景为透明的wBox</div>"});
点击弹出2背景为透明的wBox

弹出5秒钟自动关闭wBox

代码：
$("#wbox3").wBox({target:"#info",timeout:5000});
弹出5秒钟自动关闭wBox

图片wBox

代码：
$('.wboxImg').wBox({target:"004.jpg",requestType:"img"});
图片wBox

隐藏id为#info的层

代码：
$('.wbox').wBox({target:"#info"});
隐藏id为#info的层

不可拖拽的#wBoxUL层

代码：
$('#drag').wBox({drag:false,title:'wBox功能简介部分的层',target:"#info"});
不可拖拽的#wBoxUL层

iframe Google

代码：
$("#isFrame").wBox({requestType:"iframe",iframeWH:{800,height:400},target:"http://google.com"}
iframe google

本地iframe 自适用高度

代码：
$("#isFrame2").wBox({
requestType: "iframe",
target:"500x400.html"
});
本地iframe 自适用高度

Ajax加载内容

代码：
$("#ajax").wBox({requestType: "ajax",target:"1.html"});
ajax 1.html

没有标题的弹出框

代码：
$("#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函数

点击此处下载wBox

• 首先下载wBox文件，然后将wBox中的
• 引入wbox.js文件
• 引入wbox.css文件
• 注意：通过wbox的wBoxURL路径设置图片地址~例如：$("div").wBox({wBoxURL:"wbox/"})