淘宝模板开发系列之Widget规范

Widget规范

概述

实际的开发中需要用到一些功能比较丰富的主机，如图片轮播，tab标签等，这些组件都需要设计师写Javascript才能完成，考虑前期JavaScript是不对设计师开放的，所以淘宝要提供一些widget库，方便设计调用，形成特定的组件。

通过载入淘宝的js框架来渲染。

	

    
    
    

	天
	小时
	分
        
	秒
         
	毫秒
    
    

    
     
     
    

	倒计时结束了,干点什么吧
        把什么隐藏起来，或者把什么显示出来
    
    

    

配置参数列表

配置参数	参数可选值	作用说明
endTime	毫秒数（多少毫秒后倒计时结束），或者日期格式时间（格式：2011-7-21 11:01:01）	倒计时结束时间 例如：毫秒数： 'endTime': '2011-7-21 11:01:01' 或 日期格式： 'endTime': '10000'
interval	单位：毫秒，取值范围（>=100毫秒），默认值为1000毫秒	倒计时刷新间隔（单位为毫秒/次）即每隔多少毫秒刷新一次 例如：interval = 2000, 那么屏幕上的时间每次变化时会少两秒
timeRunCls	自定义值	有此class名的标签，其内容在倒计时运行时显示,倒计时结束时隐藏
timeUnitCls	时间单位的组合值,每个时间单位的class名自定义	设定时间单位b标签的class 例如:{ 'd': '.ks-d', //天 'h': '.ks-h', //小时 'm': '.ks-m', //分 's': '.ks-s', //秒 'i': '.ks-i' //毫秒 }
minDigit	数据类型：整数，取值范围（>=1），默认为1，	每个时间单位值显示的最小位数，意思是超过不截断，少则前面补0显示 例如：digit = 2 少于情形：2天4小时10分20秒，则应该显示02天04小时10分20秒 超过情形：400分20秒，则应该显示 400分20秒
timeEndCls	自定义值	有此class名的标签，其内容在倒计时运行时隐藏,倒计时结束时显示

Compatibe - 兼容性组件

实例展示

组件调用方法及所需DOM结构

兼容组件的第一个作用：ie 6的position:fixed;

    这是解决ie6的悬浮组件

   
第二种兼容的第二个作用：png在ie6下的透明

    背景透明

配置参数列表

配置参数	参数可选值	作用说明
fixed	可选值true / false，默认false	需要用兼容组件解决的问题，是否是ie 6下面的position:fixed
png	可选值true / false，默认false	需要用兼容组件解决的问题，是否是在ie 6下面的png透明
png_bg	可选值true / false，默认false	需要透明的png图片，是否是背景图
png_tag	可选值true / false，默认false	需要透明的png图片，是否是img标签元素

关于Kissy

淘宝发布开源编辑器：KISSY Editor，和我们在 WordPress 后台使用的富文本编辑器 TinyMCE 一样，它可以让我们在线编辑和格式化文本，但是相比 TinyMCE KISSY Editor 更加轻巧，更加适合国内的网络环境。 KISSY Editor 是开源项目 KISSY UI Library 的一个组件。KISSY 目前基于 YUI 2.x 开发，目标是打造一系列小巧灵活、简洁实用、使用起来让人感觉愉悦的 UI 组件，目前已有 CSS 基础框架、搜索提示 Suggest 和 KISSY Editor 这个富文本编辑器等组件。

支持效果

目前kissy中开放，能直接调用的效果组件为switchable，其中包括四种widget，tabs（标签页），Slide（卡盘），Carousel（旋转木马），Accordion（手风琴）虽然只有四种效果，但实际上，通过kissy中开放的配置（对应sdk中的data-widget-config），以及不同的dom结构，与css控制，可以展示出各种各样的效果。下面是互联网中，部分电子商务网站首页的一些效果截图附件中会给出，sdk中如何通过淘宝提供的J_TWidget实现其中的效果。

Tabs：

Slide：

• 其中“土豆今日焦点”这个组件中，当缩略图的切换时，上面的内容和左侧的大图同时切换，这个略微特殊一点，用到了两个slide，用一个ks-switchable-nav来控制两个ks-switchable-content的切换。

编写心得

拿其中一个dom结构为例，kissy中开放效果，只要把握其中这样几点。

最外层dom结构：id为demo这个div标签，组件的最外层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”: 当前正在轮播的对象（可以用这个来动态应用样式）

样例代码

    

        
标题 A
        
标题 B
        
标题 C
        
标题 D
        
标题 E
    
    

        

    tabs 标签的展示效果是可以通过配置改变的，比如，改变effect ，autoplay 等
    tabs 标签的展示效果是可以通过配置改变的，比如，改变effect ，autoplay 等
    tabs 标签的展示效果是可以通过配置改变的，比如，改变effect ，autoplay 等
    tabs 标签的展示效果是可以通过配置改变的，比如，改变effect ，autoplay 等

这里还可以放置一些图片，比如像百度首页下面的那个

至于如何使用tab，大家可以尽情发挥

这是最内容D ，这是最内容D

这个div里面放置任何你想要放的dom结构，你所要做的就是用过css，控制dom的展示

附录：SDK 的J_TWidget源代码在附件中，直接在sdk中新建一个模板，然后覆盖其中的index.php，就可以看到效果了。代码很简单，就是按照规范写dom结构，然后用css控制下样式就ok了。相信你看完样例，就可以很好的使用我们提供的widget了。