JS 实现 Typecho 后台提醒样式

需求

其实这个功能是因为我要给我的 Accessories 的操作加个操作结果提醒。

代码

代码是直接从Typecho源码里扣的。
把下面的代码放到你的JS里。

/** 消息提醒 来自 Typecho common-js.php */
function notice(noticeText, noticeType) {
    var head = $('.typecho-head-nav'),
        p = $('<div class="message popup ' + noticeType + '">'
        + '<ul><li>' + noticeText + '</li></ul></div>'), offset = 0;

    if (head.length > 0) {
        p.insertAfter(head);
        offset = head.outerHeight();
    } else {
        p.prependTo(document.body);
    }
    function checkScroll () {
        if ($(window).scrollTop() >= offset) {
            p.css({
                'position'  :   'fixed',
                'top'       :   0
            });
        } else {
            p.css({
                'position'  :   'absolute',
                'top'       :   offset
            });
        }
    }

    $(window).scroll(function () {
        checkScroll();
    });

    checkScroll();

    p.slideDown(function () {
        var t = $(this), color = '#C6D880';

        if (t.hasClass('error')) {
            color = '#FBC2C4';
        } else if (t.hasClass('notice')) {
            color = '#FFD324';
        }

        t.effect('highlight', {color : color})
            .delay(5000).fadeOut(function () {
            $(this).remove();
        });
    });
}

在需要的地方调用一下

notice('啥也没干', 'success');
notice('你好坏坏', 'error');

预览