5.3 其他应用

5.3.1 网页字体大小

在某些网站经常有“放大”和“缩小”字号的控制按钮，通过单击它们，可以使网页的文字呈现不同的大小。

首先在空白的网页上添加两个字号控制按钮和一些文字，HTML代码如下：

[插图]

显示效果如图5-31所示。

[插图]

图5-31 网页初始化效果

当单击这两个按钮时可以分别控制文本字体的放大和缩小。因此，需要对“放大”按钮和“缩小”按钮进行相应的处理，代码如下：

[插图]

下面详细讲解以上代码所完成的操作。

[插图]

当文档加载完毕后，为所有的<span>元素绑定单击事件。

[插图]

获取 id 为“para”的元素的字体大小。获取的值是将返回的数字和单位，即16px。然后使用parseInt()方法去掉单位，因此16px就变成了16。parseInt()方法的第2个参数表示进制，代码中表示的是十进制。

[插图]

上面这段代码是获取单位，slice()方法返回字符串中从指定的字符开始的一个子字符串。因为这里使用的度量单位px是两个字符，所以指定字符串应该从倒数第2个字符开始。在后面再次设置字体大小时，就可以直接把单位拼接上。

[插图]

if语句用于判断当前被单击的<span>元素的class是否为“bigger”。如果是“bigger”，则需要为字体变量（textFontSize）增加 2px。如果单击的是“smaller”，则要为字体变量（textFontSize）减掉2px。

[插图]

最后，再次获取“para”元素并为它的font-size 属性赋予新的值（textFontSize），并且一定要拼接上单位。

如果发现无限放大和缩小不太合适，可以判断一下最小字体和最大字体，代码如下：

[插图]

显示效果如图5-32所示。

[插图]

图5-32 字体大小变化

5.3.2 网页选项卡

制作选项卡的原理比较简单，通过隐藏和显示来切换不同的内容。

与前面例子相同，首先构建HTML结构，代码如下：

[插图]

应用样式后，网页呈现效果如图5-33所示。

默认是选项卡的第1个选项被选中，然后下面区域显示相应的内容。例如图5-33所示，当单击“体育”选项卡时，“体育”选项卡将处于高亮状态，同时下面的内容也切换成“体育”了。当单击“娱乐”选项卡时，也显示相应的内容。下面将详细介绍实现选项卡的过程。

[插图]

图5-33 选项卡效果

首先需要为<li>元素绑定单击事件，代码如下：

[插图]

绑定事件后，需要将当前单击的<li>元素高亮，然后去掉其他同辈<li>元素的高亮。

[插图]

单击选项卡后，当前<li>元素处于高亮状态，而其他的<li>元素已去掉了高亮状态。但选项卡下面的内容还没被切换，因此需要将下面的内容也对应切换。显示效果如图5-34所示。

[插图]

图5-34 内容没被切换

从选项卡的基本结构可以知道，每个<li>元素都分别对应一个<div>区域。因此可以根据当前单击的<li>元素在所有<li>元素中的索引，然后通过索引来显示对应的区域，代码如下：

[插图]

这样，当单击<li>元素后，选项卡相应的内容也将切换，效果如图5-35所示。

[插图]

图5-35 对应的内容被切换

在上面的代码中，要注意$(“div.tab_box > div”)这个子选择器，如果用$(“div.tab_box div”)选择器，当子节点里再包含<div>元素的时候，就会引起程序错乱。因此获取当前选项卡下的子节点，才是这个例子所需要的。

至此制作选项卡的过程就完成了。如果读者还想加强些效果，例如光标滑入滑出效果，可以添加hover事件，代码如下：

[插图]

这样当光标滑过其他选项时，选项的样式会发生变化，如图5-36所示。

[插图]

图5-36 滑过“娱乐”选项

5.3.3 网页换肤

自从Web 2.0开始流行后，很多网站更加注重用户自定义，例如在网页上用户可以自定义新闻内容，可以任意拖动网页内容，也可以给网页选择一套自己喜欢的颜色等。

网页换肤的原理就是通过调用不同的样式表文件来实现不同皮肤的切换，并且需要将换好的皮肤记入Cookie中，这样用户下次访问时，就可以显示用户自定义的皮肤了。

首先设置HTML的结构，在网页中添加皮肤选择按钮（<li>元素）和基本内容，代码如下：

[插图]

然后根据 HTML 代码预定义几套换肤用的样式，分别有灰色、紫色、红色等 6套。默认是灰色。

注意：在设计HTML代码时，用了一些小技巧，就是将皮肤选择按钮

元素的id与网页皮肤的样式文件名称设置的相同。这样就可以使完成换肤操作简化很多。

然后为HTML代码添加样式，注意HTML结构要有一个带id的样式表链接，通过操作该链接的href属性的值，从而实现换肤。代码如下：

[插图]

运行后网页的初始化效果如图5-37所示。

[插图]

图5-37 初始化效果

最后为皮肤选择按钮添加单击事件，有如下两个步骤。
（1）当皮肤选择按钮被单击后，当前皮肤就被勾选。
（2）将网页内容换肤。

首先完成第1步，它与前面选项卡例子中高亮当前选项的代码相同，代码如下：

[插图]

然后完成第2步，即设置网页内容皮肤。前面为<link>元素设置的id，此时可以通过attr()方法为<link>元素的href属性设置不同的值，代码如下：

[插图]

完成后，当单击皮肤选择按钮时，就可以切换网页皮肤了，如图5-38所示，但是当用户刷新网页或者关闭浏览器后，皮肤又会被初始化，因此需要将当前选择的皮肤进行保存。

[插图]

图5-38 单击按钮后换肤

在jQuery中有一款Cookie插件，它能简化Cookie的操作，此处就将其引入，代码如下：

[插图]

注意：Cookie插件的具体用法可以参考第7章。

将当前皮肤保存进Cookie，代码如下：

[插图]

保存后，就可以通过Cookie来获取当前的皮肤了。如果Cookie确实存在，则将当前皮肤设置为Cookie记录的值，代码如下：

[插图]

完成的jQuery代码如下：

[插图]

此时，网页换肤功能不仅能正常切换，而且也能保存到Cookie中，当用户刷新网页后，仍然是当前选择的皮肤。

在上面代码中，click事件中的函数内容与if (cookie_skin) { } 内的判断内容类似，只是有一个变量不同，因此可以通过给函数传递不同的参数，这样就可以多次调用（抽象化），代码如下：

[插图]

然后在单击事件和if (cookie_skin) { }内分别调用对应的参数：

[插图]

至此，网页换肤功能就完成了，效果如图5-39所示。

[插图]

图5-39 完成网页换肤