基于jQuery1.4.2轻量级的弹出窗口jQuery插件wBox 1.0
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
弹出5秒钟自动关闭wBox
图片wBox
隐藏id为#info的层
不可拖拽的#wBoxUL层
iframe Google
$("#isFrame").wBox({requestType:"iframe",iframeWH:{width:800,height:400},target:"http://google.com"}
iframe google
本地iframe 自适用高度
Ajax加载内容
没有标题的弹出框
$("#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的更多相关文章
- 自用的弹出窗口jquery插件
现有网上的弹出窗口插件很多, 但发现在项目应用中总会有些功能不能适用, 最后只好自己写一个:插件主要参考了ymPrompt弹窗代码, ymPrompt是JS的弹窗,本插件相当于是ymPrompt的jq ...
- jQuery插件---轻量级的弹出窗口wBox
Box Demo wBox——轻量级的弹出窗口jQuery插件,基于jQuery1.4.2开发,主要实现弹出框的效果,并且加入了很多有趣的功能,比如可img灯箱效果,callback函数,显示隐藏层, ...
- 向上弹出菜单jQuery插件
插件名:柯乐义英文名:Keleyijs文件名称:jquery.keleyi.js插件功能:该插件可以让你轻易地在页面上构建一个向上弹出的二级菜单. 示例查看:http://keleyi.com/kel ...
- JQuery弹出窗口小插件ColorBox
本文来自: Small_陌 http://www.cnblogs.com/wggmqj/archive/2011/11/04/2236263.html 今天在博客园看到一篇<ASP.NET MV ...
- magnific-popup 一款优秀, 多种功能于一身的弹出层jQuery插件.
功能很强大:灯箱, 画廊, 放大图片, 弹出Youtube GoogleMap, ajax读取popup等等文档:http://dimsemenov.com/plugins/magnific-popu ...
- 多级弹出菜单jQuery插件ZoneMenu
ZoneMenu是一个菜单jQuery插件,只需占用页面上的一个小区域,却可以实现多级菜单. 在线体验:http://keleyi.com/jq/zonemenu/ 点击这里下载 完整HTML文件代码 ...
- jQuery弹出窗口完整代码
jQuery弹出窗口完整代码 效果体验:http://keleyi.com/keleyi/phtml/jqtexiao/1.htm 1 <!DOCTYPE html PUBLIC "- ...
- Skyline Terra Explorer6.6弹出窗口实现复制功能
前段时间继续下来的基于Skyline的B/S项目,是基于Terra Explorer6.6实现的.项目中涉及到基于三维模型查询设备编码等操作,从用户友好角度来讲,查询到的设备编码应该要支持复制,方便用 ...
- layer:好看的弹出窗口
layer是一款web弹层组件,只需在调用时简单地配置相关参数,即可轻松实现丰富与便捷的操作体验. 这是layer的官方地址,里面的使用介绍非常详细(http://layer.layui.com/) ...
随机推荐
- Wormholes (spfa)
一种路是双向的,路的长度是正值:另一种路是单向的,路的长度是负值: 如果有负环输出YES:否则输出NO:不同的路可能有相同的起点和终点:必须用邻接表 While exploring his many ...
- Codeforces Global Round 9 E. Inversion SwapSort
题目链接:https://codeforces.com/contest/1375/problem/E 题意 给出一个大小为 $n$ 的数组 $a$,对数组中的所有逆序对进行排序,要求按照排序后的顺序交 ...
- P1714 切蛋糕 dp+单调队列
题意: 题目描述 在幻想乡,琪露诺是以笨蛋闻名的冰之妖精. 某一天,琪露诺又在玩速冻青蛙,就是用冰把青蛙瞬间冻起来.但是这只青蛙比以往的要聪明许多,在琪露诺来之前就已经跑到了河的对岸.于是琪露诺决定到 ...
- poj 1410 (没做出来,记得闲着没事看看这道题)
听说这道题是个大大的坑题 结果wa了十多发,,,,还是没找到原因 #include<cstdio> #include<cmath> #include<algorithm& ...
- Codeforces Round #547 (Div. 3) E. Superhero Battle (数学)
题意:有一个HP为\(h\)的大怪兽,你需要轮流进行\(i\)次操作.每次可以使\(h+=d_i\)(\(d_i\)有正有负),当第\(n\)次操作完成后,再从第一次开始,问能否使得怪兽的HP变为\( ...
- Educational DP Contest F - LCS (LCS输出路径)
题意:有两个字符串,求他们的最长公共子序列并输出. 题解:首先跑个LCS记录一下dp数组,然后根据dp数组来反着还原路径,只有当两个位置的字符相同时才输出. 代码: char s[N],t[N]; i ...
- 一篇文章图文并茂地带你轻松学完 JavaScript 设计模式(一)
JavaScript 设计模式(一) 本文需要读者至少拥有基础的 ES6 知识,包括 Proxy, Reflect 以及 Generator 函数等. 至于这次为什么分了两篇文章,有损传统以及标题的正 ...
- Atlas 分表功能
目录 分表原因 分表方式 Atlas 分表 分表思路 配置 Atlas 创建原表 创建分表 数据测试 分表原因 1.数据过多,访问缓慢 2.创建索引时重新排序,创建缓慢,并且占用大量的磁盘空间 分表方 ...
- Oracle数据库故障处理方法
1.启动数据库报错:ORA-01102:cannot mount database in EXCLUSIVE mode 给客户处理oracle故障,遇到如下报错: 以sys登录至数据库,执行shutd ...
- springmvc拦截器实现登录验证
首先创建一个实体类: Customer: 1 package com.petcare.pojo.base; 2 3 import java.sql.Date; 4 import java.sql.Ti ...