淘宝sdk编写心得

http://www.cnwins.cn/study/2013/31120.html

 以下为淘宝店铺开放的技术资料：

http://wiki.zx.taobao.com/index.php/Widget%E8%A7%84%E8%8C%83

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

最外层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” : 当前正在轮播的对象（可以用这个来动态应用样式）

样例代码

<div  class="J_TWidget"  data-widget-type="Tabs"  data-widget-config="{
            'effect': 'none',
            'autoplay': 'auto',
            'circular': true
      }">
    <ul class="ks-switchable-nav">
        <li class="ks-active">标题 A</li>
        <li>标题 B</li>
        <li>标题 C</li>
        <li>标题 D</li>
        <li>标题 E</li>
    </ul>
    <div class="ks-switchable-content">
        <div>

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

        </div>
        <div style="display: none;">这里还可以放置一些图片，比如像百度首页下面的那个</div>
        <div style="display: none;">至于如何使用tab，大家可以尽情发挥</div>
        <div style="display: none;">这是最内容D ，这是最内容D</div>
        <div style="display: none;">
            这个div里面放置任何你想要放的dom结构，你所要做的就是用过css，控制dom的展示
        </div>
    </div>
</div>