界面更换皮肤一直都是一个比较炫的功能。
页面代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh" lang="zh" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ext demo</title>
<link rel="Stylesheet" type="text/css" href="resources/css/ext-all.css" />
<link rel="Stylesheet" type="text/css" />
<script type="text/javascript" src="adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-all.js"></script>
<script type="text/javascript" src="src/locale/ext-lang-zh_CN.js"></script>
</head>
<body>
<form id="form1">
<script type="text/javascript">
function makeCookie()
{
var themes =
[
['gray', '灰色'],
['blue', '蓝色']
];
var cbThemes = new Ext.form.ComboBox
({
id: 'cbThemes',
store: themes,
80,
typeAhead: true,
triggerAction: 'all',
emptyText:'界面主题',
selectOnFocus:true
});
cbThemes.on
({
"select":function(field,newValue,oldValue)
{
var css = newValue.data.field1;
//设置cookies
var date=new Date();
date.setTime(date.getTime()+30*24*3066*1000);
document.getElementsByTagName("link")[1].href="resources/css/xtheme-"+css+".css";
document.cookie="css="+css+";expires="+date.toGMTString();
}
});
var win = new Ext.Window
({
title:"测试更换皮肤窗口",renderTo:document.body,500,height:300,x:300,y:100,
bbar:['更换皮肤','',cbThemes]
});
win.show();
document.body.onload = function()
{
var cookiesArr=document.cookie.split(";");
var css;
for(var i=0;i<cookiesArr.length;i++)
{
var arr=cookiesArr[i].split("=");
if(arr[0]=="css")
{
css=arr[1];
break;
}
}
document.getElementsByTagName("link")[1].href="resources/css/xtheme-"+css+".css";
};
}
Ext.onReady(makeCookie);
</script>
</form>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh" lang="zh" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ext demo</title>
<link rel="Stylesheet" type="text/css" href="resources/css/ext-all.css" />
<link rel="Stylesheet" type="text/css" />
<script type="text/javascript" src="adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-all.js"></script>
<script type="text/javascript" src="src/locale/ext-lang-zh_CN.js"></script>
</head>
<body>
<form id="form1">
<script type="text/javascript">
function makeCookie()
{
var themes =
[
['gray', '灰色'],
['blue', '蓝色']
];
var cbThemes = new Ext.form.ComboBox
({
id: 'cbThemes',
store: themes,
80,
typeAhead: true,
triggerAction: 'all',
emptyText:'界面主题',
selectOnFocus:true
});
cbThemes.on
({
"select":function(field,newValue,oldValue)
{
var css = newValue.data.field1;
//设置cookies
var date=new Date();
date.setTime(date.getTime()+30*24*3066*1000);
document.getElementsByTagName("link")[1].href="resources/css/xtheme-"+css+".css";
document.cookie="css="+css+";expires="+date.toGMTString();
}
});
var win = new Ext.Window
({
title:"测试更换皮肤窗口",renderTo:document.body,500,height:300,x:300,y:100,
bbar:['更换皮肤','',cbThemes]
});
win.show();
document.body.onload = function()
{
var cookiesArr=document.cookie.split(";");
var css;
for(var i=0;i<cookiesArr.length;i++)
{
var arr=cookiesArr[i].split("=");
if(arr[0]=="css")
{
css=arr[1];
break;
}
}
document.getElementsByTagName("link")[1].href="resources/css/xtheme-"+css+".css";
};
}
Ext.onReady(makeCookie);
</script>
</form>
</body>
</html>
效果图如下：
