专栏首页owentJQuery扩展插件--提示信息

JQuery扩展插件--提示信息

学校做项目顺便写的,还是有点用的。

/***
 * JQuery扩展插件--提示信息
 *
 * 本函数用于创建提示信息
 *
 * Example
 * <code>
 *      var t = $.noticeMessage(msg, a, b);
 * </code>
 *
 *
 * function noticeMessage([msg, a,b])
 * @Param  {
 *      msg:    信息内容(默认: Notice Message!)
 *      a:      配置选项({expire: 过期时间(默认5秒), time: 过渡时间, from: {起始CSS样式}, to:{最终CSS样式}})
 *      b:      回调函数
 * }
 * @Return {jQuery(msgDiv): 产生的信息DOM组件的jQuery容器}
 *
 *
 * Example:
 * <code>
 *      var t = $.noticeMessage("Hello World!");
 * </code>
 *
 *
 * @Author      OWenT
 * @Version     1.0
 * @Link        http://www.owent.net
 */
jQuery.extend({
    noticeMessage: function (msg, a, b) {
        msg = msg || "Notice Message!";
        var option = { "expire": 5000, "time": 500,
            "from": { "background-color": "LightGreen", "opacity": "0", "position": "fixed", "bottom": "0px", "z-index": "1000",
                "font-size": "24px", "color": "DarkGreen", "padding": "3px", "font-weight": "bold"
            },
            "to": { "opacity": "1", "bottom": "+5px" }
        };
        var callback = function () { };
        if (a && jQuery.isFunction(a))
            callback = a;
        else {
            a = a || {};
            jQuery.extend(option, a);
            callback = b || function () { };
        }

        var msgDiv = document.createElement("div");

        jQuery(msgDiv).css(option.from).html(msg);
        jQuery(document.body).append(msgDiv);
        jQuery(msgDiv).stop().animate(option.to, option.time, callback);
        if (option.expire > 0) {
            setTimeout(function () {
                if (msgDiv) {
                    jQuery(msgDiv).stop().animate({ "opacity": "0", "bottom": "-5px" }, option.time,
                        function () { callback(); jQuery(this).remove(); });
                }
            }, option.expire);
        }
        return jQuery(msgDiv);
    }
});

写在最后补充一下,这个动机基本没什么用了

以后会抽业余时间写个Metro风格的网页库

https://github.com/owt5008137/SimpleMetro

这个目前已经有东西完胜上面的代码了,就此别过

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • POJ PKU 2155 Matrix 解题报告

    题目链接:http://acm.pku.edu.cn/JudgeOnline/problem?id=2155

    owent
  • std和boost的function与bind实现剖析

    用过std和boost的function对象和bind函数的童鞋们都知道这玩意用起来腰不酸了,腿不疼了,心情也舒畅了。先上一个简单得示例:

    owent
  • 树状数组模块(个人模板)

    owent
  • laravel框架实现敏感词汇过滤功能示例

    本文实例讲述了laravel框架实现敏感词汇过滤功能。分享给大家供大家参考,具体如下:

    砸漏
  • TensorFlow2.0 实战强化专栏(二):CIFAR-10项目

    Alex Krizhevsky,Vinod Nair和Geoffrey Hinton收集了8000万个小尺寸图像数据集,CIFAR-10和CIFAR-100分别...

    磐创AI
  • 这10大趋势,决定了云数据中心的未来市场

    1. 按需访问   云数据中心主要用于存储信息并提供灾难恢复功能。但是,随着移动应用和物联网(IoT)等新技术的发展,按需访问的需求也在不断增长。...

    BestSDK
  • 腾讯云服务器怎么购买(领取腾讯云优惠券)

    现在购买腾讯云服务器的用户越来越多了,毕竟云服务器已经是广大站长和企业做网站的首选,而腾讯云服务器,依靠腾讯的强大技术支撑,在市场上广受好评,那么腾讯云服务器如...

    主机优惠教程
  • 把头像图片以二进制形式保存到数据库(Hibernate实现)

    我们把头像直接保存到数据库,而不是保存一个地址。 使用Hibernate自动创建表方式,数据库photo字段的数据类型是CLOB,这是针对MySQL,其他数据库...

    Dunizb
  • 2020年数据中心运维的三大趋势

    AI技术及超级计算机在医疗领域的应用,在武汉新型冠状病毒基因测试系列和药品筛查方面,发挥了非常重要的作用。作为这些前沿技术和设备的支撑中心,数据中心基础设施的安...

    james_008
  • SpringMVC 简单限流方案设计

    限流的目的是通过对并发访问/请求进行限速,或者对一个时间窗口内的请求进行限速来保护系统,一旦达到限制速率则可以拒绝服务、排队或等待、降级等处理。

    JMCui

扫码关注云+社区

领取腾讯云代金券