JS 实现 Typecho 后台提醒样式

Ryan

2020-05-18/0 评论/355 浏览

需求

其实这个功能是因为我要给我的 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,版权所有。本站文章除注明出处外,皆为作者原创文章,可自由引用,但请注明来源。
0 评论
355 浏览
您的大名:
万水千山总是情,给个打赏行不行。 打赏

发表评论

虾米皮皮乐

Ryan

版权申明:收费资源由本站发布,用户购买后只有终端使用权,禁止转售和转载

暂无附件
JS 实现 Typecho 后台提醒样式
05/18
2020
需求其实这个功能是因为我要给我的 Accessories 的操作加个操作结果提醒。代码代码是直...
扫描右侧二维码阅读全文