Box特点

    • 背景透明度可以根据实际情况进行调节
    • 可以根据需要添加wBox标题
    • 支持callback函数
    • 支持html内容自定义
    • 支持在wBox显示#ID的内容
    • 支持Ajax页面内容
    • 支持iFrame
    • 支持wBox拖拽功能
    • ESC键,或者在背景上双击即可关闭wBox
    • class为wBox_close点击可以关闭wBox,无论是组装的html,还是隐藏的html,甚至于iframe的内容中的.wBox_close
 

新功能

    • 优化代码~
    • 美化界面~
    • 默认可拖动,drag为false关闭
    • 新增wBox关闭方法:wBox.close()
    • 新增wBox打开方法:wBox.showBox()
    • 新增wBox定时关闭设置:通过参数timeout设置定时关闭时间
    • 新增在不触发click事件的前提,显示wBox,$(s).wBox({show:true})
    • 去除灯箱功能(准备做一个单独的jQuery灯箱插件)
    • 去除设置窗口位置
 

wBox演示部分:

设置名字的wBox

代码:
var wBox=$("#wbox1").wBox({
title: "Test Title Name",
html: "<div class='demo'>点击弹出设置名字的wBox</div>"
});
点击弹出设置名字的wBox
显示wBox,wBox.showBox()
关闭使用wBox.close(),显示使用wBox.showBox()

背景为透明的wBox

代码:
$("#wbox2").wBox({opacity:0,html:"<div class='demo'>点击弹出背景为透明的wBox</div>"});
点击弹出2背景为透明的wBox

弹出5秒钟自动关闭wBox

代码:
$("#wbox3").wBox({target:"#info",timeout:5000});
弹出5秒钟自动关闭wBox

图片wBox

代码:
$('.wboxImg').wBox({target:"004.jpg",requestType:"img"});
图片wBox

隐藏id为#info的层

代码:
$('.wbox').wBox({target:"#info"});
隐藏id为#info的层

不可拖拽的#wBoxUL层

代码:
$('#drag').wBox({drag:false,title:'wBox功能简介部分的层',target:"#info"});
不可拖拽的#wBoxUL层

iframe Google

代码:
$("#isFrame").wBox({requestType:"iframe",iframeWH:{width:800,height:400},target:"http://google.com"}
iframe google

本地iframe 自适用高度

代码:
$("#isFrame2").wBox({
requestType: "iframe",
target:"500x400.html"
});
本地iframe 自适用高度

Ajax加载内容

代码:
$("#ajax").wBox({requestType: "ajax",target:"1.html"});
ajax 1.html

没有标题的弹出框

代码:
$("#noTitle").wBox({noTitle:true,html:"<div class='demo'>这是一个没有标题的wBox
ESC键关闭,或者双击背景关闭</div>"});
没有标题的弹出框

利用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函数
    • 首先下载wBox文件,然后将wBox中的
    • 引入wbox.js文件
    • 引入wbox.css文件
    • 注意:通过wbox的wBoxURL路径设置图片地址~例如:$("div").wBox({wBoxURL:"wbox/"})

基于jQuery1.4.2轻量级的弹出窗口jQuery插件wBox 1.0的更多相关文章

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

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

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

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

  3. 向上弹出菜单jQuery插件

    插件名:柯乐义英文名:Keleyijs文件名称:jquery.keleyi.js插件功能:该插件可以让你轻易地在页面上构建一个向上弹出的二级菜单. 示例查看:http://keleyi.com/kel ...

  4. JQuery弹出窗口小插件ColorBox

    本文来自: Small_陌 http://www.cnblogs.com/wggmqj/archive/2011/11/04/2236263.html 今天在博客园看到一篇<ASP.NET MV ...

  5. magnific-popup 一款优秀, 多种功能于一身的弹出层jQuery插件.

    功能很强大:灯箱, 画廊, 放大图片, 弹出Youtube GoogleMap, ajax读取popup等等文档:http://dimsemenov.com/plugins/magnific-popu ...

  6. 多级弹出菜单jQuery插件ZoneMenu

    ZoneMenu是一个菜单jQuery插件,只需占用页面上的一个小区域,却可以实现多级菜单. 在线体验:http://keleyi.com/jq/zonemenu/ 点击这里下载 完整HTML文件代码 ...

  7. jQuery弹出窗口完整代码

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

  8. Skyline Terra Explorer6.6弹出窗口实现复制功能

    前段时间继续下来的基于Skyline的B/S项目,是基于Terra Explorer6.6实现的.项目中涉及到基于三维模型查询设备编码等操作,从用户友好角度来讲,查询到的设备编码应该要支持复制,方便用 ...

  9. layer:好看的弹出窗口

    layer是一款web弹层组件,只需在调用时简单地配置相关参数,即可轻松实现丰富与便捷的操作体验. 这是layer的官方地址,里面的使用介绍非常详细(http://layer.layui.com/) ...

随机推荐

  1. Wormholes (spfa)

    一种路是双向的,路的长度是正值:另一种路是单向的,路的长度是负值:  如果有负环输出YES:否则输出NO:不同的路可能有相同的起点和终点:必须用邻接表 While exploring his many ...

  2. Codeforces Global Round 9 E. Inversion SwapSort

    题目链接:https://codeforces.com/contest/1375/problem/E 题意 给出一个大小为 $n$ 的数组 $a$,对数组中的所有逆序对进行排序,要求按照排序后的顺序交 ...

  3. P1714 切蛋糕 dp+单调队列

    题意: 题目描述 在幻想乡,琪露诺是以笨蛋闻名的冰之妖精. 某一天,琪露诺又在玩速冻青蛙,就是用冰把青蛙瞬间冻起来.但是这只青蛙比以往的要聪明许多,在琪露诺来之前就已经跑到了河的对岸.于是琪露诺决定到 ...

  4. poj 1410 (没做出来,记得闲着没事看看这道题)

    听说这道题是个大大的坑题 结果wa了十多发,,,,还是没找到原因 #include<cstdio> #include<cmath> #include<algorithm& ...

  5. Codeforces Round #547 (Div. 3) E. Superhero Battle (数学)

    题意:有一个HP为\(h\)的大怪兽,你需要轮流进行\(i\)次操作.每次可以使\(h+=d_i\)(\(d_i\)有正有负),当第\(n\)次操作完成后,再从第一次开始,问能否使得怪兽的HP变为\( ...

  6. Educational DP Contest F - LCS (LCS输出路径)

    题意:有两个字符串,求他们的最长公共子序列并输出. 题解:首先跑个LCS记录一下dp数组,然后根据dp数组来反着还原路径,只有当两个位置的字符相同时才输出. 代码: char s[N],t[N]; i ...

  7. 一篇文章图文并茂地带你轻松学完 JavaScript 设计模式(一)

    JavaScript 设计模式(一) 本文需要读者至少拥有基础的 ES6 知识,包括 Proxy, Reflect 以及 Generator 函数等. 至于这次为什么分了两篇文章,有损传统以及标题的正 ...

  8. Atlas 分表功能

    目录 分表原因 分表方式 Atlas 分表 分表思路 配置 Atlas 创建原表 创建分表 数据测试 分表原因 1.数据过多,访问缓慢 2.创建索引时重新排序,创建缓慢,并且占用大量的磁盘空间 分表方 ...

  9. Oracle数据库故障处理方法

    1.启动数据库报错:ORA-01102:cannot mount database in EXCLUSIVE mode 给客户处理oracle故障,遇到如下报错: 以sys登录至数据库,执行shutd ...

  10. springmvc拦截器实现登录验证

    首先创建一个实体类: Customer: 1 package com.petcare.pojo.base; 2 3 import java.sql.Date; 4 import java.sql.Ti ...