EasyUI更换主题

EasyUI默认的主题有几个

EasyUI的使用需要导入

<script type="text/javascript" src="/resources/js/lib/easyui/jquery.min.js"></script>
<script type="text/javascript" src="/resources/js/lib/easyui/jquery.easyui.min.js"></script>
<link rel="stylesheet" href="/resources/js/lib/easyui/themes/default/easyui.css" type="text/css"></link>
<link rel="stylesheet" href="/resources/js/lib/easyui/themes/icon.css" type="text/css"></link>
<script type="text/javascript" src="/resources/js/lib/easyui/locale/easyui-lang-zh_CN.js"></script>
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />

其中

<link rel="stylesheet" href="/resources/js/lib/easyui/themes/default/easyui.css" type="text/css"></link>

是EasyUI样式有关的配置，默认主题default，修改主题只需要修改default文件夹为新的主题所在文件夹。

我在官网（http://www.jeasyui.com/extension/themes.php）下载了几个主题，解压放入themes文件夹即可

把配置改成

<link rel="stylesheet" href="/resources/js/lib/easyui/themes/metro-gray/easyui.css" type="text/css"></link>

就变成了灰色的metro主题

当然，更好的方式是通过JS代码选择主题，首先需要一个主题选择下拉框

<input id="changeTheme" name="changeTheme" value="metro-gray">

//初始化主题选择下拉框
admin_index.initThemes = function() {
    $(‘#changeTheme‘).combobox({
        valueField:‘name‘,
        textField:‘value‘,
        width: 70,
        data: [
               {name: ‘default‘, value: ‘default‘},
               {name: ‘black‘, value: ‘black‘},
               {name: ‘bootstrap‘, value: ‘bootstrap‘},
               {name: ‘gray‘, value: ‘gray‘},
               {name: ‘metro‘, value: ‘metro‘},
               {name: ‘metro-gray‘, value: ‘metro-gray‘},
               {name: ‘metro-red‘, value: ‘metro-red‘},
               {name: ‘ui-sunny‘, value: ‘ui-sunny‘}
            ],
            onChange : function() {
                var theme = $(‘#changeTheme‘).combobox(‘getValue‘);
                admin_index.changeTheme(theme);
            }
    });
};

当然了，这个控件的初始化要放在ready方法中

//页面加载完成之后的操作
$(document).ready(function() {
    //显示时间
    setInterval(function(){admin_index.showTime("time");}, 1000);
    //初始化主题选择下拉框
    admin_index.initThemes();
});

更换主题的方法

/**
 * 更换EasyUI主题
 */
admin_index.changeTheme = function(themeName) {
    var $easyuiTheme = $(‘#uc_theme‘);
    var url = $easyuiTheme.attr(‘href‘);
    var href = url.substring(0, url.indexOf(‘themes‘)) + ‘themes/‘ + themeName + ‘/easyui.css‘;
    $easyuiTheme.attr(‘href‘, href);
    $.cookie(‘easyuiThemeName‘, themeName, {
        expires : 7000
    });
};

为了能更换主题样式，需要给导入样式的link标签加个id

<link id="uc_theme" rel="stylesheet" href="/resources/js/lib/easyui/themes/metro-gray/easyui.css" type="text/css"></link>

这样更换的主题只能在本地使用，刷新页面之后就恢复了，如果要个人定制主题，需要保存到数据库才可以。