jquery.boxy弹出框(后隔N秒后自动隐藏/自动跳转)


Posted in Javascript onJanuary 15, 2013

对于 Boxy弹出框的使用之前写过一些文章(查看jquery.boxy基础),今天主要是在解决一个需要之后,觉得值得把它记录下来,所以就再写一篇,主要功能是,在弹出对话框后,隔N秒后自动隐藏,还有就是自动跳转!

效果如图
jquery.boxy弹出框(后隔N秒后自动隐藏/自动跳转) 
而所封装的代码如下

// boxy对话框扩展 
var Boxy_Extensions = { 
options: { 
title: '艺吧提示', 
closeText: 'x' 
}, 
//弹出后N秒后隐藏 
alertDelayFun: function (info, timer, options) { 
options = $.extend(this.options, options || {}); 
new Boxy("<div style='padding-left:50px;padding-right:50px;text-align:center;font-size:14px;'>" + info + "</div>", $.extend({ behaviours: function () { 
setTimeout('$(".boxy-wrapper").hide();', timer); 
} 
}, options)); 
}, 
//弹出后,自动跳转 
alertHrefFun: function (info, href, options) { 
options = $.extend(this.options, options || {}); 
new Boxy("<div style='padding-left:50px;padding-right:50px;text-align:center;font-size:14px;'>" + info + "</div>", $.extend({ behaviours: function () { 
location.href = href; 
} 
}, options)); 
} 
}

因为options属性是公用的,所以把它提了出现,而每个方法有自己的options,如果在调用自己方法时传递了options,通过$.extend会把它

与类中options属性的内容进行合并(覆盖相关键的值,扩展新的键值),看来写JS也应该遵循面向对象的原则呀,呵呵!

Javascript 相关文章推荐
JQERY limittext 插件0.2版(长内容限制显示)
Aug 27 Javascript
jQuery Tools tab使用介绍
Jul 14 Javascript
JS获取图片高度宽度的方法分享
Apr 17 Javascript
JavaScript调用传递变量参数的相关问题及解决办法
Nov 01 Javascript
第二篇Bootstrap起步
Jun 21 Javascript
jquery轮播的实现方式 附完整实例
Jul 28 Javascript
JS排序之冒泡排序详解
Apr 08 Javascript
Javascript实现一个简单的输入关键字添加标签效果实例
Jun 01 Javascript
js轮播图无缝滚动效果
Jun 17 Javascript
vue 本地服务不能被外部IP访问的完美解决方法
Oct 29 Javascript
vue axios请求频繁时取消上一次请求的方法
Nov 10 Javascript
Nuxt.js开启SSR渲染的教程详解
Nov 30 Javascript
SOSO地图API使用(一)在地图上画圆实现思路与代码
Jan 15 #Javascript
script的async属性以非阻塞的模式加载脚本
Jan 15 #Javascript
javascript真的不难-回顾一下基础知识
Jan 15 #Javascript
jQuery使用动态渲染表单功能完成ajax文件下载
Jan 15 #Javascript
jsvascript图像处理—(计算机视觉应用)图像金字塔
Jan 15 #Javascript
使用Post提交时须将空格转换成加号的解释
Jan 14 #Javascript
javascript函数以及基础写法100多条实用整理
Jan 13 #Javascript
You might like
PHP语法速查表
2006/12/06 PHP
基于empty函数的判断详解
2013/06/17 PHP
php统计文章排行示例
2014/03/04 PHP
ThinkPHP中redirect用法分析
2014/12/05 PHP
浅谈PHP接入(第三方登录)QQ登录 OAuth2.0 过程中遇到的坑
2017/10/13 PHP
Laravel框架模板继承操作示例
2018/06/11 PHP
php设计模式之观察者模式定义与用法经典示例
2019/09/19 PHP
javascript之dhDataGrid Ver2.0.0代码
2007/07/01 Javascript
用js实现手把手教你月入万刀(转贴)
2007/11/07 Javascript
window.onload 加载完毕的问题及解决方案(下)
2009/07/09 Javascript
jquery UI 1.72 之datepicker
2009/12/29 Javascript
jquery对table中各数据的增加、保存、删除操作示例
2014/05/14 Javascript
JavaScript截取、切割字符串的技巧
2016/01/07 Javascript
一种Javascript解释ajax返回的json的好方法(推荐)
2016/06/02 Javascript
AngularJS基础 ng-click 指令示例代码
2016/08/01 Javascript
jQuery实现的placeholder效果完整实例
2016/08/02 Javascript
jquery easyUI中ajax异步校验用户名
2016/08/19 Javascript
vue修改vue项目运行端口号的方法
2017/08/04 Javascript
js中this对象用法分析
2018/01/05 Javascript
解决vue keep-alive 数据更新的问题
2018/09/21 Javascript
angular5 子组件监听父组件传入值的变化方法
2018/09/30 Javascript
angular4自定义组件非input元素实现ngModel双向数据绑定的方法
2018/12/28 Javascript
[01:00:14]2018DOTA2亚洲邀请赛 4.6 淘汰赛 VP vs TNC 第三场
2018/04/10 DOTA
Python3.x和Python2.x的区别介绍
2013/02/12 Python
用实例说明python的*args和**kwargs用法
2013/11/01 Python
75条笑死人的知乎神回复,用60行代码就爬完了
2019/05/06 Python
Pandas之Dropna滤除缺失数据的实现方法
2019/06/25 Python
python PyQt5/Pyside2 按钮右击菜单实例代码
2019/08/17 Python
TensorFlow dataset.shuffle、batch、repeat的使用详解
2020/01/21 Python
Python如何将图像音视频等资源文件隐藏在代码中(小技巧)
2020/02/16 Python
Django form表单与请求的生命周期步骤详解
2020/06/07 Python
七一党建活动方案
2014/01/28 职场文书
财会专业毕业生自荐信
2014/07/09 职场文书
班主任高考寄语
2015/02/26 职场文书
2019年最新感恩节祝福语(28句)
2019/11/27 职场文书
clear 万能清除浮动(clearfix:after)
2023/05/21 HTML / CSS