Fusion app使用JS简单添加夜间模式

原创 言午菌  2018-07-26 14:05:44  阅读 3987 次 评论 3 条
摘要:

最近在使用Fusion app的时候,发现自带的没有夜间模式,但是需要用到这个功能,于是就顺手胡乱添加了个夜间模式,思路是直接使用jquery的cookie插件来写入持久化cookie,并且在加载页面的时候做判断,若是有cookie存在,则开启夜间模式,若是不存在则不开启夜间模式。不多说,直接上代码。1、添加JS在说有页面的通用模板上,比如头部/脚部模板上,加上代码<script src="/mskin/js/jquery.min.js" type=


最近在使用Fusion app的时候,发现自带的没有夜间模式,但是需要用到这个功能,于是就顺手胡乱添加了个夜间模式,思路是直接使用jquery的cookie插件来写入持久化cookie,并且在加载页面的时候做判断,若是有cookie存在,则开启夜间模式,若是不存在则不开启夜间模式。

不多说,直接上代码。

1、添加JS

在说有页面的通用模板上,比如头部/脚部模板上,加上代码

<script src="/mskin/js/jquery.min.js" type="text/javascript"></script>
<script src="/mskin/js/jquery.cookie.js" type="text/javascript"></script>
<script type="text/javascript">
        //<![CDATA[
        $(function(){
            var cookie_Nightmode = $.cookie( "Nightmode");
            if (cookie_Nightmode>0) {
                cover(brightness = cookie_Nightmode/10);
            }
        });
        function Nightmode_switch(size){
                var Nightmode = $.cookie( "Nightmode");
            if (Nightmode>0) {
                $.cookie( "Nightmode" , null , {path: "/"});
                cover(brightness = 0); //关闭夜间模式
                } else {
                $.cookie( "Nightmode" , size , {expires: 365,path: "/" });
                cover(brightness = $.cookie( "Nightmode")/10); //开启夜间模式
                }
        }
        function cover(brightness) {
            if (typeof(div) == 'undefined') {
                div = document.createElement('div');
                div.setAttribute('style', 'position:fixed;top:0;left:0;outline:5000px solid;z-index:99999;');
                document.body.appendChild(div);
            } else {
                div.style.display = '';
            }
            div.style.outlineColor = 'rgba(0,0,0,' + brightness + ')';
        }
        //]]>
</script>


2、给Fusion app的应用添加夜间开关

在你想要的夜间模式开关的地方添加一个按钮,在“设置项目点击事件”里头添加:

加载Js("Nightmode_switch(size)") //size是数字,1~9,代表亮度
刷新网页()   //可选,在选择了[网页沉浸]选项后,因为Fusion app需要在刷新网页后才会自动沉浸。


3、开启[网页沉浸](可选)

主要是对于应用组件是亮色系的情况下,开启夜间模式跟随网页自动变色,对于暗色系应用组件的可以无视。

直接工程编辑中,配置页面的[网页沉浸]打开。


4、运行


OK,完成。


图片.png

本文地址:https://blog.fanlibei.com/post/27.html
版权声明:本文为原创文章,版权归 言午菌 所有,欢迎分享本文,转载请保留出处!

发表评论

评论列表

  1. 头条
    头条 Windows 7 Google Chrome 63.0.3239.132  @回复

    文章不错非常喜欢

  2. 女装品牌
    女装品牌 Windows 7 Google Chrome 63.0.3239.132  @回复

    文章不错非常喜欢

  3. 新闻
    新闻 Windows 7 Baidu Browser 8.7  @回复

    文章不错非常喜欢