45 Widget规范.docx

配置参数列表

配置参数

参数可选值

作用说明

effect

none/fade/scrolly/scrollx

（默认值：

none）

切换时的动画效果

none,最朴素的显示/隐藏效果

fade,可实现淡隐淡现的效果

scrolly,垂直滚动

scrollx,水平滚动

easing

easeOutStrong/easeBoth

滚动的动画方方式

countdown

true/false（默认值：

false）

是否开启倒计时样式

countdownFromStyle

自定义值

设定倒计时最终样式

如:

width:

15px表示进度条最终宽度,可先在CSS里对样式进行定义

navCls

自定义值

对其进行轮播的目标列表的class值

contentCls

自定义值

轮播列表所对应的内容列表的class值

delay

自定义数值（默认值：

1）

延迟加载时间

.1==100ms

triggerType

mouse/click<>

（默认值：

mouse）br

触发方式——

mouse：

鼠标经过触发

click：

鼠标点击触发

hasTriggers

true/false（默认值：

true）

是否设置触发点

steps

自定义数值（默认值：

1）

切换视图内有多少个panels

viewSize

自定义值

切换视图区域的大小。

一般不需要设定此值，仅当获取值不正确时，用于手工指定大小

activeIndex

自定义数值（默认值：

0）

默认激活的列表项

activeTriggerCls

自定义值（默认值：

active）

默认激活列表项的class值

autoplay

true/false（默认值：

true）

是否自动播放

circular

true/false（默认值：

true）

是否有循环滚动效果

duration

自定义值（默认值：

0.5）

动画时长

.1=100ms

Slide卡盘效果

实例展示

超帅图片轮播淘小二推荐     实例一     实例二     实例三     

所需DOM结构

本组件需要将滚动的对象作为一个ul列表，包含在外层的容器中，同时容器里还需要定义一个容器来放置列表中对应项的具体内容。

aaa

组件调用方法

'navCls':

'yslider-stick',

'contentCls':

'yslider-stage',

'activeTriggerCls':

'selected',

'delay':

0.2,

'effect':

'fade',

'easing':

'easeBoth',

'duration':

0.8,

'autoplay':

false,

}”>

--code-->

参数配置列表

配置参数

参数可选值

作用说明

effect

none/fade/scrolly/scrollx

（默认值：

none）

切换时的动画效果

none,最朴素的显示/隐藏效果

fade,可实现淡隐淡现的效果

scrolly,垂直滚动

scrollx,水平滚动

easing

easeOutStrong/easeBoth

滚动的动画方方式

countdown

true/false（默认值：

false）

是否开启倒计时样式

countdownFromStyle

自定义值

设定倒计时最终样式

如:

width:

15px表示进度条最终宽度,可先在CSS里对样式进行定义

navCls

自定义值

对其进行轮播的目标列表的class值

contentCls

自定义值

轮播列表所对应的内容列表的class值

delay

自定义数值（默认值：

1）

延迟加载时间

.1==100ms

triggerType

mouse/click<>

（默认值：

mouse）br

触发方式——

mouse：

鼠标经过触发

click：

鼠标点击触发

hasTriggers

true/false（默认值：

true）

是否设置触发点

steps

自定义数值（默认值：

1）

切换视图内有多少个panels

viewSize

自定义值

切换视图区域的大小。

一般不需要设定此值，仅当获取值不正确时，用于手工指定大小

activeIndex

自定义数值（默认值：

0）

默认激活的列表项

activeTriggerCls

自定义值（默认值：

active）

默认激活列表项的class值

duration

自定义值（默认值：

0.5）

动画时长

.1=100ms

Carousel-旋转木马

实例展示

实例一     实例二     

所需DOM结构

需要滚动的对象依次罗列，包含在内容区的容器中，同时需要两个不同ID的容器来分别包含上下翻页的按钮，另外可以将每一组内容再独自包含在一个ul列表中。

‹上一页

下一页›

•

组件调用方法

'effect':

'scrollx',

'easing':

'easeOutStrong',

'steps':

5,

'viewSize':

[680],

'circular':

false,

'prevBtnCls':

'prev',

'nextBtnCls':

'next',

'disableBtnCls':

'disable',

}”>

--code-->

参数配置列表

配置参数

参数可选值

作用说明

effect

none/fade/scrolly/scrollx

（默认值：

none）

切换时的动画效果

none,最朴素的显示/隐藏效果

fade,可实现淡隐淡现的效果

scrolly,垂直滚动

scrollx,水平滚动

easing

easeOutStrong/easeBoth

滚动的动画方方式

countdown

true/false（默认值：

false）

是否开启倒计时样式

countdownFromStyle

自定义值

设定倒计时最终样式

如:

width:

15px表示进度条最终宽度,可先在CSS里对样式进行定义

navCls

自定义值

对其进行轮播的目标列表的class值

contentCls

自定义值

轮播列表所对应的内容列表的class值

delay

自定义数值（默认值：

1）

延迟加载时间，当前显示图片到切换其他图片动作开始，这中间的停留时间

.1==100ms

triggerType

mouse/click<>

（默认值：

mouse）br

触发方式——

mouse：

鼠标经过触发

click：

鼠标点击触发

hasTriggers

true/false（默认值：

true）

是否设置触发点

steps

自定义数值（默认值：

1）

切换视图内有多少个panels

viewSize

自定义值

切换视图区域的大小。

一般不需要设定此值，仅当获取值不正确时，用于手工指定大小

activeIndex

自定义数值（默认值：

0）

默认激活的列表项

activeTriggerCls

自定义值（默认值：

active）

默认激活列表项的class值

circular

true/false（默认：

true）

滚动效果

prevBtnCls

自定义值

上一页的class值

nextBtnCls

自定义值

下一页的class值

disableBtnCls

自定义值

按钮不可用的class值

duration

自定义值（默认：

0.5）

动画时长,一张图片开始切换到另一张图片显示的时间

.1==100ms

Accordion-手风琴

实例展示

实例一     实例二     

所需DOM结构

需要将菜单中每个标题及其内容分别包含在对应的容器中，最外层容器有唯一的ID来标示组件。

标题A

内容AAAAA

标题B

none;">

内容BBBBB

标题C

none;">

内容CCCCC

标题D

none;">

内容DDDDD

组件调用方法

'triggerType':

'click',

'multiple':

true

}”>

--code-->

配置参数列表

配置参数

参数可选值

作用说明

triggerCls

自定义值

主列表的class值

panelCls

自定义值

列表所对应的内容列表的class值

triggerType

mouse/click（默认值：

click）

触发方式——

mouse：

鼠标经过触发

click：

鼠标点击触发

multiple

true/false（默认值：

false）

是否同时支持多面板展开

hasTriggers

true/false（默认值：

true）

是否设置触发点

Popup-弹出层

实例展示

实例一     实例二     

所需DOM结构

本组件作为一个弹出层的效果，通过预先设置一个隐藏的弹出层，并且设置该弹出层的触点，通过鼠标滑入和移出触点来展示和隐藏弹出层效果

我只是个触点而已，把鼠标滑到我身上

'trigger':

'.first-trigger',

'align':

{

'node':

'.first-trigger',

'offset':

[0,0],

'points':

['cr','cc']

}

}">

blue;height:

100px;width:

100px;">

我是一个弹出层

组件调用方法

'trigger':

'.first-trigger',

'align':

{

'node':

'.first-trigger',

'offset':

[0,0],

'points':

['cr','cc']

}

}">

--code-->

配置参数列表

配置参数

参数可选值

作用说明

trigger

自定义

触点元素，就是鼠标滑过哪个元素的时候弹出当前的popup，支持class和id选择器的写法

align

node,points,offset三个配置

node:

‘自定义’,//参考元素。

popup与参考元素进行定位。

和触点写法一样，支持class和id选择器

的写法

points:

[tr,tl],//['tl','tr']表示popup的tl与参考节点的tr对齐，

具体tl，tr表示的意义和值看下面截图,t（top），c（center）,b（bottom）,l（left）,r（right）

offset:

[0,0]//有效值为[n,m]，points对齐后，offset值，一般可用于微调,n和m分别表示对齐两个

点在x,y坐标之间的偏移量

配置项align中的points的说明

触点与弹出层的对齐方式（align中的points配置）元素及参考元素上各自的九个不同位置点（'tl','tc','tr','cl','cc','cr','bl','bc','br'）如下图所示:

demo代码，直接复制到自定义内容区里面，保存-预览就可以到效果了哈。

大家发挥自己的想象力吧。

我只是个触点而已，把鼠标滑到我身上

'trigger':

'.first-trigger',

'align':

{

'node':

'.first-trigger',

'offset':

[0,0],

'points':

['cr','cl']

}

}">

blue;height:

100px;width:

100px;">

我是一个弹出层

demo代码，直接复制到自定义内容区里面，保存-预览就可以到效果了哈。

大家发挥自己的想象力吧。

我只是个触点而已，把鼠标滑到我身上

'trigger':

'.first-trigger',

'align':

{

'node':

'.first-trigger',

'offset':

[0,0],

'points':

['cr','cl']

}

}">

blue;height:

100px;width:

100px;">

我是一个弹出层

注意：

触点目前只允许包含在#content内。

不允许影响页头页尾：

关于Kissy

淘宝发布开源编辑器：

KISSYEditor，和我们在WordPress后台使用的富文本编辑器TinyMCE一样，它可以让我们在线编辑和格式化文本，但是相比TinyMCEKISSYEditor更加轻巧，更加适合国内的网络环境。

KISSYEditor是开源项目KISSYUILibrary的一个组件。

KISSY目前基于YUI2.x开发，目标是打造一系列小巧灵活、简洁实用、使用起来让人感觉愉悦的UI组件，目前已有CSS基础框架、搜索提示Suggest和KISSYEditor这个富文本编辑器等组件。

支持效果

目前kissy中开放，能直接调用的效果组件为switchable，其中包括四种widget，tabs（标签页），Slide（卡盘），Carousel（旋转木马），Accordion（手风琴）虽然只有四种效果，但实际上，通过kissy中开放的配置（对应sdk中的data-widget-config），以及不同的dom结构，与css控制，可以展示出各种各样的效果。

下面是互联网中，部分电子商务网站首页的一些效果截图附件中会给出，sdk中如何通过淘宝提供的J_TWidget实现其中的效果。

Tabs：

其中“土豆今日焦点”这个组件中，当缩略图的切换时，上面的内容和左侧的大图同时切换，这个略微特殊一点，用到了两个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” :

这个用来定义当前组件进行轮播的目

文档加载中……请稍候！
如果长时间未打开，您也可以点击刷新试试。

下载文档到电脑，查找使用更方便

下载	加入VIP,免费下载

还剩页未读，继续阅读

举报
版权申诉 word格式文档无特别注明外均可编辑修改；预览文档经过压缩，下载后原文更清晰！ 立即下载

配套讲稿：

如PPT文件的首页显示word图标，表示该PPT已包含配套word讲稿。双击word图标可打开word文档。

特殊限制：

部分文档作品中含有的国旗、国徽等图片，仅作为作品整体效果示例展示，禁止商用。设计者仅对作品中独创性部分享有著作权。

关 键  词：

45 Widget规范 Widget 规范

  冰豆网所有资源均是用户自行上传分享，仅供网友学习交流，未经上传用户书面授权，请勿作他用。