easyui切换主题

最新推荐文章于 2026-05-29 12:54:15 发布

原创最新推荐文章于 2026-05-29 12:54:15 发布 · 1.3w 阅读

6 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

项目开发

easyui

本文介绍了一种使用EasyUI 1.4.2实现主题切换的方法，通过修改CSS文件实现不同风格的主题显示，并利用jQuery Cookie插件保存用户选择的主题。

easyui 1.4.2下载地址:点击打开链接主题有十多个吧

jquery cookie下载地址:点击打开链接

首先页面肯定先导入easyui相关的:

相关界面,我定义了一个切换主题的

 <div style="position: absolute;right: 14px;top:42px;">
            <div class="easyui-panel" style="padding:5px;font-size: 20px;font-weight: 900;">
             <a href="javascript:void(0);" class="easyui-menubutton" data-options="menu:'#layout_north_pfMenu',iconCls:'icon-ok'">更换皮肤</a>
            </div>
        </div>
<div id="layout_north_pfMenu" style=" display: none;">
        <div onclick="changeTheme('default');">default</div>
        <div onclick="changeTheme('black');">black</div>
        <div onclick="changeTheme('bootstrap');">bootstrap</div>
        <div onclick="changeTheme('gray');">gray</div>
        <div onclick="changeTheme('metro');">metro</div>
        <div onclick="changeTheme('metro-blue');">metro-blue</div>
        <div onclick="changeTheme('metro-gray');">metro-gray</div>
        <div onclick="changeTheme('metro-green');">metro-green</div>
        <div onclick="changeTheme('metro-red');">metro-red</div>
        <div onclick="changeTheme('metro-orange');">metro-orange</div>
        <div onclick="changeTheme('ui-cupertino');">ui-cupertino</div>
        <div onclick="changeTheme('ui-dark-hive');">ui-dark-hive</div>
        <div onclick="changeTheme('ui-pepper-grinder');">ui-pepper-grinder</div>
        <div onclick="changeTheme('ui-sunny');">ui-sunny</div>
    </div>

js中我写了changeTheme这个方法:

/**
 * 更换EasyUI主题的方法
 * @param themeName
 * 主题名称
 */
changeTheme = function(themeName) {
	var $easyuiTheme = $('#easyuiTheme');
	var url = $easyuiTheme.attr('href');
	var href = url.substring(0, url.indexOf('themes')) + 'themes/' + themeName + '/easyui.css';
	$easyuiTheme.attr('href', href);
	var $iframe = $('iframe');
	if ($iframe.length > 0) {
		for ( var i = 0; i < $iframe.length; i++) {
			var ifr = $iframe[i];
			$(ifr).contents().find('#easyuiTheme').attr('href', href);
		}
	}
	$.cookie('easyuiThemeName', themeName, {
		expires : 7
	});
};

主要实现原理就是换导入css文件,这样就可以实现切换主题了

标签

#easyui #cookie #ui #界面 #主题