jquery.boxy弹出框(后隔N秒后自动隐藏/自动跳转)

 更新时间:2013年01月15日 15:46:19   作者:  
对于 Boxy弹出框的使用之前写过一些文章(查看jquery.boxy基础),今天主要是在解决一个需要之后,觉得值得把它记录下来,所以就再写一篇,主要功能是,在弹出对话框后,隔N秒后自动隐藏,还有就是自动跳转
对于 Boxy弹出框的使用之前写过一些文章(查看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也应该遵循面向对象的原则呀,呵呵!

相关文章

  • jquery实现marquee效果(文字或者图片的水平垂直滚动)

    jquery实现marquee效果(文字或者图片的水平垂直滚动)

    原本在前端html代码中,实现文字或者图片的水平垂直滚动,都是使用的marquee,但随着考虑浏览器的兼容性和符合为w3c的标准,接下来介绍使用Jquery实现网页marquee效果,感兴趣的朋友可以了解下哦
    2013-01-01
  • hover的用法及live的用法介绍(鼠标悬停效果)

    hover的用法及live的用法介绍(鼠标悬停效果)

    hover属性在书写css时大家都不会陌生了吧live主要用于对动态加载出来的元素绑定事件,下来将为大家详细介绍下两者的使用,感兴趣的朋友可不要错过了哈
    2013-03-03
  • Jquery使用AJAX方法请求数据

    Jquery使用AJAX方法请求数据

    本文详细讲解了Jquery使用AJAX方法请求数据,文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-05-05
  • jQuery动态添加元素无法触发绑定事件的解决方法分析

    jQuery动态添加元素无法触发绑定事件的解决方法分析

    这篇文章主要介绍了jQuery动态添加元素无法触发绑定事件的解决方法,结合实例形式分析了动态添加元素无法绑定事件的原因与相关解决方法,需要的朋友可以参考下
    2018-01-01
  • jquery EasyUI的formatter格式化函数代码

    jquery EasyUI的formatter格式化函数代码

    以下实例格式化数据表格中的一列。如果金额小于20时使用自定义的格式器将文本变成红色。
    2011-01-01
  • JQuery中的常用事件、对象属性与使用方法分析

    JQuery中的常用事件、对象属性与使用方法分析

    这篇文章主要介绍了JQuery中的常用事件、对象属性与使用方法,结合实例形式分析了jquery事件、对象属性、方法相关使用技巧,需要的朋友可以参考下
    2019-12-12
  • jquery对table做排序操作的实例演示

    jquery对table做排序操作的实例演示

    这篇文章主要介绍了jquery对table做排序操作的实例演示,通过添加自定义属性data-sort-field-ftime及表头添加onchange事件详细讲解了操作过程,需要的朋友可以参考下
    2017-08-08
  • jquery获取元素值的方法(常见的表单元素)

    jquery获取元素值的方法(常见的表单元素)

    获取元素值的方法有很多,在本文将为大家详细介绍下使用jquery是如何做到的,感兴趣的朋友不要错过
    2013-11-11
  • JQuery实现页面弹出框

    JQuery实现页面弹出框

    这篇文章主要为大家详细介绍了JQuery实现页面弹出框,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-02-02
  • checkbox使用示例

    checkbox使用示例

    checkbox想必大家对这个控件并不陌生吧,毕竟在网页制作过程中经常会使用到,下面与大家分享个示例主要介绍checkbox的使用,感兴趣的朋友可以参考下
    2013-08-08

最新评论