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>