10.2 实时换肤功能

来源：互联网发布：音乐家知乎编辑：程序博客网时间：2024/06/05 00:32

10.2 实时换肤功能

在本章的开始，我们已经谈到了实时换肤功能。大家应该都熟悉目前很流行的聊天工具如腾讯的QQ，微软的MSN，我们都可以根据自己的喜好来更换自己的皮肤颜色，更换后，整个聊天工具的面板都会变为你选择的颜色，所见即所得，非常方便。在应用系统中，如果能够实现系统的实时换肤功能，那么无疑会为你的应用增添一个有力的竞争手段。

实时换肤功能的实现原理是什么呢？在Ext中，主要是使用CSS与图片来控制界面组件的外观。CSS文件与图片文件都位于Ext框架中的resources文件夹下面，resources文件夹内分别有css与images两个文件夹。

如图10.2所示，我们来看一下css文件夹内的文件结构。

图中，从每个CSS文件的命名就可以看出每个文件的作用，如panel.css是用于渲染panel组件的外观，而form.css则用于渲染form表单的显示。打开panel.css查看其内部结构，可以发现其中大部分类涉及到的背景都引用自../images/default/panel/内的图片。那么可以发现，box、button、dd、editor、form、grid、layout、menu、panel、progress、qtip、sizer、slide、tabs、toolbar、tree、window的CSS文件在images文件夹内都有其对应的图片，这就是说，如果你要对如window这个组件的外观进行改变的话，只需要改变CSS文件与其对应的图片就可以了。当然，要改变组件的样式也可以在JavaScript程序代码中进行设置，这里讲的方法主要是为了后面的换肤与制定Ext提供基础。

我们在开发Ext程序时，往往会在HTML文件中引用ext-all.css, 这个文件比较大，其中包含了图10.2中除被红框选中的xtheme-gray.css的所有文件。

图10.2 css文件夹内的文件结构

1. 静态换肤

Ext中，默认的主题为蓝色主题，Ext自己还扩展了一个灰色主题，此主题的实现主要在xtheme-gray.css文件中，这样我们就可以实现对Ext的静态换肤功能。可以像下面这样做。

HTML代码清单10-2-1

<link rel="stylesheet" type="text/css"

href="/Ext2.1_Work/ext-2.1_0622/resources/css/ext-all.css"/>

<link rel="stylesheet"type="text/css"

href="/Ext2.1_Work/ext-2.1_0622/resources/css/xtheme-gray.css"/>

这样灰色主题就会在系统加载后覆盖Ext的默认设置，应用于Ext各个组件中。

2. 动态换肤

我们还可以在系统中进行动态换肤，也就是所说的实时换肤功能。

HTML代码清单10-2-2

<script type="text/javascript">

var changeSkin = function(value) {

Ext.util.CSS.swapStyleSheet('theme',

'/Ext2.1_Work/ext-2.1_0622/resources/css/'

+ (value!='default'?'xtheme-':'') + value  + '.css');

};

</script>

<body>

<span>Theme:</span>

<select id="exttheme"  onchange="changeSkin(this.value)">

<option value="default" SELECTED>Ext Blue</option>

<option value="gray" >Gray Theme</option>

</select>

</body>

该例中使用到了Ext中Css工具类的swapStyleSheet方法，此方法是实现换肤功能的核心，它的实现逻辑并不复杂，我们看一下它的源代码。

JavaScript代码清单10-2-3

//JavaScript代码清单10-2-3

swapStyleSheet: function(id, url){

this.removeStyleSheet(id); //删除传入ID的样式

var ss = doc.createElement("link"); //创建标签

ss.setAttribute("rel", "stylesheet"); //设置引用

ss.setAttribute("type", "text/css"); //设置类型为css

ss.setAttribute("id", id);

ss.setAttribute("href", url); //设置URL

doc.getElementsByTagName("head")[0].appendChild(ss); //增加到head的最后面

}

从代码中可以看出，swapStyleSheet可以根据不同的url来设置相应的css文件，以设置系统的主题。