easyui 更换皮肤

　　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