(Widget规范.docVIP

Widget规范 （SDK 技术文档 5） Widget规范 目录 1 概述 2 使用方法 2.1 Tabs - 标签页 2.1.1 实例展示 2.1.2 所需DOM结构 2.1.3 组件调用方法 2.1.4 配置参数列表 2.2 Slide卡盘效果 2.2.1 实例展示 2.2.2 所需DOM结构 2.2.3 组件调用方法 2.2.4 参数配置列表 2.3 Carousel - 旋转木马 2.3.1 实例展示 2.3.2 所需DOM结构 2.3.3 组件调用方法 2.3.4 参数配置列表 2.4 Accordion - 手风琴 2.4.1 实例展示 2.4.2 所需DOM结构 2.4.3 组件调用方法 2.4.4 配置参数列表 2.5 Popup - 弹出层 2.5.1 实例展示 2.5.2 所需DOM结构 2.5.3 组件调用方法 2.5.4 配置参数列表 2.5.5 配置项align中的points的说明 2.6 Countdown - 倒计时 2.6.1 实例展示 2.6.2 组件调用方法及所需DOM结构 2.6.3 配置参数列表 2.7 Compatibe - 兼容性组件 2.7.1 实例展示 2.7.2 组件调用方法及所需DOM结构 2.7.3 配置参数列表 3 关于Kissy 4 支持效果 5 编写心得 6 样例代码 概述 实际的开发中需要用到一些功能比较丰富的主机，如图片轮播，tab标签等，这些组件都需要设计师写Javascript才能完成，考虑前期JavaScript是不对设计师开放的，所以淘宝要提供一些widget库，方便设计调用，形成特定的组件。 通过载入淘宝的js框架来渲染。 div class=J_TWidget data-type=Slide data-cfg={…} !-- code -- /div 我们会获取名字叫 J_TWidget 的元素, 并根据其类型和配置信息, 渲染相应的效果。 使用方法 目前淘宝提供的widget 分为6种: Tabs - 标签页 Slide - 卡盘 Carousel - 旋转木马 Accordion - 手风琴 Popup - 弹出层 Compatible - 兼容性组件  针对每种不同的动画效果需要通过配置不同的参数，配合不同的DOM结构。以下依次介绍每种不同的动画效果的配置参数以及其DOM结构 Tabs - 标签页 实例展示 实例一 实例二 所需DOM结构 本组件对DOM结构没有特殊要求，调用只需要按顺序将ul列表中每个元素跟内容元素一一对应即可，当然触点和内容都必须包含在唯一的外层容器里面。 div class=J_TWidget section ul class=ks-switchable-nav li class=ks-active标题 A/li li标题 B/li li标题 C/li li标题 D/li /ul div class=ks-switchable-content div -----预先加载的内容--------- /div div style=display: none内容 B/div div style=display: none内容 C/div div style=display: none内容 D/div /div /div 组件调用方法 div class=”J_TWidget” data-widget-type=”Tabs” data-widget-config=”{ effect: fade, autoplay: true, circular: true }” !-- code -- /div 配置参数列表 配置参数 参数可选值 作用说明 effect none/fade/scrolly/scrollx(默认值：none) 切换时的动画效果none, 最朴素的显示/隐藏效果fade, 可实现淡隐淡现的效果scrolly, 垂直滚动scrollx, 水平滚动 easing easeOutStrong/easeBoth 滚动的动画方方式 countdown true/false (默认值：false) 是