前言
用jQuery+Layer.js实现的一个主题切换小提示,懒得弄花里胡哨的了,随便水一篇文章,不收录到子比主题教程里面了。
食用教程
第一步:调用Layer.js
Layer.js是一个非常优秀的弹层组件,看自己是否已经调用了Layer组件(办法:先别调用下面的Layer.js,看直接使用第二步的代码能否使用,若无法使用就证明没有调用Layer,自己把下面的代码放到主题里【自定义头部HTML代码】)
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/layui/2.6.8/layui.min.js"></script>
第二步:jQuery代码
把下面的jQuery代码放到主题设置的【自定义javascript代码】就大功告成啦!
// 夜间切换-不能和《子比主题自适应PC/手机端背景+背景图片切换》一起使用
$(".toggle-theme").click(function() {
// 延迟几毫米,防止dark-theme类没有反应过来
var toggleZrYJ = setTimeout(function() {
var toggleThemeText = "当前为日间模式";
if ($("body").is('.dark-theme')) {
toggleThemeText = "当前为夜间模式";
$("body").css("background-image", "none");
}
layer.msg(toggleThemeText, {
time: 2000,
anim: 1
});
}, 100);
});
【注意】不能和网上的《子比主题自适应PC/手机端背景+背景图片切换》文章一起使用,会出现JS代码冲突和冗余,《子比主题自适应PC/手机端背景+背景图片切换》中的JS代码根据上面代码演化而来的,不要一股脑的添加代码。
效果
© 版权声明
网站内容来源于网络,如有侵权,请联系我们,我们将及时处理。
分享是一种美德,当你分享时请你附带上本文链接。
分享是一种美德,当你分享时请你附带上本文链接。
THE END
请登录后查看评论内容