jquery easyui如何换主题呀?
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了jquery easyui如何换主题呀?相关的知识,希望对你有一定的参考价值。
1、首先需要在html的页面中将easyui的样式文件导入进去。
2、然后需要先导入jquery的脚本,接着把easyui的脚本导入进页面。
3、接着我们在body区域中放置一个大的div来确定页面的大小。
4、然后再大的div下面进行左右布局,如下图所示,左边是菜单,右边显示内容。
5、接下来需要在script中实现点击菜单的方法。
参考技术A如果你的是easyui-1.3.3版本的话,可以更换界面皮肤样式;以下是官方提供的皮肤样式,这些在官网上最新jar中都有的。
你只需要在页面中link样式的地址改变就可以了;
<link rel="stylesheet" type="text/css" href="../../themes/bootstrap/easyui.css">
本回答被提问者和网友采纳easyui换主题,并记录在cookie
首先将easyui的样式文件加入一个ID,这里命名为easyuiTheme,然后在样式文件下面加入一个JS文件
<script type="text/javascript" charset="UTF-8" src="jslib/jquery-easyui-1.2.5/jquery-1.7.1.min.js"></script>
<script type="text/javascript" charset="UTF-8" src="jslib/jquery.cookie.js"></script>
<link id="easyuiTheme" rel="stylesheet" type="text/css" href="jslib/jquery-easyui-1.2.5/themes/gray/easyui.css">
<script type="text/javascript" charset="UTF-8" src="jslib/changeEasyuiTheme.js"></script>
<link rel="stylesheet" type="text/css" href="jslib/jquery-easyui-1.2.5/themes/icon.css">
<script type="text/javascript" charset="UTF-8" src="jslib/jquery-easyui-1.2.5/jquery.easyui.min.js"></script>
<script type="text/javascript" charset="UTF-8" src="jslib/jquery-easyui-1.2.5/locale/easyui-lang-zh_CN.js"></script>
changeEasyuiTheme.js文件的内容是
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
});
};
if ($.cookie(‘easyuiThemeName‘)) {
changeThemeFun($.cookie(‘easyuiThemeName‘));
}
jquery.cookie.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;
};
使用的时候
changeThemeFun(‘default‘);
changeThemeFun(‘gray‘);
以上是关于jquery easyui如何换主题呀?的主要内容,如果未能解决你的问题,请参考以下文章
jquery easyui dialog 的buttons位置怎么居中呀,buttons老是在右下角出现
[转]jQuery EasyUI 扩展-- 主题(Themes)
jQuery easyui 中 combobox的事件处理吗