jQuery插件---轻量级的弹出窗口wBox

时间：2014-08-05 13:45:19 阅读：286 评论：0 收藏：0 [点我收藏+]

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

背景为透明的wBox

代码：
$("#wbox2").wBox({opacity:0,html:‘点击弹出背景为透明的wBox‘});
点击弹出2背景为透明的wBox

弹出无背景wBox

代码：
$("#wbox3").wBox({overlay:false,html:‘点击弹出无背景wBox‘});
点击弹出无背景wBox

测试图片href

代码：
$(‘.wbox‘).wBox();
测试图片href

隐藏id为#info的层

代码：
$(‘.wbox‘).wBox();
隐藏id为#info的层

可拖拽的#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灯箱连看

iframe百度

代码：
$("#isFrame").wBox({isFrame:true,iframeWH:{width:800,height:400}});
测试iframe baidu

本地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处哦~

Ajax加载内容

代码：
$("#ajax").wBox();
ajax 1.html

没有标题的弹出框

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

点击此处下载wBox

首先下载wBox文件，然后将wBox中的
引入wbox.js文件
引入wbox.css文件
注意：wBox源代码文件夹中的图片要跟js，css放在相同的目录下

jQuery插件---轻量级的弹出窗口wBox,布布扣,bubuko.com

jQuery插件---轻量级的弹出窗口wBox

原文：http://www.cnblogs.com/zcm123/p/3891784.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)