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 篱式条件判断
Aug 22 Javascript
javascript实现字符串反转的方法
Feb 05 Javascript
javascript显式类型转换实例分析
Apr 25 Javascript
jQuery向父辈遍历的简单方法
Sep 18 Javascript
详解vue嵌套路由-params传递参数
May 23 Javascript
详解vue mixins和extends的巧妙用法
Dec 20 Javascript
vue实现一拉到底的滑动验证
Jul 25 Javascript
VUE:vuex 用户登录信息的数据写入与获取方式
Nov 11 Javascript
关于vue利用postcss-pxtorem进行移动端适配的问题
Nov 20 Javascript
axios如何取消重复无用的请求详解
Dec 15 Javascript
基于JS判断对象是否是数组
Jan 10 Javascript
js实现简易计算器小功能
Nov 18 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代码
2010/07/17 PHP
php地址引用(php地址引用的效率问题)
2012/03/23 PHP
yii2 RBAC使用DbManager实现后台权限判断的方法
2016/07/23 PHP
PHP实现的超长文本分页显示功能示例
2018/06/04 PHP
Laravel实现通过blade模板引擎渲染视图
2019/10/25 PHP
关于IFRAME 自适应高度的研究
2006/07/20 Javascript
常用简易JavaScript函数
2009/04/09 Javascript
JQuery的html(data)方法与&amp;lt;script&amp;gt;脚本块的解决方法
2010/03/09 Javascript
用jquery与css打造个性化的单选框和复选框
2010/10/20 Javascript
jqplot通过ajax动态画折线图的方法及思路
2013/12/08 Javascript
jQuery+ajax实现无刷新级联菜单示例
2015/05/21 Javascript
Bootstrap Table服务器分页与在线编辑应用总结
2016/08/08 Javascript
Vue2几种常见开局方式详解
2017/09/09 Javascript
JS二级菜单不同实现方法分析【4种方法】
2018/12/21 Javascript
详解VUE单页应用骨架屏方案
2019/01/17 Javascript
vue基础之模板和过滤器用法实例分析
2019/03/12 Javascript
关于Vue源码vm.$watch()内部原理详解
2019/04/26 Javascript
用实例说明python的*args和**kwargs用法
2013/11/01 Python
python抓取某汽车网数据解析html存入excel示例
2013/12/04 Python
举例讲解Python中is和id的用法
2015/04/03 Python
python实现可将字符转换成大写的tcp服务器实例
2015/04/29 Python
python版简单工厂模式
2017/10/16 Python
python 矩阵增加一行或一列的实例
2018/04/04 Python
使用Python和xlwt向Excel文件中写入中文的实例
2018/04/21 Python
Python日期时间Time模块实例详解
2019/04/15 Python
python pyinstaller 加载ui路径方法
2019/06/10 Python
使用TensorFlow搭建一个全连接神经网络教程
2020/02/06 Python
Selenium关闭INFO:CONSOLE提示的解决
2020/12/07 Python
AmazeUI 按钮交互的实现示例
2020/08/24 HTML / CSS
经典英文广告词
2014/03/18 职场文书
业务员岗位职责
2015/02/03 职场文书
大学生简历自我评价2015
2015/03/03 职场文书
在python中实现导入一个需要传参的模块
2021/05/12 Python
Python OpenCV实现传统图片格式与base64转换
2021/06/13 Python
Python如何解决secure_filename对中文不支持问题
2021/07/16 Python
JavaScript原型链详解
2021/11/07 Javascript