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

2014-11-09  来源:本站原创  分类:jquery  人气:5 

对于 Boxy弹出框的使用之前写过一些文章(查看jquery.boxy基础),今天主要是在解决一个需要之后,觉得值得把它记录下来,所以就再写一篇,主要功能是,在弹出对话框后,隔N秒后自动隐藏,还有就是自动跳转

对于 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也应该遵循面向对象的原则呀,呵呵!

相关文章
  • jquery.boxy弹出框(后隔N秒后自动隐藏/自动跳转) 2014-11-09

    对于 Boxy弹出框的使用之前写过一些文章(查看jquery.boxy基础),今天主要是在解决一个需要之后,觉得值得把它记录下来,所以就再写一篇,主要功能是,在弹出对话框后,隔N秒后自动隐藏,还有就是自动跳转 对于 Boxy弹出框的使用之前写过一些文章(查看jquery.boxy基础),今天主要是在解决一个需要之后,觉得值得把它记录下来,所以就再写一篇,主要功能是,在弹出对话框后,隔N秒后自动隐藏,还有就是自动跳转! 效果如图: 而所封装的代码如下: // boxy对话框扩展 var Boxy_

  • 使用jquery制作弹出框效果 2014-07-04

    本文主要是使用jDialog插件实现的弹出框效果,代码十分简介,需要的小伙伴自己参考下吧. 非常不错的国产JS弹出框插件,由前端工程师alien开发,提供多种类型的自定义对话框,使用方法简单,浏览器兼容性好,支持的弹出框模式有: alert:普通提示(警告)对话框 confirm:询问(确认)对话框 message:简单消息对话框(无title.无按钮) iframe:在对话框中嵌入一个iframe tip:带有小三角指向的小tip dialog:最基础的自定义对话框 var jDialogId

  • 基于jQuery的弹出框插件 2014-09-25

    有时候在做项目时,会遇到点击按钮或者文字是,弹出一个对话框,为了方便,自己就动手写了一个这样的一个插件,方便以后使用. html如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/

  • jQuery boxy弹出层插件中文演示及使用讲解 2015-04-19

    要想使用该jQuery插件,需要把$(selector).boxy();放在document.ready中. 使用该jQuery插件 要想使用该jQuery插件,需要把$(selector).boxy();放在document.ready中.使用合适的选择器表达式替换这里的"selector",例如:"a[rel=boxy],form.with-confirmation".这会给匹配的元素附加一些行为,如下: 一个href属性中如果锚点包含#,则此锚点相对应的ID的

  • jQuery boxy弹出层插件中文演示及讲解 2012-12-28

    使用该jQuery插件 要想使用该jQuery插件,需要把$(selector).boxy();放在document.ready中.使用合适的选择器表达式替换这里的"selector",例如:"a[rel=boxy],form.with-confirmation".这会给匹配的元素附加一些行为,如下: 一个href属性中如果锚点包含#,则此锚点相对应的ID的DOM元素的内容就会被添加到boxy对话框中. 如果href锚点内容为其他一些东西,则会试图使用Ajax载入其

  • jQuery zxxbox弹出框插件(v3.0)测试页面 2013-01-07

    源文件下载.zip 16.6k 一.内置弹框 显示最简单的内置的信息确定提示框:点击我 JS代码: $("#test1").click(function(){ $.zxxbox.remind("你已成功受邀参加威尼斯电影节."); }); 带回调函数的信息确认提示框:点击我 JS代码: $("#test2").click(function(){ $.zxxbox.remind('美国驻沪领事馆权威发布:上半年<a href="#n

  • js弹出框轻量级插件jquery.boxy使用介绍 2014-07-29

    今天我介绍一个轻量级的插件 boxy!它可以把美工设计的弹出框很容易的体现出来,而且兼容性还不错,感兴趣的朋友可以了解下 当你需要使用弹出框时,当然可以使用jquery-ui,artdiag,blockUI等等,但今天我介绍一个轻量级的插件 boxy!它可以把美工设计的弹出框很容易的体现出来,而且兼容性还不错! <script type='text/javascript'> $(function() { $('#ask-actuator').click(function() { Boxy.as

  • jquery.alert 弹出式复选框实现代码 2014-03-05

    jquery alert 弹出式 复选框,需要的朋友可以参考下,代码有点乱. //jQuery Alert Dialogs Plugin Version 1.0 //插件下载地址:http://abeautifulsite.net/notebook/87 自身的原方法为: // Usage: // jAlert( message, [title, callback] ) // jConfirm( message, [title, callback] ) // jPrompt( message,

  • boxy基于jquery的弹出层对话框插件扩展应用 弹出层选择器 2014-03-07

    当大家进行复杂功能设计的时候,在对多级联选择进行设计,为了获得更好的用户体验和节省页面空间,往往会使用弹出层的方法. 我们使用热门的jquery进行设计,同时我们选择效果比较优秀的boxy弹出插件进行扩展(关于boxy的相关资料,请参照张鑫旭博客http://www.zhangxinxu.com/wordpress/?p=318).下面介绍boxy作为选择器框架的应用. 对于选择器,相信用过招聘网站的人都不会陌生(就是那个点击就弹出的,选择行业.职位和地区的东西),选择器难点就在于样式调试,主要

  • jQuery+css+html实现页面遮罩弹出框 2014-08-01

    面遮罩弹出框已经不是一个陌生的话题了,实现的方法大同小异多种多样,今天用jQuery实现页面遮罩弹出框,主要用的技术有JQuery,css和html,感兴趣的朋友可以参考下哈 页面遮罩弹出框是最常见的一种情况,今天用jQuery实现页面遮罩弹出框,主要用的技术有JQuery,css和html, html代码如下: <div id="main"><a href="javascript:showBg();">点击这里查看效果</a>

  • JQuery 弹出框定位实现方法 2015-01-10

    这几天一直在研究JQuery,确实很好用,有很多需求都是要弹出框,并且要定位,我这写个简单的例子,希望能分享给大家. 代码: //页面代码 (简化) <asp:TextBox ID="tbOperation2" runat="server" onclick="buttonclick($(this))" CssClass="ui-button-icons-only" Text="按钮"></

  • jQuery弹出框代码封装DialogHelper 2015-02-08

    这篇文章主要介绍了jQuery弹出框代码封装DialogHelper的方法,需要的朋友可以参考下 看了jQueryUI Dialog的例子,效果还不错,就是用起来有点儿别扭,写出的代码有点拧巴,需要再封装一下!于是就有了下面这个简单的DialogHelper辅助类,因为这篇文章分享的重点是思路,所以目前版本的代码也还非常粗糙.思路对了,后续再封装成什么样都不过是形式而已,希望这个思路能给大家点启迪,同时欢迎大家开拓思维,提出更好的改进意见. //require ScrollHelper.js f

  • jquery实现一个简单好用的弹出框 2015-05-04

    这篇文章主要介绍了jquery如何实现的一个简单的弹出框,经测试非常好用,代码简洁,留着以后工作时候再用 自己改写一些jquery的部分代码,自己总结出来一个比较好用的jquery弹出框,留着以后工作时候再用.喜欢就拿走吧! 代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&

  • jquery easyui 弹出消息框 2012-11-01

    <html> <head> <!-- 导入easyui插件的js和css样式; --> <link rel="stylesheet" type="text/css" href="/EasyuiDemo/scripts/jquery-easyui-1.1.1/themes/default/easyui.css"> <link rel="stylesheet" type=&qu

  • 面遮罩弹出框已经不是一个陌生的话题了,实现的方法大同小异多种多样,今天用jQuery实现页面遮罩弹出 2014-08-16

    页面遮罩弹出框是最常见的一种情况,今天用jQuery实现页面遮罩弹出框,主要用的技术有JQuery,css和html, html代码如下: 复制代码代码如下: <div id="main"><a href="javascript:showBg();">点击这里查看效果</a> <div id="fullbg"></div> <div id="dialog">

  • jquery弹出框的用法示例(2) 2014-10-29

    没有关闭按钮,但是点击其他地方的时候,弹出框消失,必须用js给弹出框的父元素加上更高的层次,具体实现如下,感兴趣的朋友可以参考下 第二种情况是关于弹出框,没有关闭按钮,但是点击其他地方的时候,弹出框消失,这个还涉及到一些关于层次问题,必须用js给弹出框的父元素加上更高的层次,以免被下面的内容覆盖. <div class="listBox"> <div class="tit"> <h2>询盘分配</h2> <div

  • jquery弹出框的用法示例(一) 2014-11-11

    最近做一个项目,许多功能都是关于弹出框的,在做的过程中发现会有好多自己考虑不到的问题,下面以一个示例为大家详细介绍下,感兴趣的朋友可以参考下 最近做一个项目,许多功能都是关于弹出框的,以前觉得弹出框就那一种,很容易实现,但是最近真的做起这个功能了,发现会有好多自己考虑不到的问题. 比如关于一些添加,删除,修改的弹出框,当添加一些用户的时候,弹出框里要提交一些关于用户的信息,设置密码等信息,当修改的时候,根据用户的名字和id号来修改密码等等. 例子如下: <ul class="tabPane

  • Jquery 实现弹出层插件 2014-07-08

    这篇文章主要介绍了Jquery 实现弹出层插件,包括遮罩层.插件参数.关闭动作.拖拽效果等,需要的朋友可以参考下 弹出层的应用还是比较多的,登陆,一些同页面的操作,别人的总归是别人的,自己的才是自己的,所以一直以来想写个弹出层插件.不多废话,直接开始吧! 1:遮罩层 要弹出层,先要用一个遮罩层挡在下面的页面,此遮罩层是全屏的,页面滚动也要有,所以设置 position: fixed;还要有透明效果,下面是我定义的遮罩层css,取名mask .mask { position: fixed; wid

  • jQuery 动画弹出窗体支持多种展现方式 2014-07-06

    今天刚写的利用jQuery动画弹出窗体,支持了string.Ajax.iframe.controls四种展现方式,具体细节下面慢慢介绍,先看效果图. 动画效果 从哪个对象上触发的即从该对象开始逐渐向屏幕中间移动,并逐渐展开,展开后里面的显示对象再从上到下慢慢展开.点击关闭时,先将展开的显示的对象慢慢缩回,然后再慢慢移到触发的对象上面. 说的有点绕,我自己都不明白是什么意思,说白了就是从哪儿来回哪儿去. 展现方式 第一种:string 这是最简单最明了的方式,不用多说,就是直接赋值字符串并显示出来

  • 基于jQuery的弹出消息插件 DivAlert之旅(一) 2014-11-07

    这个DivAlert插件,顾名思义就是页面弹出框,也就相当于Winform里面MessageBox.Show()那样的东西. 想着自己学习Javascript,以及Ajax.jQuery等已经有一段时间了,不过貌似还没有写过一个插件,看到jQuery官网上那么多令人眼前一亮的插件,自己今天也动心说是不是能够写一个类似的插件来瞧瞧,了解了jQuery插件的基本格式,理一下基本的思路,动工吧... 这个DivAlert插件,顾名思义就是页面弹出框,也就相当于Winform里面MessageBox.S