上一篇:ExtJs2.0学习系列(14)--Ext.TreePanel之第三式(可增删改的树)

extjs的默认皮肤很好看,但是我们还可以变换样式切换其他皮肤.

1.直接添加其他css文件换肤.

皮肤文件:
附件: 亲,您没有权限下载或查看附件喔:-) 试试登录注册吧!

把皮肤文件解压,把css文件(如xtheme-olive.css)拷贝到extjs的resources目录下css文件夹里面:
ExtJs2.0学习系列(15)--extjs换肤_7899

解压皮肤文件,把里面的相应的 image文件夹下的目录(比如olive)拷贝到extjs的resources目录下images文件夹下
ExtJs2.0学习系列(15)--extjs换肤_7897

设置css文件如下:
ExtJs2.0学习系列(15)--extjs换肤_7898

其实就是在原有的基础上添加了个xtheme-olive.css文件。

效果图:
ExtJs2.0学习系列(15)--extjs换肤_7900

2.配合cookie实现网站换肤

  我们的目标:
/*
    用户可以选择自己的样式,当下次用户打开的网站(在cookie的有效期内)的时候,自动读取cookie,显示先前选择的爱好的样式!
*/
我们的原理:
  1. //关键点
  2. 1.document.getElementsByTagName("link")[1].href//获取或者设置第二个css文件的href值
  3. 2.var date=new Date();//今天的日期
  4.   date.setTime(date.getTime()+30*24*3066*1000);//30天后的日期
  5.   document.cookie="css="+name+";expires="+date.toGMTString();//设置30天后过期的cookies(名称为css)
  6. 3.var cookiesArr=document.cookie.split(";");
  7.   var css;
  8.   for(var i=0;i<cookiesArr.length;i++)
  9.   {
  10.       var arr=cookiesArr.split("=");
  11.       if(arr[0]=="css")
  12.       {
  13.           css=arr[1];
  14.           break;
  15.       }
  16.   }
  17. //这段代码是获取cookies中想要的名称为css的cookies,并保存在变量css中去
  18. 4.如果不设置expires的话,会在关闭浏览器后cookies失效。
复制代码
html代码:
  1. <!--切换标签-->
  2. <a href="javascript:void(0)" onclick="changecss('')">还原</a>
  3. <a href="javascript:void(0)" onclick="changecss('xtheme-olive.css')">绿色</a>
  4. <a href="javascript:void(0)" onclick="changecss('xtheme-gray.css')">灰色</a>
  5. <a href="javascript:void(0)" onclick="changecss('xtheme-purple.css')">purple</a>
  6. 关键js代码:
  7. [code]    function changecss(name)
  8.     {
  9.       var date=new Date();
  10.       date.setTime(date.getTime()+30*24*3066*1000);
  11.       document.getElementsByTagName("link")[1].href="ExtJs/resources/css/"+name;
  12.       document.cookie="css="+name+";expires="+date.toGMTString();//设置cookies
  13.     }

  14.   var cookiesArr=document.cookie.split(";");
  15.   var css;
  16.   for(var i=0;i<cookiesArr.length;i++)
  17.   {
  18.       var arr=cookiesArr.split("=");
  19.       if(arr[0]=="css")
  20.       {
  21.           css=arr[1];
  22.           break;
  23.       }
  24.   }
复制代码
document.getElementsByTagName("link")[1].href="ExtJs/resources/css/"+css;//读取并应用css[/code]效果图(下次打开浏览器还是这样):
ExtJs2.0学习系列(15)--extjs换肤_7901

OK,对于extjs的换肤,就聊到这里,其实觉得默认的皮肤还可以拉。

下面我提供几套丛网上下载到的皮肤,如果你有什么其他好看的皮肤,请跟帖答复,给个下载地址:
附件: 亲,您没有权限下载或查看附件喔:-) 试试登录注册吧!
TOP

谢谢,向先进者学习
TOP

谢谢共享资源
TOP

我想看皮肤

我想看皮肤
TOP

look

STUDY
TOP

yyyyuuu
TOP

回复 1# cobra 的帖子

Extjs 做的信息管理系统
TOP

不错哟!!!
TOP

挺好的。
TOP

都 有什么什么东东
TOP