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 条评论
登录 后参与评论

相关文章

来自专栏谈补锅

JS DOM学习笔记

2、使用window对象的属性、方法的时候可以省略window。例如:window.alert("hello")一般写成alert("hello"); wind...

22040
来自专栏Google Dart

AngularDart Material Design 选项卡 顶

注意:为了获得高质量的用户体验,选项卡条的用户必须将焦点设置为新显示的内容,以便1)选项卡不保留焦点样式,2)屏幕阅读器可以计算已更改的内容。

12920
来自专栏极客编程

React快速入门

React是Facebook开源的一个用于构建用户界面的Javascript库,已经 应用于Facebook及旗下Instagram。

21010
来自专栏大数据钻研

DIV+CSS初学者需重视的10个简单问题与技巧

DIVCSS初学者往往感觉自己遇到很多莫明其妙的问题,其实只是一些小细节没有引起重视,下面罗列了10个问题与技巧,温故而知新。 一、检查HTML元素是否有拼写错...

27770
来自专栏Python研发

HTML

一个完整的网页是由HTML(超文本标记语言),css(层叠样式表)JavaScript(动态脚本语言)三部分组成.

66420
来自专栏从零开始学 Web 前端

从零开始学 Web 之 BOM(二)定时器

多次点击“摇起来”按钮的时候,timeId 的值会有多个,而停止的时候,只会清理最后一个值,其他的值对应的定时器没有清理。

11410
来自专栏flutter开发者

[Flutter Widget] Wrap

在前面的文章中我们讲了很多Widget的用法,包括简单的Widget和复杂一点的布局,其实归根到底都是为了解决我们在界面布局上的需求,最近很多童鞋私信我Flut...

75550
来自专栏黑泽君的专栏

Java中菜单组件

38030
来自专栏九彩拼盘的叨叨叨

初级 Web 前端核心技能点

9430
来自专栏肖蕾的博客

第十二章:游戏对话框WindowStyleWindow控件

LibGdx提供给我们一个专门处理游戏弹框的控件 - Window控件 API定义:一个构造window控件模板样式,用确定window控件的表现形式, 特...

7820

扫码关注云+社区

领取腾讯云代金券