ExtJS 换肤
来源:互联网 发布:知羽电子相册制作软件 编辑:程序博客网 时间:2024/06/09 16:14
extjs的默认皮肤很好看,但是我们还可以变换样式切换其他皮肤.
1.直接添加其他css文件换肤.
皮肤文件:xtheme-olive.zip下载
把皮肤文件解压,把css文件(如xtheme-olive.css)拷贝到extjs的resources目录下css文件夹里面:
解压皮肤文件,把里面的相应的 image文件夹下的目录(比如olive)拷贝到extjs的resources目录下images文件夹下
设置css文件如下:
其实就是在原有的基础上添加了个xtheme-olive.css文件。
效果图:
2.配合cookie实现网站换肤
我们的目标:
/*
用户可以选择自己的样式,当下次用户打开的网站(在cookie的有效期内)的时候,自动读取cookie,显示先前选择的爱好的样式!
*/
用户可以选择自己的样式,当下次用户打开的网站(在cookie的有效期内)的时候,自动读取cookie,显示先前选择的爱好的样式!
*/
我们的原理:
//关键点
1.document.getElementsByTagName("link")[1].href//获取或者设置第二个css文件的href值
2.var date=new Date();//今天的日期
date.setTime(date.getTime()+30*24*3066*1000);//30天后的日期
document.cookie="css="+name+";expires="+date.toGMTString();//设置30天后过期的cookies(名称为css)
3.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;
}
}
//这段代码是获取cookies中想要的名称为css的cookies,并保存在变量css中去
4.如果不设置expires的话,会在关闭浏览器后cookies失效。
1.document.getElementsByTagName("link")[1].href//获取或者设置第二个css文件的href值
2.var date=new Date();//今天的日期
date.setTime(date.getTime()+30*24*3066*1000);//30天后的日期
document.cookie="css="+name+";expires="+date.toGMTString();//设置30天后过期的cookies(名称为css)
3.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;
}
}
//这段代码是获取cookies中想要的名称为css的cookies,并保存在变量css中去
4.如果不设置expires的话,会在关闭浏览器后cookies失效。
html代码:
<!--切换标签-->
<a href="javascript:void(0)" onclick="changecss('')">还原</a>
<a href="javascript:void(0)" onclick="changecss('xtheme-olive.css')">绿色</a>
<a href="javascript:void(0)" onclick="changecss('xtheme-gray.css')">灰色</a>
<a href="javascript:void(0)" onclick="changecss('xtheme-purple.css')">purple</a>
<a href="javascript:void(0)" onclick="changecss('')">还原</a>
<a href="javascript:void(0)" onclick="changecss('xtheme-olive.css')">绿色</a>
<a href="javascript:void(0)" onclick="changecss('xtheme-gray.css')">灰色</a>
<a href="javascript:void(0)" onclick="changecss('xtheme-purple.css')">purple</a>
关键js代码:
function changecss(name)
{
var date=new Date();
date.setTime(date.getTime()+30*24*3066*1000);
document.getElementsByTagName("link")[1].href="ExtJs/resources/css/"+name;
document.cookie="css="+name+";expires="+date.toGMTString();//设置cookies
}
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="ExtJs/resources/css/"+css;//读取并应用css
{
var date=new Date();
date.setTime(date.getTime()+30*24*3066*1000);
document.getElementsByTagName("link")[1].href="ExtJs/resources/css/"+name;
document.cookie="css="+name+";expires="+date.toGMTString();//设置cookies
}
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="ExtJs/resources/css/"+css;//读取并应用css
效果图(下次打开浏览器还是这样):
OK,对于extjs的换肤,就聊到这里,其实觉得默认的皮肤还可以拉,
下面我提供几套丛网上下载到的皮肤,如果你有什么其他好看的皮肤,请跟帖答复,给个下载地址 .
http://files.cnblogs.com/qianxudetianxia/xtheme-slate.zip
http://files.cnblogs.com/qianxudetianxia/xtheme-purple.zip
http://files.cnblogs.com/qianxudetianxia/xtheme-galdaka.zip
http://files.cnblogs.com/qianxudetianxia/xtheme-darkgray.zip
http://files.cnblogs.com/qianxudetianxia/xtheme-black.zip
- ExtJs换肤
- ExtJs换肤
- ExtJS 换肤
- extjs换肤实例
- Extjs 下的换肤功能实现。
- EXTJs 更换换皮肤
- 让ExtJs 2.02的例子也支持换肤
- ExtJs2.0学习系列(15)--extjs换肤
- 让ExtJs 2.02的例子也支持换肤
- ExtJs2.0学习系列(15)--extjs换肤
- 让ExtJs 2.02的例子也支持换肤
- ExtJs2.0学习系列(15)--extjs换肤
- ExtJs2.0学习系列(15)--extjs换肤
- 换肤
- 换肤
- 换肤
- extjs使利用cookie换皮肤,华丽转身!
- 换肤手术
- Ext.FormPanel 学习示例
- VHDL语言简单的教程 2012_7_29
- 如何创建WAP Push SMS Messages
- Ext.form.ComboBox 学习示例
- 如何为linux系统添加交换分区(swap space)
- ExtJS 换肤
- Web.config 和 App.config 的区别
- ExtJS学习笔记 layout的9种样式风格总结
- 关于windows下使用tftp服务器烧写程序到TQ2440开发板的nand flash(解决蓝屏的方法!)
- Mac下的屏幕录制软件——ScreenFlow 3.0.6
- Node(24) Express Project
- 北大ACM poj3913 Gnome Sequencing
- 2012.7.29计划
- 2012-7-29 周日