首页 > 代码库 > easyui 更换皮肤
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 = http://www.mamicode.com/url.substring(0, url.indexOf(‘themes‘)) + ‘themes/‘ + themeName + ‘/easyui.css‘;>< $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 =http://www.mamicode.com/== null || typeof value !=="object")) { options = jQuery.extend({}, options); if (value =http://www.mamicode.com/== 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
easyui 更换皮肤
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。