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

时间:2011-06-14 20:12 来源:未知 作者:地瓜 浏览: 2550

拓展版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>

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

 

觉得本文有用?

相关文章

精彩评论

评论列表(网友评论仅供网友表达个人看法,并不表明本站同意其观点或证实其描述)
  • 由熠创意
    2013-09-01 22:50:46发表

    那个css添加到哪里啊?

推荐阅读

  • 淘宝店铺装修在线制作

    很多新手朋友对ps并不是很懂,或者说一窍不通,那么想制作一些自己的店招,分类,店标等等怎么办呢?淘宝学堂装修...

  • 如何让店铺视觉直接提升销售额

    最近碰到很多的卖家都在纠结自己的店铺视觉,总感觉自己的店铺风格不是自己需要的,我发现很多店主还是在凭自己的...

热点排行