淘宝拓展版Tab标签轮播代码

拓展版Tab标签轮播代码。淘宝店铺拓展版装修中所用的轮播焦点图效果，可以通过焦点图的Tab插件制作完成，本文讲解如何制作tab标签式焦点图。

由于淘宝装修平台增强了一些展示效果，但这些效果需要用Javascript编写，但目前淘宝装修平台又不能将Javascript开放给众多设计师，所以他们提供了一些Widget库供设计师们调用。

首先，针对不同的效果，需要配置不同的参数，也应该采用不同的Html代码结构。

然后利用名叫J_TWidget的元素，让库文件找到它，并开始渲染，比如：

<divclass="J_TWidget"data-type="Slide"data-cfg="{…}">

<!--code-->

</div>

现在我们拿第一种Tab标签来举例。

<divid="demo1"class="J_TWidget"data-widget-type="Tabs"data-widget-config="{

'effect':'fade',

'autoplay':true,

'circular':true

}">

<divclass="section">

<ulclass="ks-switchable-nav">

<liclass="ks-active">标题A</li>

<li>标题B</li>

<li>标题C</li>

<li>标题D</li>

</ul>

<divclass="ks-switchable-content">

<div>-----预先加载的内容---------</div>

<divstyle="display:none">内容B</div><divstyle="display:none">内容C</div>

<divstyle="display:none">内容D</div>

</div>

</div>

</div>

上面代码中粗体部分是比较重要的地方，必须添加，下面一一对其进行解释。

1、demo1表示为最外面的容器；

2、J_TWidget表示需要用库文件开始渲染；

3、data-widget-type="Tabs"这个是用来告诉库文件，我们的widget组件要用什么方式来渲染，即它的表现方式为Tab标签式；

4、data-widget-config=”{….}”这里是组件的相关配置，是很灵活的一部分，可以看后面的配置表；

5、class=”ks-switchable-nav”这个用来定义当前组件进行轮播的目标列表的class值，就是触发区域；

6、class="ks-switchable-content"用来定义轮播列表所对应的内容区域的class值。

将以上代码拷贝到装修后台预览一下，你会发现他们是错位的，不错，这是因为还差一步——定义CSS，我们需要将CSS内容也拷贝进后台：

<style>

#demo1{

position:relative;

width:750px;

padding-top:29px;

}

#demo1.ks-switchable-nav{position:absolute;left:20px;margin-top:-29px;z-index:99;}

#demo1.ks-switchable-navli{

float:left;

width:130px;

height:27px;

line-height:21px;

text-align:center;

background:url(http://img03.taobaocdn.com/tps/i3/T1de0RXlhAXXXXXXXX-130-70.gif)no-repeat06px;

margin-right:3px;

padding-top:8px;

cursor:pointer;

}

#demo1.ks-switchable-navli.ks-active{background-position:0-40px;cursor:default;}

#demo1.ks-switchable-content{

position:relative;

height:120px;

padding:20px;

border:1pxsolid#AEC7E5;

}

#demo1.unselected.clsli{float:left;}

</style>

这样将Html和CSS内容融合到一起使用，才能让轮播焦点图起到效果。而且我们还可以利用CSS将它的样式改变，比如将Tab标签的触发区域放在内容区下面等等。

下面是配置参数列表，我们可以根据它的可选参数，制作出适合自己的特殊效果。配置参数列表：

比如我们想让触发点变成鼠标点击触发，那么可以修改为：

<divid="demo1"class="J_TWidget"data-widget-type="Tabs"data-widget-config="{

triggerType:click,

}">

<!--code-->

</div>

怎么样，学会了吗，其实这些一点也不难，只用掌握怎样应用而以。