标签：style blog http io ar color os sp for
easyui 的主题文件存在themes文件夹中，默认显示default的显示样式，这里我们希望实现easyui的自动换肤，并在cookie中将此样式保存一段时间（7天）,解决方案如下：
1> 将皮肤的样式文件引入到当前的主界面中，并为其添加一个id:easyuiTheme
<script src="../easyUI/jquery-2.0.3.js" type="text/javascript"></script> <script src="../easyUI/jquery.cookies.js" type="text/javascript"></script> <script src="../easyUI/jquery.easyui.min.js" type="text/javascript"></script> <script src="../easyUI/locale/easyui-lang-zh_CN.js" type="text/javascript"></script> <link href="../easyUI/themes/default/easyui.css" rel="stylesheet" type="text/css" /> <link href="../easyUI/themes/icon.css" rel="stylesheet" type="text/css" /> <link id="easyuiTheme" href="../easyUI/themes/gray/easyui.css" rel="stylesheet" type="text/css" />
2> 更改主题方法
function changeThemeFun(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 }); };
3> jquery.cookies.js文件
jQuery.cookie = function (key, value, options) {
// key and value given, set cookie...
if (arguments.length > 1 && (value === null || typeof value !== "object")) {
options = jQuery.extend({}, options);
if (value === null) {
options.expires = -1;
}
if (typeof options.expires === ‘number‘) {
var days = options.expires, t = options.expires = new Date();
t.setDate(t.getDate() + days);
}
return (document.cookie = [
encodeURIComponent(key), ‘=‘,
options.raw ? String(value) : encodeURIComponent(String(value)),
options.expires ? ‘; expires=‘ + options.expires.toUTCString() : ‘‘, // use expires attribute, max-age is not supported by IE
options.path ? ‘; path=‘ + options.path : ‘‘,
options.domain ? ‘; domain=‘ + options.domain : ‘‘,
options.secure ? ‘; secure‘ : ‘‘
].join(‘‘));
}
// key and possibly options given, get cookie...
options = value || {};
var result, decode = options.raw ? function (s) { return s; } : decodeURIComponent;
return (result = new RegExp(‘(?:^|; )‘ + encodeURIComponent(key) + ‘=([^;]*)‘).exec(document.cookie)) ? decode(result[1]) : null;
};
4> 页面初始化的时候设置一个默认的主题
$(function () {
if ($.cookie(‘easyuiThemeName‘)) {
changeThemeFun($.cookie(‘easyuiThemeName‘));
}
});
5> 方法调用如下：
<div id="menu" class="easyui-menu" style="width:120px; display:none"> <div onclick="changeThemeFun(‘gray‘)" >Gray</div> <div onclick="changeThemeFun(‘black‘)" >Black</div> <div onclick="changeThemeFun(‘default‘)" >Default</div> </div>
引用：
http://www.jeasyuicn.com/post-64.html
标签：style blog http io ar color os sp for
原文地址：http://www.cnblogs.com/eye-like/p/4153257.html
