【码】JS消息弹框[Semantic UI]

代码来源：自己整理编写
说明：没有找到Semantic UI的JS通知弹框的插件，就自己写了一个。值得注意的是，这个只适用于Semantic UI

//JavaScript部分
(function(core) {

    if (!window.jQuery) {
        throw new Error( "UIkit requires jQuery" );
    }

    if (window && window.jQuery) {
        window.Amanage = core(window.jQuery);
    }

})(function($){
    "use strict";
    var containers = {},
        messages   = {},
        UI={},
        notify     =  function(options){
            if ($.type(options) == 'string') {
                options = { message: options };
            }
            if (arguments[1]) {
                options = $.extend(options, $.type(arguments[1]) == 'string' ? {status:arguments[1]} : arguments[1]);
            }
            return (new Message(options)).show();
        },
        closeAll  = function(group, instantly){
            var id;
            if (group) {
                for(id in messages) { if(group===messages[id].group) messages[id].close(instantly); }
            } else {
                for(id in messages) { messages[id].close(instantly); }
            }
        };

    var uid = function(prefix) {
        return (prefix || 'id') + (new Date().getTime())+"RAND"+(Math.ceil(Math.random() * 100000));
    };

    var Message = function(options){

        this.options = $.extend({}, Message.defaults, options);

        this.uuid    = uid("notifymsg");

        if( this.options.icon ){
            var template = [
                '<div class="ui icon compact message">',
                '<i class="'+this.options.icon+' icon"></i>',
                '<i class="close icon"></i>',
                '<div class="content"></div>',
                '</div>'
            ].join('');
        }else{
            var template = [
                '<div class="ui icon compact message">',
                '<i class="close icon"></i>',
                '<div class="content"></div>',
                '</div>'
            ].join('');
        }

        this.element = $(template).data("notifyMessage", this);

        this.content(this.options.message);

        // status
        if (this.options.status) {
            this.element.addClass(this.options.status);
            this.currentstatus = this.options.status;
        }

        this.group = this.options.group;

        messages[this.uuid] = this;

        if(!containers[this.options.pos]) {
            containers[this.options.pos] = $('<div class="ui uk"></div>').appendTo('body').on("click", ".ui.message", function(){
                var message = $(this).data("notifyMessage");
                message.close();
            });
        }
    };

    $.extend(Message.prototype, {

        uuid: false,
        element: false,
        timout: false,
        currentstatus: "",
        group: false,

        show: function() {

            if (this.element.is(":visible")) return;

            var $this = this;

            containers[this.options.pos].show().prepend(this.element);

            var marginbottom = parseInt(this.element.css("margin-bottom"), 10);

            this.element.css({"opacity":0, "margin-top": -1*this.element.outerHeight(), "margin-bottom":0}).animate({"opacity":1, "margin-top": 0, "margin-bottom":marginbottom}, function(){

                if ($this.options.timeout) {

                    var closefn = function(){ $this.close(); };

                    $this.timeout = setTimeout(closefn, $this.options.timeout);

                    $this.element.hover(
                        function() { clearTimeout($this.timeout); },
                        function() { $this.timeout = setTimeout(closefn, $this.options.timeout);  }
                    );
                }

            });

            return this;
        },

        close: function(instantly) {

            var $this    = this,
                finalize = function(){
                    $this.element.remove();

                    if (!containers[$this.options.pos].children().length) {
                        containers[$this.options.pos].hide();
                    }

                    $this.options.onClose.apply($this, []);

                    delete messages[$this.uuid];
                };

            if (this.timeout) clearTimeout(this.timeout);

            if (instantly) {
                finalize();
            } else {
                this.element.animate({"opacity":0, "margin-top": -1* this.element.outerHeight(), "margin-bottom":0}, function(){
                    finalize();
                });
            }
        },

        content: function(html){

            var container = this.element.find(">div");

            if(!html) {
                return container.html();
            }

            if( this.options.title ){
                html = "<div class='header'>"+this.options.title+"</div>"+html;
            }

            container.html(html);

            return this;
        },

        status: function(status) {

            if (!status) {
                return this.currentstatus;
            }

            this.element.removeClass(this.currentstatus).addClass(status);

            this.currentstatus = status;

            return this;
        }
    });

    Message.defaults = {
        message: "",
        status: "",
        timeout: 5000,
        group: null,
        pos: 'top-center', //当前配置尚未支持
        onClose: function() {}
    };

    UI.notify          = notify;
    UI.notify.message  = Message;
    UI.notify.closeAll = closeAll;
    return UI;
});

//使用示例
Amanage.notify("这是消息",{status:'success',timeout:2000,icon:'inbox',title:'这是标题'});

//CSS部分
.ui.uk {
    position: fixed;
    top: 10px;
    z-index: 1040;
    left: 50%;
    margin-left: -200px;
    width: 400px;
}

注意：这个弹框插件依赖于Jquery！

本文由 陌上花开 创作，采用 知识共享署名4.0 国际许可协议进行许可
本站文章除注明转载/出处外，均为本站原创或翻译，转载前请务必署名
最后编辑时间为: Jul 1, 2016 at 06:21 am