淘宝css载入Widget规范和设置

淘宝css载入Widget规范和设置淘宝店铺装修中中需要用到一些功能比较丰富的主机，如图片轮播，tab标签等，这些组件都需要设计师写Javascript才能完成，考虑前期JavaScript是不对设计师开放的，所以淘宝要提供一些widget库，方便设计调用，形成特定的组件。通过载入淘宝的js框架来渲染。divclass=J_TWidgetdata-type=Slidedata-cfg={…}!--code--/div我们会获取名字叫J_TWidget的元素,并根据其类型和配置信息,渲染相应的效果。使用方法目前淘宝提供的widget分为5种:Tabs-标签页Slide-卡盘Carousel-旋转木马Accordion-手风琴Popup-弹出层针对每种不同的动画效果需要通过配置不同的参数，配合不同的DOM结构。组件中的dom结构：包含在id为demo里面的div结构里面的结构。class=”J_TWidget”：用来表示这个div是一个组件，我们要用kissy来渲染这个组件。data-widget-type=Tabs:这个是用来告诉sdk，我们的widget组件要用什么方式来渲染。data-widget-config=”{….}”:这个是组件的相关配置，也是很灵活的一部分class=”ks-switchable-nav”:这个用来定义当前组件进行轮播的目标列表的class值。PS:我们更推荐用户去自定义一个class来覆盖这个淘宝默认的钩子，方法为在data-widget-config中。data-widget-config={'navCls':'自定义的class'}，这样也方便设计师定义样式。class=ks-switchable-content：用来定义轮播列表所对应的内容列表的class值。PS:我们更推荐用户去自定义一个class来覆盖这个淘宝默认的钩子，方法为在data-widget-config中,data-widget-config={'contentCls':'自定义的class'}，这样也方便设计师定义样式class=”ks-active”:当前正在轮播的对象（可以用这个来动态应用样式）Tabs-标签页本组件对DOM结构没有特殊要求，调用只需要按顺序将ul列表中每个元素跟内容元素一一对应即可，当然触点和内容都必须包含在唯一的外层容器里面。divclass=J_TWidgetsection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复制代码组件调用方法PREdivclass=”J_TWidget”data-widget-type=”Tabs”data-widget-config=”{'effect':'fade','autoplay':true,'circular':true}”!--code--/div/PRE复制代码1、J_TWidget表示需要用库文件开始渲染；2、data-widget-type=Tabs这个是用来告诉库文件，我们的widget组件要用什么方式来渲染，即它的表现方式为Tab标签式；3、data-widget-config=”{….}”这里是组件的相关配置，是很灵活的一部分，可以看后面的配置表；4、class=”ks-switchable-nav”这个用来定义当前组件进行轮播的目标列表的class值，就是触发区域；5、class=ks-switchable-content用来定义轮播列表所对应的内容区域的class值。配置参数列表配置参数参数可选值作用说明effectnone/fade/scrolly/scrollx(默认值：none)切换时的动画效果none,最朴素的显示/隐藏效果fade,可实现淡隐淡现的效果scrolly,垂直滚动scrollx,水平滚动easingeaseOutStrong/easeBoth滚动的动画方方式countdowntrue/false(默认值：false)是否开启倒计时样式countdownFromStyle自定义值设定倒计时最终样式如:width:15px表示进度条最终宽度,可先在CSS里对样式进行定义navCls自定义值对其进行轮播的目标列表的class值contentCls自定义值轮播列表所对应的内容列表的class值delay自定义数值(默认值：1)延迟加载时间.1==100mstriggerTypemouse/click(默认值：mouse)br触发方式——mouse：鼠标经过触发click：鼠标点击触发hasTriggerstrue/false(默认值：true)是否设置触发点steps自定义数值(默认值：1)切换视图内有多少个panelsviewSize自定义值切换视图区域的大小。一般不需要设定此值，仅当获取值不正确时，用于手工指定大小activeIndex自定义数值(默认值：0)默认激活的列表项activeTriggerCls自定义值(默认值：active)默认激活列表项的class值autoplaytrue/false(默认值：true)是否自动播放circulartrue/false(默认值：true)是否有循环滚动效果duration自定义值（默认值：0.5）动画时长.1=100ms例一：DOM结构divclass=J_TWidgettab1data-widget-type=Tabsulclass=ks-switchable-navliclass=ks-active标题A/lili标题B/lili标题C/lili标题D/lili标题E/li/uldivclass=ks-switchable-contentdiv内容A/divdivstyle=display:none内容B/divdivstyle=display:none内容C/divdivstyle=display:none内容D/divdivstyle=display:none内容E/div/div/div复制代码CSS结构.tab1li{list-style:none;}.tab1{position:relative;width:750px;padding-top:29px;}.tab1.ks-switchable-nav{position:absolute;left:20px;margin-top:-29px;z-index:99;}.tab1.ks-switchable-navli{float:left;width:130px;height:27px;line-height:21px;text-align:center;background:url(Ahref=://img01.taobaocdn.com/tps/i1/T1XtV7XjhsXXXXXXXX-130-70.gif/A)no-repeat06px;margin-right:3px;padding-top:8px;cursor:pointer;}.tab1.ks-switchable-navli.ks-active{background-position:0-40px;cursor:default;}.tab1.ks-switchable-content{position:relative;height:120px;padding:20px;border:1pxsolid#AEC7E5;}复制代码合并后，，通用代码divclass=J_TWidgetdata-widget-type=Tabsstyle=position:relative;width:750px;ulclass=ks-switchable-navstyle=position:absolute;margin-top:-29px;width:730px;left:20px;z-index:99;liclass=ks-activestyle=list-style:none;float:left;width:130px;height:27px;line-height:21px;text-align:center;background:url(Ahref=://img01.taobaocdn.com/tps/i1/T1XtV7XjhsXXXXXXXX-130-70.gif/A)no-repeat06px;margin-right:3px;padding-top:8px;cursor:pointer;标题A/lilistyle=list-style:none;float:left;width:130px;height:27px;line-height:21px;text-align:center;background:url(Ahref=://img01.taobaocdn.com/tps/i1/T1XtV7XjhsXXXXXXXX-130-70.gif/A)no-repeat06px;margin-right:3px;padding-top:8px;cursor:pointer;标题B/lilistyle=list-style:none;float:left;width:130px;height:27px;line-height:21px;text-align:center;background:url(Ahref=://img01.taobaocdn.com/tps/i1/T1XtV7XjhsXXXXXXXX-130-70.gif/A)no-repeat06px;margin-right:3px;padding-top:8px;cursor:pointer;标题C/lilistyle=list-style:none;float:left;width:130px;height:27px;line-height:21px;text-align:center;background:url(Ahref=://img01.taobaocdn.com/tps/i1/T1XtV7XjhsXXXXXXXX-130-70.gif/A)no-repea