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 相关文章推荐
Javascript load Page,load css,load js实现代码
Mar 31 Javascript
模拟用户点击弹出新页面不会被浏览器拦截
Apr 08 Javascript
JavaScript判断undefined类型的正确方法
Jun 30 Javascript
JavaScript数组去重的五种方法
Nov 05 Javascript
基于Jquery制作图片文字排版预览效果附源码下载
Nov 18 Javascript
Bootstrap实现下拉菜单效果
Apr 29 Javascript
jQuery实现的纵向下拉菜单实例详解【附demo源码下载】
Jul 09 Javascript
jQuery图片轮播功能实例代码
Jan 29 Javascript
9种使用Chrome Firefox 自带调试工具调试javascript技巧
Dec 22 Javascript
详解vue项目中使用token的身份验证的简单实践
Mar 08 Javascript
基于Vue 撸一个指令实现拖拽功能
Oct 09 Javascript
小程序卡片切换效果组件wxCardSwiper的实现
Feb 13 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实现的click captcha点击验证码类实例
2014/09/23 PHP
memcache一致性hash的php实现方法
2015/03/05 PHP
laravel配置Redis多个库的实现方法
2019/04/10 PHP
Laravel框架模型的创建及模型对数据操作示例
2019/05/07 PHP
解决 firefox 不支持 document.all的方法
2007/03/12 Javascript
在IE,Firefox,Safari,Chrome,Opera浏览器上调试javascript
2008/12/02 Javascript
使用JavaScript刷新网页的方法
2015/06/04 Javascript
AngularJS实现分页显示数据库信息
2016/07/01 Javascript
详解JS获取HTML DOM元素的8种方法
2017/06/17 Javascript
vue router下的html5 history在iis服务器上的设置方法
2017/10/18 Javascript
基于jquery trigger函数无法触发a标签的两种解决方法
2018/01/06 jQuery
js+css实现打字效果
2020/06/24 Javascript
vue2.0父子组件间传递数据的方法
2018/08/16 Javascript
vue template中slot-scope/scope的使用方法
2018/09/06 Javascript
Node.js 实现抢票小工具 &amp; 短信通知提醒功能
2019/10/22 Javascript
浅谈Webpack4 Tree Shaking 终极优化指南
2019/11/18 Javascript
js获取url页面id,也就是最后的数字文件名
2020/09/25 Javascript
深入了解Python数据类型之列表
2016/06/24 Python
python3使用SMTP发送简单文本邮件
2018/06/19 Python
python找出一个列表中相同元素的多个索引实例
2019/06/11 Python
Python range、enumerate和zip函数用法详解
2019/09/11 Python
Python实现病毒仿真器的方法示例(附demo)
2020/02/19 Python
python爬取招聘要求等信息实例
2020/11/20 Python
用HTML5实现网站在windows8中贴靠的方法
2013/04/21 HTML / CSS
Sephora丝芙兰马来西亚官方网站:国际化妆品购物
2018/03/15 全球购物
巴西补充剂和维生素购物网站:Natue
2019/06/17 全球购物
应届生保险求职信
2013/11/11 职场文书
统计学专业毕业生的自我评价分享
2013/11/28 职场文书
法学专业自我鉴定
2014/02/05 职场文书
演讲稿的写法
2014/05/19 职场文书
市场营销工作计划书
2014/09/15 职场文书
单位接收函范文
2015/01/30 职场文书
2015年重阳节慰问信
2015/03/23 职场文书
战马观后感
2015/06/08 职场文书
nginx结合openssl实现https的方法
2021/07/25 Servers
Redis读写分离搭建的完整步骤
2021/09/14 Redis