标签：
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>
这样更换的主题只能在本地使用，刷新页面之后就恢复了，如果要个人定制主题，需要保存到数据库才可以。
标签：
原文地址：http://www.cnblogs.com/ywlaker/p/4757790.html
