jQuery插件–wBox发布
三水清 2010-03-08 21:56:44
经过大约一周的时间，wBox终于跟大家见面啦，这是断桥残雪写的第一个jQuery插件，开发时间比较急促，所以有不足之处希望大家指出。
wBox——轻量级的弹出窗口jQuery插件，基于jQuery1.4开发，主要实现弹出框的效果，并且加入了很多有趣的功能，比如可img灯箱效果，callback函数，显示隐藏层，Ajax页面，iframe嵌入页面……
- 背景透明度可以根据实际情况进行调节，甚至不设置背景
- 可以根据需要添加wBox标题
- 支持设置窗口位置，默认为在中心显示
- 支持callback函数
- 支持html内容自定义
- img灯箱看图功能
- 支持在wBox显示#ID的内容
- 支持Ajax页面内容
- 支持设置背景，不设置背景
- 支持wBox拖拽功能
- ESC键，或者在背景上双击即可关闭wBox
- .wBoxClose的内容click可以关闭wBox，无论是组装的html，还是隐藏的html，甚至于iframe的内容中的.wBoxClose
下面简单介绍下wBox的使用方法：
最简单的使用方法
- 首先下载wBox文件，然后将wBox中的
- 引入wbox.js文件
- 引入wbox.css文件
- 注意：wBox源代码文件夹中的图片要跟js，css放在相同的目录下,loading.gif要跟你页面放在同一个目录
html代码如下：
<a href="#nosee" class='wBox'>这是一个隐藏wBox</a> <div id="nosee" style="display:none">这里是个隐藏的id为nosee的DIV</div> <a href='http://js8.in/wbox/001.jpg' class='wBox'>这是一个image wBox</a>
js代码如下：
$(".wBox").wBox();
这样就建立了一个最简单的wBox.
设置名字的wBox
$("#wbox1").wBox({ title: "Test Title Name", html: "点击弹出设置名字的wBox" });
背景为透明的wBox
$("#wbox2").wBox({opacity:0,html:'点击弹出背景为透明的wBox'});
弹出无背景wBox
$("#wbox3").wBox({overlay:false,html:'点击弹出无背景wBox'});
href为图片的进行wBox
$('.wbox').wBox();
隐藏id为#info的层
代码：
$('.wbox').wBox();
可拖拽的#wBoxUL层
$('#drag').wBox({drag:true,title:'wBox功能简介部分的层'});
img灯箱连看
$("#imgA").wBox({images:['001.jpg','002.jpg','003.jpg','004.jpg','005.jpg'],isImage:true});
iframe页面嵌入百度
$("#isFrame").wBox({isFrame:true,iframeWH:{width:800,height:400}});
本地iframe 自使用高度
$("#isFrame2").wBox({isFrame:true});
设置位置为left300 top 100
$('#setPos').wBox({setPos:true,left:300,top:100,html:'设置位置为left300 top 100'});
Ajax加载内容
$("#ajax").wBox();
没有标题的弹出框
$("#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:'<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函数
声明：文章未声明为原创文章，本文链接 http://js8.in/502.html. 转载请注明转自 JS8.IN ™
