技术头条(投递你的文章)     搜索本站     邮件订阅     微信号:IT技术博客大学习
您现在的位置首页 --> JavaScript --> jQuery插件---轻量级的弹出窗口wBox.

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

浏览:9086次  出处信息

wBox――轻量级的弹出窗口jQuery插件,基于jQuery1.4开发,主要实现弹出框的效果,并且加入了很多有趣的功能,比如可img灯箱效果,callback函数,显示隐藏层,Ajax页面,iframe嵌入页面……

  1. 背景透明度可以根据实际情况进行调节,甚至不设置背景
  2. 可以根据需要添加wBox标题
  3. 支持设置窗口位置,默认为在中心显示
  4. 支持callback函数
  5. 支持html内容自定义
  6. img灯箱看图功能
  7. 支持在wBox显示#ID的内容
  8. 支持Ajax页面内容
  9. 支持设置背景,不设置背景
  10. 支持wBox拖拽功能
  11. ESC键,或者在背景上双击即可关闭wBox
  12. .wBoxClose的内容click可以关闭wBox,无论是组装的html,还是隐藏的html,甚至于iframe的内容中的.wBoxClose

下面简单介绍下wBox的使用方法:

简单的使用方法

  1. 首先下载wBox文件,然后将wBox中的
  2. 引入wbox.js文件
  3. 引入wbox.css文件
  4. 注意: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://www.js8.in/wbox/001.jpg' class='wBox'>这是一个image wBox</a>

js代码如下:

$(".wBox").wBox();

这样就建立了一个最简单的wBox.

这是一个隐藏wBox 这是一个image wBox

置名字的wBox

$("#wbox1").wBox({
title: "Test Title Name",
html: "点击弹出设置名字的wBox"
});

景为透明的wBox

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

出无背景wBox

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

ref为图片的进行wBox

$('.wbox').wBox();

藏id为#info的层

代码:

$('.wbox').wBox();

拖拽的#wBoxUL层

$('#drag').wBox({drag:true,title:'wBox功能简介部分的层'});

mg灯箱连看

$("#imgA").wBox({images:['001.jpg','002.jpg','003.jpg','004.jpg','005.jpg'],isImage:true});

frame页面嵌入百度

$("#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'});

jax加载内容

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

查看演示



觉得文章有用?立即: 和朋友一起 共学习 共进步!

建议继续学习:

  1. JQuery实现Excel表格呈现    (阅读:45691)
  2. 分享一个JQUERY颜色选择插件    (阅读:9621)
  3. 10个强大的Ajax jQuery文件上传程序    (阅读:7088)
  4. jQuery的data()方法    (阅读:6448)
  5. jQuery性能优化指南    (阅读:6306)
  6. jQuery Color Animations颜色动画插件    (阅读:6003)
  7. 精于图片处理的10款jQuery插件    (阅读:5227)
  8. jQuery中getJSON跨域原理详解    (阅读:4927)
  9. 配合jquery实现异步加载页面元素    (阅读:4731)
  10. nyroModal:强大的jQuery弹出层插件    (阅读:4225)
QQ技术交流群:445447336,欢迎加入!
扫一扫订阅我的微信号:IT技术博客大学习
© 2009 - 2017 by blogread.cn 微博:@IT技术博客大学习

京ICP备15002552号