EasyUI实现更换主题能过样式添加id实现

EasyUI实现更换主题能过样式添加id实现，将原来的样式值添加到cookie中保存，这样下次浏览器访问时，就是我们原来选择的样式！

 

首先将easyui的样式文件加入一个ID，这里命名为easyuiTheme，然后在样式文件下面加入一个JS文件
 
 
 
<link href="Static/EasyUI/themes/default/menu.css" rel="stylesheet" type="text/css" />
    <script src="Static/EasyUI/jquery-1.8.0.min.js" type="text/javascript"></script>
    <script src="Static/EasyUI/jquery.cookie.js" type="text/javascript"></script>
    <link href="Static/EasyUI/themes/default/easyui.css" rel="stylesheet" type="text/css"  id="easyuiTheme" />  <%--此id用于改变皮肤方法--%>
    <script src="Static/EasyUI/changeEasyuiTheme.js" type="text/javascript"></script>
    <link href="Static/EasyUI/themes/icon.css" rel="stylesheet" type="text/css" />
    <script src="Static/EasyUI/jquery.easyui.min.js" type="text/javascript"></script>
    <script src="Static/EasyUI/locale/easyui-lang-zh_CN.js" type="text/javascript"></script>
    <script src="Static/CommonJS/ty.baseExtend.methods.js" type="text/javascript"></script>
9  

 

changeEasyuiTheme.js文件的内容是

01 function changeThemeFun(themeName) {/* 更换主题 */
02     var $easyuiTheme = $('#easyuiTheme');
03     var url = $easyuiTheme.attr('href');
04     var href = url.substring(0, url.indexOf('themes')) + 'themes/' + themeName + '/easyui.css';
05     $easyuiTheme.attr('href', href);
06  
07     var $iframe = $('iframe');
08     if ($iframe.length > 0) {
09         for ( var i = 0; i < $iframe.length; i++) {
10             var ifr = $iframe[i];
11             $(ifr).contents().find('#easyuiTheme').attr('href', href);
12         }
13     }
14  
15     $.cookie('easyuiThemeName', themeName, {
16         expires : 7
17     });
18 };
19 if ($.cookie('easyuiThemeName')) {
20     changeThemeFun($.cookie('easyuiThemeName'));
21 }

jquery.cookie.js的内容是

01 jQuery.cookie = function (key, value, options) {
02  
03     // key and value given, set cookie...
04     if (arguments.length > 1 && (value === null || typeof value !== "object")) {
05         options = jQuery.extend({}, options);
06  
07         if (value === null) {
08             options.expires = -1;
09         }
10  
11         if (typeof options.expires === 'number') {
12             var days = options.expires, t = options.expires = new Date();
13             t.setDate(t.getDate() + days);
14         }
15  
16         return (document.cookie = [
17             encodeURIComponent(key), '=',
18             options.raw ? String(value) : encodeURIComponent(String(value)),
19             options.expires ? '; expires=' + options.expires.toUTCString() : '', // use expires attribute, max-age is not supported by IE
20             options.path ? '; path=' + options.path : '',
21             options.domain ? '; domain=' + options.domain : '',
22             options.secure ? '; secure' : ''
23         ].join(''));
24     }
25  
26     // key and possibly options given, get cookie...
27     options = value || {};
28     var result, decode = options.raw ? function (s) { return s; } : decodeURIComponent;
29     return (result = new RegExp('(?:^|; )' + encodeURIComponent(key) + '=([^;]*)').exec(document.cookie)) ? decode(result[1]) : null;
30 };


使用的时候
1 changeThemeFun('default');
2 changeThemeFun('gray');

 

 
posted @ 2013-11-14 14:51  net668  阅读(1728)  评论(0)  编辑  收藏  举报