介绍

介绍

前面福哥已经把之前在微信公众号里删除掉的文章全部都重新发布出来了，这算是续上了！这让很多老朋友看了两个月的旧内容，福哥实在是不好意思啊，权当是温故而知新吧！技术这东西不怕重复劳动，重复的次数多了，就找到窍门了，然后就水平就提高了！

今天福哥打算给大家放出一个常用的前端控件——消息提示框tips。我们在操作网站的时候，尤其是填写功能表单的时候，如果操作不当网站就会弹出一个消息提示框，里面是一则短消息告知我们哪里出错了，然后几秒钟后这个消息提示框会自动消失掉，这种消息提示框就是tips，它是一种JQ特效。

JQ的tips控件

关于tips控件的代码网上一搜一大堆，福哥给出一个自己写的代码，大家可以了解一下tips控件的开发技巧。

JavaScript

(function ($) {
    var a = {
        b: null, 
        c: null, 
        d: null, 
        start: function () {
            var ex = this;
            $('.tfhtml-tips').remove();
            c = $(document.createElement('div'));
            c.addClass('tfhtml-tips');
            if (this.d.class) {
                c.addClass(this.d.class);
            }
            if (this.d.styles && this.d.styles instanceof Object) {
                c.css(this.d.styles);
            }
            c.appendTo(this.b);
            c.text(this.d.text);
            c.css({marginLeft: -1 * (c.width() / 2)});
            setTimeout(function () {
                ex.stop();
            }, this.d.timeout);
        }, 
        stop: function () {
            c.remove();
        }, 
        init: function (b, d) {
            if (!d instanceof Object) {
                d = {};
            }
            if (!d.timeout) {
                d.timeout = 1500;
            }
            this.b = $(b);
            this.d = d;
        }
    };
    a.init.prototype = a;
    $.fn.tips = function (e) {
        var f = new a.init(this, e);
        f.start();
        return f;
    };
})(jQuery);

前端调用

JavaScript

整个网页居中

$(document.body).tips({
    text:"福哥真帅"
});

表单居中

$('form.login').tips({
    text:"福哥加油"
});

讲解

JQ的tips控件

这个tips控件的程序有几个难点：

• 显示消息提示框的位置一定是上下左右居中的，但是通过css不能满足这个需求，所以福哥这里提供js代码动态计算了消息提示框的margin-left样式的值，使其在父元素的水平中间位置。

• 消息提示框几秒钟后会自动消息，这里势必会用到定时器，也就是setTimeout这个内建函数。但是setTimeout的回调函数无法获得动态创建消息提示框的句柄，怎么办？这里福哥使用了一个ex=this的设计，将对象自身赋值给ex这个变量，因为使用了var声明，那么ex在生命周期结束也不会释放掉，这种处理技巧在JS程序给回调函数传值的时候用的很普遍。

• 为了规范tips的样式，福哥默认设置了一个tfhtml-tips的样式。不过，实际使用情况下，会有不同颜色的tips用来表示不同情况的消息，这时候福哥通过参数设置了class和styles，可以实现为每一个tips实例设置不同的样式。

总结

这个tips还是非常简单的，大家应该很容易看懂。基本上可以满足我们的TFUMS系统的需要了，如果童鞋们有什么建议可以给福哥留言，我们一起改进它。

这里福哥将代码进行了一定程度的混淆，之前已经说过了，尊重他人的劳动是一种美德，感谢童鞋们的理解~~