首页 > 其他 > 详细

easyui切换主题

时间:2015-04-25 18:19:54      阅读:293      评论:0      收藏:0      [点我收藏+]

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切换主题

原文:http://blog.csdn.net/u012169499/article/details/45271807

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!