easyui 1.4.2下载地址:点击打开链接 主题有十多个吧
<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>
/** * 更换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文件,这样就可以实现切换主题了
原文:http://blog.csdn.net/u012169499/article/details/45271807