网页购物车设计的选项卡

在产品属性介绍内容时，使用了Tab选项卡效果。这也是网页中经常应用的形式，实际上制作选项卡的原理比较简单，通过隐藏和显示来切换不同的内容。下面将详细介绍实现选项卡的过程。

【操作步骤】

第1步，首先构建HTML结构，代码如下：

应用样式后，呈现效果如图24.20所示。选项卡默认第1个选项被选中，然后下面区域显示相应的内容；当单击“产品尺码表”选项卡时，“产品尺码表”选项卡将处于高亮状态，同时下面的内容也切换成“产品尺码表”；当单击“产品介绍”选项卡时，也显示相应的内容。

第2步，新建JavaScript文档，保存为tab.js，然后输入以下代码：

在上面的代码中，首先为

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

第3步，单击选项卡后，当前

• 元素处于高亮状态，而其他的元素已去掉了高亮状态。但选项卡下面的内容还没有被切换，因此需要将下面的内容也对应切换，显示效果如图24.21所示。

图24.21　选项卡切换效果

图24.20　选项卡效果

第4步，从选项卡的基本结构可以知道，每个

• 元素分别对应一个
  区域。因此可以根据当前单击的
• 元素在所有
• 元素中的索引，然后通过索引来显示对应的区域。

提示：在上面的代码中，要注意$("div.tab_box > div")这个子选择器，如果用$("div.tab_box div")选择器，当子节点中再包含

24.5.5　产品颜色切换

本节将设计右侧产品颜色切换，与单击左侧产品小图片切换为大图片类似，不过还需要多做几步，即显示当前所选中的颜色和显示相应的产品列表，演示效果如图24.22所示。

图24.22　产品颜色切换效果

【操作步骤】

第1步，新建JavaScript文档，保存为switchColor.js，然后输入以下代码：

第2步，运行效果后，产品颜色可以正常切换了，演示效果如图24.22所示。

第3步，但单击会发现一个问题，如果不手动去单击缩略图，那么放大镜效果显示的图片还是原来的图片，解决方法很简单，只要触发获取的元素的单击事件即可。在上面代码尾部添加如下一行代码：

24.5.6　产品尺寸切换

本节将设计右侧产品尺寸切换效果，在实现该功能之前，先看一下效果，如图24.23所示。

图24.23　产品尺寸切换效果

【操作步骤】

第1步，首先设计DOM结构：

通过观察产品尺寸的DOM结构，可以非常清晰地知道元素之间的关系，然后利用jQuery强大的DOM操作功能进行设计。

第2步，新建JavaScript文档，保存为sizeAndprice.js，然后输入以下代码：

第3步，应用jQuery上面代码，这样用户就可以通过单击尺寸来进行实时产品尺寸的选择。

24.5.7　产品数量和价格联动

下面设计右侧产品数量和价格联动效果。这个功能非常简单，只要能够正确获取单价和数量，然后获取它们的积，最后把积赋值给相应的元素即可。

注意，为了防止元素刷新后依旧保持原来的值而引起的价格没有联动问题，需要在页面刚加载时，为元素绑定change事件之后立即触发change事件。

打开sizeAndprice.js文档，输入如下代码：

24.5.8　产品评分的效果

本节将设计右侧产品评分效果。

【操作步骤】

第1步，在开始实现该效果之前，先设计静态的HTML结构，代码如下：

通过改变

• 元素的class属性，即可实现评分效果，根据这个原理，可以编写脚本。

第2步，新建JavaScript文档，保存为star.js，然后输入以下代码：

第3步，运行效果，当单击灰色五角星，可以看到评分等级，同时会变色显示当前评分情况，演示效果如图24.24所示。

图24.24　产品评分效果

24.5.9　放入购物车效果

下面设计右侧产品的购物车功能。当用户选择购买该产品时，表明要把产品放入购物车，这一步只需要将用户选择产品的名称、尺寸、颜色、数量和总价告诉用户，以便用户进行确认，是否选择正确。

【操作步骤】

第1步，新建JavaScript文档，保存为finish.js，然后输入以下代码：

第2步，应用该特效，则演示效果如图24.25所示。

图24.25　放入购物车提示效果

提示：在本例中使用了一个简单的模态对话框插件SimpleModal，该插件是一个轻量级的jQuery插件，它为模态窗口的开发提供了一个强有力的接口，可以把它当作模态窗口的框架。SimpleModal非常灵活，可以创建能够想象到的任何东西，并且还不需要考虑UI开发中的跨浏览器相关问题。

jQuery SimpleModal插件的下载

从官方下载插件，在文件中引用：

使用方法具体可以从官方网站下载带例子的压缩包，很容易上手。

SimpleModal自定义选项说明如下。

　appendTo：将弹出框添加到的父容器，参数为CSS选择器。

　opacity：透明度。

　overlayId：遮罩层id。

　overlayCss：{Object}定义遮罩层样式。

　containerId：弹出窗体容器id。

　containerCss：定义容器的样式。

　dataId：内容层id。

　containerCss：内容层的样式。

　minHeight：最小高度。

　minWidth：最小宽度。

　maxHeight：最大高度。

　maxWidth：最大宽度。

　autoResize：是否自适应大小。

　zIndex：弹出层的z-index。

　close：是否允许关闭

　closeHTML：自定义关闭按钮。

　closeClass：关闭层样式。

　overlayClose：单击遮罩层是否关闭弹出窗体。

　position：数组[top, left]自定义弹出窗体位置。

　onOpen：弹出窗体打开时的回调函数。

　onShow：弹出窗体显示时的回调函数。

　onClose：弹出窗体关闭时的回调函数。

24.6　小结

到此，用户可以放心地将这个购物网站交给后台程序员去处理了。该网站已经具备了完整的UI界面和交互效果。在制作网站的过程中使用合法且语义清晰的HTML结构，还使用外部CSS样式表为这个网站定义样式，实现经典的网店视觉效果，最后利用jQuery所提供的强大功能改善了网站的行为和可用性，使用户更容易接受这个网站。

本章将jQuery基础知识和效果进行整合，读者不仅可以学到jQuery中的一些理论，还能够运用jQuery创建一个完整的网站，利用jQuery提供的方法和函数，可以编写出既实用又功能强大的脚本。当然jQuery拥有强大的开发能力和扩展潜力，读者可以根据需要进一步学习和发掘。