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');

 

 

转载于:https://www.cnblogs.com/ChiYue/p/3423314.html