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代码
Dec 09 Javascript
js Dialog 实践分享
Oct 22 Javascript
js中判断用户输入的值是否为空的简单实例
Dec 23 Javascript
JS文本获得焦点清除文本文字的示例代码
Jan 13 Javascript
node.js从数据库获取数据
May 08 Javascript
Node.js环境下编写爬虫爬取维基百科内容的实例分享
Jun 12 Javascript
js如何判断是否在iframe中及防止网页被别站用iframe嵌套
Jan 11 Javascript
js Dom实现换肤效果
Oct 21 Javascript
vue 实现类似淘宝星级评分的示例
Mar 01 Javascript
快速解决select2在bootstrap模态框中下拉框隐藏的问题
Aug 10 Javascript
Vue中 v-if 和v-else-if页面加载出现闪现的问题及解决方法
Oct 12 Javascript
深入浅析Vue中mixin和extend的区别和使用场景
Aug 01 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
学习使用curl采集curl使用方法
2012/01/11 PHP
解析php根据ip查询所在地区(非常有用,赶集网就用到)
2013/07/01 PHP
ThinkPHP之R方法实例详解
2014/06/20 PHP
搭建基于Docker的PHP开发环境的详细教程
2015/07/01 PHP
php中的异常和错误浅析
2017/05/03 PHP
PHP实现简易用户登录系统
2020/07/10 PHP
图片自动更新(说明)
2006/10/02 Javascript
AngularJS基础知识笔记之表格
2015/05/10 Javascript
深入理解js函数的作用域与this指向
2016/05/28 Javascript
jQuery事件处理的特征(事件命名机制)
2016/08/23 Javascript
详解JavaScript树结构
2017/01/09 Javascript
React根据宽度自适应高度的示例代码
2017/10/11 Javascript
vue.js,ajax渲染页面的实例
2018/02/11 Javascript
关于ES6箭头函数中的this问题
2018/02/27 Javascript
深度了解vue.js中hooks的相关知识
2019/06/14 Javascript
Vue多环境代理配置方法思路详解
2019/06/21 Javascript
JavaScript实现浏览器网页自动滚动并点击的示例代码
2020/12/05 Javascript
[02:43]DOTA2英雄基础教程 半人马战行者
2014/01/13 DOTA
python+mysql实现简单的web程序
2014/09/11 Python
浅述python中argsort()函数的实例用法
2017/03/30 Python
python实现unicode转中文及转换默认编码的方法
2017/04/29 Python
python探索之BaseHTTPServer-实现Web服务器介绍
2017/10/28 Python
Python基于jieba库进行简单分词及词云功能实现方法
2018/06/16 Python
python中文编码与json中文输出问题详解
2018/08/24 Python
Python 70行代码实现简单算式计算器解析
2019/08/30 Python
完美解决Django2.0中models下的ForeignKey()问题
2020/05/19 Python
python GUI模拟实现计算器
2020/06/22 Python
Python定时任务框架APScheduler原理及常用代码
2020/10/05 Python
python3从网络摄像机解析mjpeg http流的示例
2020/11/13 Python
CSS3制作苹果风格键盘特效
2015/02/26 HTML / CSS
荷兰在线啤酒店:Beerwulf
2019/08/26 全球购物
《听鱼说话》教学反思
2014/02/15 职场文书
体育课课后反思
2014/04/24 职场文书
教师暑期培训感言
2014/08/15 职场文书
主持稿开场白
2015/06/01 职场文书
同学聚会致辞集锦
2015/07/28 职场文书