首页 > 代码库 > jQuery插件---轻量级的弹出窗口wBox
jQuery插件---轻量级的弹出窗口wBox
Box Demo
wBox——轻量级的弹出窗口jQuery插件,基于jQuery1.4.2开发,主要实现弹出框的效果,并且加入了很多有趣的功能,比如可img灯箱效果,callback函数,显示隐藏层,Ajax页面,iframe嵌入页面……
- 背景透明度可以根据实际情况进行调节,甚至不设置背景
- 可以根据需要添加wBox标题
- 支持设置窗口位置,默认为在中心显示
- 支持callback函数
- 支持html内容自定义
- img灯箱看图功能
- 支持在wBox显示#ID的内容
- 支持Ajax页面内容
- 支持设置背景,不设置背景
- 支持wBox拖拽功能
- ESC键,或者在背景上双击即可关闭wBox
- .wBoxClose的内容click可以关闭wBox,无论是组装的html,还是隐藏的html,甚至于iframe的内容中的.wBoxClose
演示部分:
设置名字的wBox
代码:
$("#wbox1").wBox({
title: "Test Title Name",
html: "点击弹出设置名字的wBox"
});
点击弹出设置名字的wBox
$("#wbox1").wBox({
title: "Test Title Name",
html: "点击弹出设置名字的wBox"
});
点击弹出设置名字的wBox
背景为透明的wBox
代码:
$("#wbox2").wBox({opacity:0,html:‘点击弹出背景为透明的wBox‘});
点击弹出2背景为透明的wBox
$("#wbox2").wBox({opacity:0,html:‘点击弹出背景为透明的wBox‘});
点击弹出2背景为透明的wBox
弹出无背景wBox
代码:
$("#wbox3").wBox({overlay:false,html:‘点击弹出无背景wBox‘});
点击弹出无背景wBox
$("#wbox3").wBox({overlay:false,html:‘点击弹出无背景wBox‘});
点击弹出无背景wBox
测试图片href
代码:
$(‘.wbox‘).wBox();
测试图片href
$(‘.wbox‘).wBox();
测试图片href
隐藏id为#info的层
代码:
$(‘.wbox‘).wBox();
隐藏id为#info的层
$(‘.wbox‘).wBox();
隐藏id为#info的层
可拖拽的#wBoxUL层
代码:
$(‘#drag‘).wBox({drag:true,title:‘wBox功能简介部分的层‘});
可拖拽的#wBoxUL层
$(‘#drag‘).wBox({drag:true,title:‘wBox功能简介部分的层‘});
可拖拽的#wBoxUL层
img灯箱连看
代码:
$("#imgA").wBox({images:[‘001.jpg‘,‘002.jpg‘,‘003.jpg‘,‘004.jpg‘,‘005.jpg‘],isImage:true});
测试img灯箱连看
$("#imgA").wBox({images:[‘001.jpg‘,‘002.jpg‘,‘003.jpg‘,‘004.jpg‘,‘005.jpg‘],isImage:true});
测试img灯箱连看
iframe百度
代码:
$("#isFrame").wBox({isFrame:true,iframeWH:{width:800,height:400}});
测试iframe baidu
$("#isFrame").wBox({isFrame:true,iframeWH:{width:800,height:400}});
测试iframe baidu
本地iframe 自适用高度
代码:
$("#isFrame2").wBox({isFrame:true});
本地iframe 自适用高度
$("#isFrame2").wBox({isFrame:true});
本地iframe 自适用高度
设置位置为left300 top 100
代码:
$(‘#setPos‘).wBox({setPos:true,left:300,top:100,html:‘设置位置为left300 top 100‘});
设置位置为left300 top 100查看效果要滚动到顶部100px处哦~
$(‘#setPos‘).wBox({setPos:true,left:300,top:100,html:‘设置位置为left300 top 100‘});
设置位置为left300 top 100查看效果要滚动到顶部100px处哦~
Ajax加载内容
代码:
$("#ajax").wBox();
ajax 1.html
$("#ajax").wBox();
ajax 1.html
没有标题的弹出框
代码:
$("#noTitle").wBox({noTitle:true});
没有标题的弹出框
$("#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:‘普加地图--可拖拽‘,
html:" ",
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:‘普加地图--可拖拽‘,
html:"
callBack:callback,drag:true});
加载地图-利用callback函数
点击此处下载wBox
- 首先下载wBox文件,然后将wBox中的
- 引入wbox.js文件
- 引入wbox.css文件
- 注意:wBox源代码文件夹中的图片要跟js,css放在相同的目录下
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。