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 相关文章推荐
High Performance JavaScript(高性能JavaScript)读书笔记分析
May 05 Javascript
Bootstrap被封装的弹层
Jul 20 Javascript
Javascript获取background属性中url的值
Oct 17 Javascript
seajs模块之间依赖的加载以及模块的执行
Oct 21 Javascript
Vue.js项目中管理每个页面的头部标签的两种方法
Jun 25 Javascript
详解JavaScript中操作符和表达式
Sep 12 Javascript
bootstrap与pagehelper实现分页效果
Dec 29 Javascript
微信小程序webview 脚手架使用详解
Jul 22 Javascript
Vue开发环境中修改端口号的实现方法
Aug 15 Javascript
vue项目从node8.x升级到12.x后的问题解决
Oct 25 Javascript
vue中keep-alive内置组件缓存的实例代码
Apr 16 Javascript
JavaScript 实现自己的安卓手机自动化工具脚本(推荐)
May 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
FCKeditor添加自定义按钮
2008/03/27 PHP
php 3行代码的分页算法(求起始页和结束页)
2009/10/21 PHP
Linux下将excel数据导入到mssql数据库中的方法
2010/02/08 PHP
PHP实现图片的等比缩放和Logo水印功能示例
2017/05/04 PHP
JS日历 推荐
2006/12/03 Javascript
JavaScript基础语法让人疑惑的地方小结
2012/05/23 Javascript
javascript中的startWith和endWith的几种实现方法
2013/05/07 Javascript
非html5实现js版弹球游戏示例代码
2013/09/22 Javascript
ext前台接收action传过来的json数据示例
2014/06/17 Javascript
JavaScript实现同步于本地时间的动态时间显示方法
2015/02/02 Javascript
基于BootStrap Metronic开发框架经验小结【一】框架总览及菜单模块的处理
2016/05/12 Javascript
JavaScript mixin实现多继承的方法详解
2017/03/30 Javascript
详解原生js实现offset方法
2017/06/15 Javascript
微信小程序picker组件两列关联使用方式
2020/10/27 Javascript
[13:18]《一刀刀一天》之DOTA全时刻21:详解TI新赛制 A队再露獠牙
2014/06/24 DOTA
[02:26]2016国际邀请赛8月3日开战 中国军团出征西雅图
2016/08/02 DOTA
Python实现抓取页面上链接的简单爬虫分享
2015/01/21 Python
Python MySQL数据库连接池组件pymysqlpool详解
2017/07/07 Python
pip install urllib2不能安装的解决方法
2018/06/12 Python
Python使用itertools模块实现排列组合功能示例
2018/07/02 Python
CentOS7下python3.7.0安装教程
2018/07/30 Python
Python定时发送消息的脚本:每天跟你女朋友说晚安
2018/10/21 Python
django多对多表的创建,级联删除及手动创建第三张表
2019/07/25 Python
Python编程快速上手——选择性拷贝操作案例分析
2020/02/28 Python
HTML5的结构和语义(3):语义性的块级元素
2008/10/17 HTML / CSS
美国一家主打母婴用品的团购网站:zulily
2017/09/19 全球购物
印度网上药店:1mg
2017/10/13 全球购物
英国计算机产品零售商:Novatech(定制个人电脑、笔记本电脑、工作站和服务器)
2018/01/28 全球购物
中医临床专业自我鉴定范文
2014/01/15 职场文书
施工安全责任书
2014/04/14 职场文书
创先争优公开承诺书
2014/08/30 职场文书
机关单位2016年创先争优活动总结
2016/04/05 职场文书
SQL Server 数据库实验课第五周——常用查询条件
2021/04/05 SQL Server
Redis IP地址的绑定的实现
2021/05/08 Redis
mybatis 获取无数据的字段不显示的问题
2021/07/15 Java/Android
关于JavaScript 中 if包含逗号表达式
2021/11/27 Javascript