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. B - How Many Tables (多少桌)

    题目大致意思: 有n个人在一起吃饭,有些人互相认识.认识的人想坐在一起,不想跟陌生人坐.例如A认识B,B认识C,那么A.B.C会坐在一张桌子上. 给出认识的人,问需要多少张桌子 Today is Ig ...

  2. Codeforces Round #635 (Div. 1)

    传送门 A. Linova and Kingdom 题意: 给定一颗以\(1\)为根的树,现在要选定\(k\)个结点为黑点,一个黑点的贡献为从他出发到根节点经过的白点数量. 问黑点贡献总和最大为多少. ...

  3. python爬取网易翻译 和MD5加密

    一.程序需要知识 1.python中随机数的生成 # 生成 0 ~ 9 之间的随机数 # 导入 random(随机数) 模块 import random print(random.randint(0, ...

  4. 洛谷-P1434 [SHOI2002]滑雪 (记忆化搜索)

    题意:有一个\(R*C\)的矩阵,可以从矩阵中的任意一个数开始,每次都可以向上下左右选一个比当前位置小的数走,求走到\(1\)的最长路径长度. 题解:这题很明显看到就知道是dfs,但是直接爆搜会TLE ...

  5. B-number HDU - 3652

    题意: 找出区间[li,ri]有多少个符合要求的数: 1.这个数里面有13 2.这个数可以被13整除 题解: 这个题目和之前的有点不一样就是这个题目要我们求包含13的(之前做过的都是不包含).但是都差 ...

  6. DSSM在召回和粗排的应用举例

    0.写在前面的话 DSSM(Deep Structured Semantic Models)又称双塔模型,因其结构简单,在推荐系统中应用广泛:下面仅以召回.粗排两个阶段的应用举例,具体描述下DSSM在 ...

  7. VUE 3.0 初体验之路

    在2020年9月中旬,vue.js发布了3.0正式版,在不久的将来,VUE3.0 也终将成为大前端的必然趋势, 环境搭建 node 版本要求: Node.js8.9 或更高版本 ,输入 node -v ...

  8. 关于TCP和UDP的通俗理解

    TCP和UDP是网络基础,很多公司面试也都会问到,今天我在这里,根据大神们的讲解,自己总结借鉴一下. 首先,先提一个问题:英雄联盟是TCP还是UDP? 这个问题对于游戏玩家,可能大多数人都没有想过.一 ...

  9. Dos简单命令及CMD打开方式

    打开CMD方式 开始+系统+命令提示符 WIN健+R 输入cmd打开控制台(推荐使用) 在任意文件夹下面,按住shift+鼠标右击,进入powershell 资源管理器的地址栏路径最前面+cmd+空格 ...

  10. 记一次FreeRTOS错误配置导致无法进入临界区

    最近项目用到FreeRTOS,在实际调试中发现我自己的一段代码本来好用的(在无RTOS的情况下),但是当我在带RTOS的情况下把代码放到一个单独的任务中运行时我发现本来好用的代码莫名其妙的出现问题,有 ...