wBox Demo

wBox 1.0正式发布！——轻量级的弹出窗口jQuery插件，压缩后仅仅3.65Kb，基于jQuery1.4.2开发，主要实现弹出框的效果，并且加入了很多有趣的功能，比如callback函数，显示隐藏层，Ajax页面，iframe嵌入页面……

    wBox特点

  • 背景透明度可以根据实际情况进行调节
  • 可以根据需要添加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.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:{width: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='width:500px;height:400px;'></div>",
callBack:callback,drag:true});
加载地图-利用callback函数
点击此处下载wBox