widget装修代码指南实际开发中需要用到一些功能比较丰富主机如图片轮播tab标签等

实际的开发中需要用到一些功能比较丰富的主机，如轮播，tab等，这些组件都需要设计师写Javascript才能<div<div --J_TWidget的元素,并根据其类型和配置信息,Tabs-Slide-Carousel-Accordion-Popup-Compatible-以下依次介绍每种不同的动画效果的配置参数以及其DOM结构Tabs- <liclass="ks-active"><li><li><li><div y:none"><div y:none"><div y:none"><div<div 'effect': y':'circular': --

none,最朴素的显示/隐藏效果fade,可实现淡隐淡现的效果scrolly,垂直滚动scrollx,

true/false(

如width:15px表示进度条最终宽度,CSS里对样 对其进行轮播的目标列表的class 自定义数值(默认值 .1==

触发方式——mouse：鼠标经过触发click：

true/false(

自定义数值(默认值

自定义数值(默认值

默认激活列表项的class

true/false(

true/false(

.1= 轮播淘小二推荐实例一实例二实例<divclass="J_TWidget<p><ahref="#"target="_blank"><img<p><ahref="#"target="_blank"><img<p><ahref="#"target="_blank"><img<liclass="selected"><ahref="#"<li><ahref="#"<li><ahref="#"<div 'delay':'effect':'easing':'duration': y': --

none,最朴素的显示/隐藏效果fade,可实现淡隐淡现的效果scrolly,垂直滚动scrollx,

true/false(

自定义数值(默认值 .1==

true/false(

自定义数值(默认值

自定义数值(默认值

Carousel旋转木马

.1=以将每一组内容再独自包含在一个ul列表中。 <spanid="scroller-prevclass="prevdisable">‹上一页下一页<div<imgalt=""<imgalt=""<imgalt=""<imgalt=""<imgalt=""<imgalt=""<imgalt=""<imgalt=""<imgalt=""<div 'effect':'easing':'steps':'viewSize':'circular':'prevBtnCls':'nextBtnCls':'disableBtnCls': --

none,最朴素的显示/隐藏效果fade,可实现淡隐淡现的效果scrolly,垂直滚动scrollx,

true/false默认值：

如width:15px表示进度条最终宽度,可先在CSS里对样式进

.1==

触发方式——mouse：鼠标经过触发click：

true/false默认值：

自定义数值(默认值

自定义数值(默认值：0) 自定义值(默认值：

.1==Accordion手风琴<divclass="J_TWidget<divclass="ks-switchable-triggerks-active"><h3>标题 <div<div -- 主列表的class (

触发方式——mouse：鼠标经过触发click：((Popup弹出层<divclass="J_TWidgethidden"data-widget-type="Popup"data-widget-config="{'trigger':'.first-trigger',}<divstyle="background-color:yellow;height:100px;width:<div<divclass="J_TWidgethidden"data-widget-type="Popup"data-widget-config="{'trigger':'.first-trigger',} --

node‘自定义’,//node‘自定义’,//popup与参考元素进行定位。和触点写支持classidpoints: 'tltr']popuptltroffset:具体tl，tr表示的意义和值看下面截图,//[n,m]points对齐后，offset'bl','bc','br')如下图所示:<divclass="J_TWidgethidden"data-widget-type="Popup"data-widget-config="{'trigger':'.first-trigger',}<divstyle="background-color:blue;height:100px;width:<divclass="J_TWidgethidden"data-widget-type="Popup"data-widget-config="{'trigger':'.first-trigger',}<divstyle="background-color:blue;height:100px;width:Countdown倒计时class<divclass="J_TWidget"data-widget-type="Countdown" 'endTime':'20000','d':'.ks-'h':'.ks-'m':'.ks-'s':'.ks-'i':'.ks-'minDigit':<!--倒计时结束时隐藏<!--<!--如果有0.1秒级别的变化建议以gif背 的形式变化--<!--倒计时结束时显示<!--

式：2011-7-2111:01:01）

'endTime':'2011-7-21'endTime

有此class名的，其内容在倒计时运行时显

'dks-d'hks-h','sks-s'iks-i} （>=1

例如：digit超过情形：400分20秒，则应该显示400分秒

有此class名的，其内容在倒计时运行时隐Compatibe兼容性组件兼容组件的第一个作用：ie6兼容组件的第一个作用：ie6<div data-widget-type="Compatible"data-widget-淘宝发布开源编辑器：KISSYEditor，和我们在WordPress使用的富文本编辑器TinyMCE一样，它可以让我TinyMCEKISSYEditorKISSYEditor是开KISSYUILibrary的一个组件。KISSYYUI2.x开发，目标是打造一系列小巧灵活、简洁实用、使用UICSSSuggestKISSYEditor这个富文本编辑器等组SliCarouse（）Accordion（）kissy中开放的配置（sdk中的config商务首页的一些效果截图附件中会给出，sdk中如何通过淘宝提供的J_TWidget实现其中的效果。用一个ks-switchable-nav来控制两个ks-switchable-content的切换。组件中的dom结构：包含在iddemo里面的div结构里面的结构。class=”J_TWidget”divkissy来渲染这个组件。::="{:'PS:我们更推荐用户去自定义一个class来覆盖这个淘宝默认的钩子，方法为在data-widget-config中,data-widget-config'contentClsclass'}"class=”ks-active当前正在轮播 'effect':'none', 'circular':true<liclass="ks-active"><li><li><li><li> y ytabs的展示效果是可以通过配置改变