子比主题美化系列(十一):日夜间模式切换小提示

前言

切日/夜间模式会有一个提示,换用jQuery+Layer.js实现

效果展示

image-20230709170644826

使用教程

1、调用Layer.js

  • Layer.js是一个非常优秀的弹层组件,看自己是否已经调用了Layer组件
    • 办法:先别调用下面的Layer.js,看直接使用第二步的代码能否使用,若无法使用就证明没有调用Layer
    • 自己把下面的代码添加到zibll主题>自定义代码>自定义头部HTML代码
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/layui/2.6.8/layui.min.js"></script>

2、使用jQuery代码

添加jQuery代码到zibll主题>自定义代码>自定义javascript代码

// 日/夜间模式切换小提示
$(".toggle-theme").click(function() {
    // 延迟几毫米,防止dark-theme类没有反应过来
    var toggleWiuiYJ = setTimeout(function() {
        var toggleThemeText = "当前为日间模式";
        if ($("body").is('.dark-theme')) {
            toggleThemeText = "当前为夜间模式";
            $("body").css("background-image", "none");
        }
        layer.msg(toggleThemeText, {
            time: 2000,
            anim: 1
        });
    }, 100);
});
THE END
喜欢就支持一下吧
点赞13 分享
评论 抢沙发
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

取消
昵称表情代码图片

    暂无评论内容