首页 > 互联资讯 > 建站教程  > 

网页购物车设计的选项卡

在产品属性介绍内容时,使用了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拥有强大的开发能力和扩展潜力,读者可以根据需要进一步学习和发掘。

网页购物车设计的选项卡由讯客互联建站教程栏目发布,感谢您对讯客互联的认可,以及对我们原创作品以及文章的青睐,非常欢迎各位朋友分享到个人网站或者朋友圈,但转载请说明文章出处“网页购物车设计的选项卡