主题配色及保存

顶部导航，logo和侧边栏菜单三个位置都可以调整背景颜色，其中普通版本还可以切换成半透明和暗黑两种整体的配色。

v3的两个项目中，只是采用js设置当前选中的配置，并没有做保存，v4的版本已经做了cookie存储，这里针对的v3的两个项目，你也可以直接参考v4项目中的写法。

设置的js在main.min.js中 line 137 - line 146，iframe版本在index.min.js的 line 72 - line 80。如下：

    // 设置主题配色
    setTheme = function(input_name, data_name) {
        $("input[name='"+input_name+"']").click(function(){
            $('body').attr(data_name, $(this).val());
        });
    }
    setTheme('site_theme', 'data-theme');
    setTheme('logo_bg', 'data-logobg');
    setTheme('header_bg', 'data-headerbg');
    setTheme('sidebar_bg', 'data-sidebarbg');

    /* ---- iframe版本 ---- */
    // 设置主题配色
    setTheme = function(input_name, data_name) {
        $("input[name='"+input_name+"']").click(function(){
            $('body').attr(data_name, $(this).val());
        });
    }
    setTheme('logo_bg', 'data-logobg');
    setTheme('header_bg', 'data-headerbg');
    setTheme('sidebar_bg', 'data-sidebarbg');

主题配置并没有做保存，大家根据自己实际情况，做cookie存储或者其他方式。这里说下采用cookie存储，先引入 jquery.cookie.min.js，下载该js文件。

在项目页面中引入:

<script type="text/javascript" src="js/jquery.cookie.min.js"></script>

对设置主题配置的js做些修改。

    // 读取cookie中的主题设置
    var the_logo_bg    = $.cookie('the_logo_bg'),
        the_header_bg  = $.cookie('the_header_bg'),
        the_sidebar_bg = $.cookie('the_sidebar_bg'),
        the_site_theme = $.cookie('the_site_theme'); // iframe版中不需要这个

    if (the_logo_bg) $('body').attr('data-logobg', the_logo_bg);
    if (the_header_bg) $('body').attr('data-headerbg', the_header_bg);
    if (the_sidebar_bg) $('body').attr('data-sidebarbg', the_sidebar_bg);
    if (the_site_theme) $('body').attr('data-theme', the_site_theme);  // iframe版中不需要这个

    // 处理主题配色下拉选中
    $(".dropdown-skin :radio").each(function(){
        var $this = $(this),
            radioName = $this.attr('name');
        switch (radioName) {
            case 'site_theme':
                $this.val() == the_site_theme && $this.prop("checked", true);
                break;  // iframe版中不需要这个case
            case 'logo_bg':
                $this.val() == the_logo_bg && $this.prop("checked", true);
                break;
            case 'header_bg':
                $this.val() == the_header_bg && $this.prop("checked", true);
                break;
            case 'sidebar_bg':
                $this.val() == the_sidebar_bg && $this.prop("checked", true);
        }
    });

    // 设置主题配色
    setTheme = function(input_name, data_name) {
        $("input[name='"+input_name+"']").click(function(){
            $('body').attr(data_name, $(this).val());
            $.cookie('the_'+input_name, $(this).val());
        });
    }
    setTheme('site_theme', 'data-theme');  // iframe版中不需要这个
    setTheme('logo_bg', 'data-logobg');
    setTheme('header_bg', 'data-headerbg');
    setTheme('sidebar_bg', 'data-sidebarbg');

以上就是用js处理主题配色保存的方法，你也可以只用js存储，用程序来读取cookie中存储的内容。