# wBox Demo

断桥残雪部落格 | wBox留言讨论 | 断桥残雪爱墙 | WordPress天气 | Follow5插件 | 其他项目

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函数
这是来自隐藏div#info的消息关闭
点击此处下载wBox

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