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处理table表格的代码
Dec 06 Javascript
JSDoc 介绍使用规范JsDoc的使用介绍
Feb 12 Javascript
jQuery获得内容和属性方法及示例
Dec 02 Javascript
基于Bootstrap和jQuery构建前端分页工具实例代码
Nov 23 Javascript
React中ES5与ES6写法的区别总结
Apr 21 Javascript
React-Native之定时器Timer的实现代码
Oct 04 Javascript
bootstrap轮播模板使用方法详解
Nov 17 Javascript
原生JS实现网页手机音乐播放器 歌词同步播放的示例
Feb 02 Javascript
JavaScript中click和onclick本质区别与用法分析
Jun 07 Javascript
微信小程序实现页面下拉刷新和上拉加载功能详解
Dec 03 Javascript
vue组件之间的数据传递方法详解
Apr 19 Javascript
在pycharm中开发vue的方法步骤
Mar 04 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
解析dedecms空间迁移步骤详解
2013/05/15 PHP
PHP实现PDO的mysql数据库操作类
2014/12/12 PHP
PHP数据的提交与过滤基本操作实例详解
2016/11/11 PHP
PHP文件操作详解
2016/12/30 PHP
Javascript下IE与Firefox下的差异兼容写法总结
2010/06/18 Javascript
JavaScript面向对象程序设计三 原型模式(上)
2011/12/21 Javascript
javascript同页面多次调用弹出层具体实例代码
2013/08/16 Javascript
使用jQuery.wechat构建微信WEB应用
2014/10/09 Javascript
使用Plupload实现直接上传附件至七牛云存储
2014/12/26 Javascript
深入讲解AngularJS中的自定义指令的使用
2015/06/18 Javascript
javaScript中的原型解析【推荐】
2016/05/05 Javascript
jQuery实现按钮点击遮罩加载及处理完后恢复的效果
2016/06/07 Javascript
浅谈js里面的InttoStr和StrtoInt
2016/06/14 Javascript
引用jquery框架后出错的解决方法
2016/08/09 Javascript
NodeJS实现微信公众号关注后自动回复功能
2017/05/31 NodeJs
jQuery实现菜单栏导航效果
2017/08/15 jQuery
JS实现图片放大镜插件详解
2017/11/06 Javascript
vue-cli项目优化方法- 缩短首屏加载时间
2018/04/01 Javascript
Angular模版驱动表单的使用总结
2018/05/05 Javascript
Vue.js项目中管理每个页面的头部标签的两种方法
2018/06/25 Javascript
H5+C3+JS实现双人对战五子棋游戏(UI篇)
2020/05/28 Javascript
微信小程序实现分享朋友圈的图片功能示例
2019/01/18 Javascript
vue打包通过image-webpack-loader插件对图片压缩优化操作
2020/11/12 Javascript
Django框架用户注销功能实现方法分析
2019/05/28 Python
Python图像处理之图片文字识别功能(OCR)
2019/07/30 Python
python每天定时运行某程序代码
2019/08/16 Python
opencv-python 提取sift特征并匹配的实例
2019/12/09 Python
Python绘图之柱形图绘制详解
2020/07/28 Python
详解Python中string模块除去Str还剩下什么
2020/11/30 Python
Mio Skincare中文官网:肌肤和身体护理
2016/10/26 全球购物
vue项目实现分页效果
2021/03/24 Vue.js
职称自我鉴定
2013/10/15 职场文书
致全体运动员广播稿
2014/02/01 职场文书
2014年迎新年联欢会活动策划方案
2014/02/26 职场文书
房屋租赁协议书(标准版)
2014/10/02 职场文书
详解Python中下划线的5种含义
2021/07/15 Python