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);
|
07 |
var $iframe = $( 'iframe' );
|
08 |
if ($iframe.length > 0) {
|
09 |
for ( var i = 0; i < $iframe.length; i++) {
|
11 |
$(ifr).contents().find( '#easyuiTheme' ).attr( 'href' , href);
|
15 |
$.cookie( 'easyuiThemeName' , themeName, {
|
19 |
if ($.cookie( 'easyuiThemeName' )) {
|
20 |
changeThemeFun($.cookie( 'easyuiThemeName' ));
|
jquery.cookie.js的内容是
01 |
jQuery.cookie = function (key, value, options) {
|
03 |
// key and value given, set cookie...
|
04 |
if (arguments.length > 1 && (value === null || typeof value !== "object" )) {
|
05 |
options = jQuery.extend({}, options);
|
11 |
if ( typeof options.expires === 'number' ) {
|
12 |
var days = options.expires, t = options.expires = new Date();
|
13 |
t.setDate(t.getDate() + days);
|
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' : ''
|
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 ;
|
使用的时候
1 |
changeThemeFun( 'default' );
|
2 |
changeThemeFun( 'gray' );
|
|