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.js文件
    • 引入wbox.css文件
    • 注意:wBox源代码文件夹中的图片要跟js,css放在相同的目录下

jQuery插件---轻量级的弹出窗口wBox的更多相关文章

  1. 基于jQuery1.4.2轻量级的弹出窗口jQuery插件wBox 1.0

    Box特点 背景透明度可以根据实际情况进行调节 可以根据需要添加wBox标题 支持callback函数 支持html内容自定义 支持在wBox显示#ID的内容 支持Ajax页面内容 支持iFrame ...

  2. 基于Jquery的原生态dialog弹出窗口-zapWindow

    看到boss系统搓B的填出窗口,不忍直视,坚决的换掉! 采用zapwindow(来源不清楚了,总之是前人留下的),做了修改,当前支持三类弹出类型: 1. 指定url 2. 自定义html 3. 指定D ...

  3. Jquery插件之信息弹出框showInfoDialog(成功、错误、警告、通知)

    一.信息种类说明: 1.1.操作成功信息 1.2.错误信息 1.3.警告信息 1.4.通知信息 二.使用说明 <!DOCTYPE html PUBLIC "-//W3C//DTD HT ...

  4. jQuery弹出窗口完整代码

    jQuery弹出窗口完整代码 效果体验:http://keleyi.com/keleyi/phtml/jqtexiao/1.htm 1 <!DOCTYPE html PUBLIC "- ...

  5. EasyUI弹出窗口实例

    效果体验:http://hovertree.com/texiao/jeasyui/1.htm 源代码下载:HovertreeJEasyUI HTML文件代码: <!DOCTYPE html> ...

  6. 自用的弹出窗口jquery插件

    现有网上的弹出窗口插件很多, 但发现在项目应用中总会有些功能不能适用, 最后只好自己写一个:插件主要参考了ymPrompt弹窗代码, ymPrompt是JS的弹窗,本插件相当于是ymPrompt的jq ...

  7. jquery Jbox 插件实现弹出窗口在修改的数据之后,关闭弹出窗口刷新父页面的问题

    http://blog.csdn.net/nsdnresponsibility/article/details/51282797 问题如题: 这里我们在父页面定义一个全局的变量来标识是否需要刷新父页面 ...

  8. Js(Jquery)实现的弹出窗口

    想实现一个弹出层,过一段时间自动消失的功能. 之前的项目中是:在页面中预先先一个<div>区域,默认隐藏或者因为没有内容不显示.当需要显示信息时,将该<div>填充上内容,并用 ...

  9. jQuery弹出窗口浏览图片

    效果预览:http://keleyi.com/keleyi/phtml/jqtexiao/3.htm HTML文件代码: <!DOCTYPE HTML> <html> < ...

随机推荐

  1. 如何为CentOS 7配置静态IP地址

    问题:在CentOS 7上,我想要将我其中一个网络接口从DHCP改为静态IP地址配置,如何才能永久为CentOS或RHEL 7上的网络接口分配静态IP地址? 如果你想要为CentOS 7中的某个网络接 ...

  2. MySql - JdbcType - Oracle类型映射

    MySql - JdbcType - Oracle类型映射   MySQL数据类型 JDBC TYPE Oracle数据类型 BIGINT BIGINT NUMBER(20) TINYINT TINY ...

  3. ACE_Event_Handler:事件响应入口

    1:ACE_Event_Handler类 头文件“Event_Handler.h” 在ACE Reactor框架中,ACE_Event_Handler是所有事件处理器的基类.ACE_Event_Han ...

  4. 查看Linux系统文本编码-方便修改ssh编码一致

    首先,Linux系统发行的时候全世界都一样,系统是中文的还是英文的完全取决于你选择的语言包.不同国家的人在安装使用的时候选择属于自己国家的语言包,应用程序中的语言也不是写死的,它根据系统的设置来调用相 ...

  5. java中Class对象详解

    java中把生成Class对象和实例对象弄混了,更何况生成Class对象和生成instance都有多种方式.所以只有弄清其中的原理,才可以深入理解.首先要生成Class对象,然后再生成Instance ...

  6. 在OSchina上看到的清理到缓存的方法

    /* * *文 件 名: DataCleanManager.java * 描 述: 主要功能有清除内/外缓存,清除数据库,清除sharedPreference,清除files和清除自定义目录 */ i ...

  7. oracle11g 卸载和安装(win7,32位)

    完全卸载oracle11g步骤:1. 开始->设置->控制面板->管理工具->服务 停止所有Oracle服务.2. 开始->程序->Oracle - OraDb11 ...

  8. jQuery的dataTables插件实现中文排序

    最近在写Java web. 写JSP的时候发现一个很好玩的插件dataTables.分页.过滤.排序等等手到擒来. 哎哎哎,有点点可惜的是排序这个功能不支持中文.于是网上查查找找,现在把方法整理一下, ...

  9. jsoup抓取数据

    jsoup的主要功能如下: 1. 从一个URL,文件或字符串中解析HTML: 2. 使用DOM或CSS选择器来查找.取出数据: 3. 可操作HTML元素.属性.文本: 接下来介绍jsoup 是如何优雅 ...

  10. repeat a string in java

    if I want to repeat "hello" four times as a new string-> "hellohellohellohello&quo ...