Ryan

V2020-05-18

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');

预览

JS 实现 Typecho 后台提醒样式

您的大名:
万水千山总是情,给个打赏行不行。 打赏
文章出自:虾米皮皮乐 https://xiamp.net/archives/js-implementation-of-typecho-background-reminder-style.html,版权所有。本站文章除注明出处外,皆为作者原创文章,可自由引用,但请注明来源。
259
JS 实现 Typecho 后台提醒样式
05/18
date('Y'); ?>
需求其实这个功能是因为我要给我的 Accessories 的操作加个操作结果提醒。代码代码是直...
扫描右侧二维码阅读全文

发表评论