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 相关文章推荐
复制本贴标题和地址的js代码
Jul 01 Javascript
FF IE兼容性的修改小结
Sep 02 Javascript
jQuery写的日历(包括日历的样式及功能)
Apr 23 Javascript
提取jquery的ready()方法单独使用示例
Mar 25 Javascript
利用JavaScript脚本实现滚屏效果的方法
Jul 07 Javascript
jQuery中的ready函数与window.onload谁先执行
Jun 21 Javascript
jQuery实现滚动条滚动到子元素位置(方便定位)
Jan 08 Javascript
jQuery插件FusionWidgets实现的AngularGauge图效果示例【附demo源码】
Mar 23 jQuery
AngularJS实现自定义指令与控制器数据交互的方法示例
Jun 19 Javascript
js中call()和apply()改变指针问题的讲解
Jan 17 Javascript
jquery实现的放大镜效果示例
Feb 24 jQuery
前端使用crypto.js进行加密的函数代码
Aug 16 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下删除字符串中HTML标签的函数
2008/08/27 PHP
域名和cookie问题(域名后缀)
2012/10/10 PHP
PHP模拟post提交数据方法汇总
2016/02/16 PHP
禁止JQuery中的load方法装载IE缓存中文件的方法
2009/09/11 Javascript
Javascript处理DOM元素事件实现代码
2012/05/23 Javascript
同一个网页中实现多个JavaScript特效的方法
2015/02/02 Javascript
jQuery定义背景动态切换效果的方法
2015/03/23 Javascript
详解JavaScript中的表单验证
2015/06/16 Javascript
js判断手机端(Android手机还是iPhone手机)
2015/07/22 Javascript
常用js,css文件统一加载方法(推荐) 并在加载之后调用回调函数
2016/09/23 Javascript
JavaScript实现页面定时刷新(定时器,meta)
2016/10/12 Javascript
详解利用exif.js解决ios手机上传竖拍照片旋转90度问题
2016/11/04 Javascript
node.js报错:Cannot find module 'ejs'的解决办法
2016/12/14 Javascript
JS异步文件分片断点上传的实现思路
2016/12/25 Javascript
Vue.js父与子组件之间传参示例
2017/02/28 Javascript
基于JS代码实现简单易用的倒计时 x 天 x 时 x 分 x 秒效果
2017/07/13 Javascript
Chrome调试折腾记之JS断点调试技巧
2017/09/11 Javascript
关于vue v-for循环解决img标签的src动态绑定问题
2018/09/18 Javascript
使用VUE+iView+.Net Core上传图片的方法示例
2019/01/04 Javascript
JavaScript enum枚举类型定义及使用方法
2020/05/15 Javascript
jQuery 添加元素和删除元素的方法
2020/07/15 jQuery
返回上一个url并刷新界面的js代码
2020/09/12 Javascript
vue任意关系组件通信与跨组件监听状态vue-communication
2020/10/18 Javascript
python字符串连接方式汇总
2014/08/21 Python
python实现中文输出的两种方法
2015/05/09 Python
python里使用正则的findall函数的实例详解
2017/10/19 Python
Python操作MySQL数据库的方法
2018/06/20 Python
Python os.access()用法实例
2019/02/18 Python
完美解决python针对hdfs上传和下载的问题
2020/06/05 Python
Python+Dlib+Opencv实现人脸采集并表情判别功能的代码
2020/07/01 Python
HTML5 新标签全部总汇(推荐)
2016/06/13 HTML / CSS
Office DEPOT法国官网:欧迪办公用品采购
2018/01/03 全球购物
美国NBA官方商店:NBA Store
2019/04/12 全球购物
求职意向书范本
2015/05/11 职场文书
该怎么书写道歉信?
2019/07/03 职场文书
分享几个JavaScript运算符的使用技巧
2021/04/24 Javascript