Widget规范.docx
- 文档编号:10651706
- 上传时间:2023-02-22
- 格式:DOCX
- 页数:26
- 大小:160.82KB
Widget规范.docx
《Widget规范.docx》由会员分享,可在线阅读,更多相关《Widget规范.docx(26页珍藏版)》请在冰豆网上搜索。
Widget规范
Widget规范(SDK技术文档5)
Widget规范
目录
1概述
2使用方法
2.1Tabs-标签页
2.1.1实例展示
2.1.2所需DOM结构
2.1.3组件调用方法
2.1.4配置参数列表
2.2Slide卡盘效果
2.2.1实例展示
2.2.2所需DOM结构
2.2.3组件调用方法
2.2.4参数配置列表
2.3Carousel-旋转木马
2.3.1实例展示
2.3.2所需DOM结构
2.3.3组件调用方法
2.3.4参数配置列表
2.4Accordion-手风琴
2.4.1实例展示
2.4.2所需DOM结构
2.4.3组件调用方法
2.4.4配置参数列表
2.5Popup-弹出层
2.5.1实例展示
2.5.2所需DOM结构
2.5.3组件调用方法
2.5.4配置参数列表
2.5.5配置项align中的points的说明
2.6Countdown-倒计时
2.6.1实例展示
2.6.2组件调用方法及所需DOM结构
2.6.3配置参数列表
2.7Compatibe-兼容性组件
2.7.1实例展示
2.7.2组件调用方法及所需DOM结构
2.7.3配置参数列表
3关于Kissy
4支持效果
5编写心得
6样例代码
概述
实际的开发中需要用到一些功能比较丰富的主机,如图片轮播,tab标签等,这些组件都需要设计师写Javascript才能完成,考虑前期JavaScript是不对设计师开放的,所以淘宝要提供一些widget库,方便设计调用,形成特定的组件。
通过载入淘宝的js框架来渲染。
--code-->
我们会获取名字叫J_TWidget的元素,并根据其类型和配置信息,渲染相应的效果。
使用方法
目前淘宝提供的widget分为6种:
Tabs-标签页
Slide-卡盘
Carousel-旋转木马
Accordion-手风琴
Popup-弹出层
Compatible-兼容性组件
针对每种不同的动画效果需要通过配置不同的参数,配合不同的DOM结构。
以下依次介绍每种不同的动画效果的配置参数以及其DOM结构
Tabs-标签页
实例展示
实例一实例二
所需DOM结构
本组件对DOM结构没有特殊要求,调用只需要按顺序将ul列表中每个元素跟内容元素一一对应即可,当然触点和内容都必须包含在唯一的外层容器里面。
标题A
标题B标题C标题D
none">内容B
none">内容C
none">内容D
组件调用方法
'effect':
'fade',
'autoplay':
true,
'circular':
true
}”>
--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值
autoplay
true/false(默认值:
true)
是否自动播放
circular
true/false(默认值:
true)
是否有循环滚动效果
duration
自定义值(默认值:
0.5)
动画时长
.1=100ms
Slide卡盘效果
实例展示
超帅图片轮播淘小二推荐实例一实例二实例三所需DOM结构
本组件需要将滚动的对象作为一个ul列表,包含在外层的容器中,同时容器里还需要定义一个容器来放置列表中对应项的具体内容。
aaa
bbbccc组件调用方法
'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)
是否设置触发点
<=""a=""style="padding:
0px;margin:
0px;color:
rgb(37,110,177);text-decoration:
none;">>Popup-弹出层
实例展示
实例一实例二
所需DOM结构
本组件作为一个弹出层的效果,通过预先设置一个隐藏的弹出层,并且设置该弹出层的触点,通过鼠标滑入和移出触点来展示和隐藏弹出层效果
我只是个触点而已,把鼠标滑到我身上
'trigger':
'.first-trigger',
'align':
{
'node':
'.first-trigger',
'offset':
[0,0],
'points':
['cr','cc']
}
}">
yellow;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内。
不允许影响页头页尾:
Countdown-倒计时
实例展示
实例一实例二组件调用方法及所需DOM结构
--配置项中的class名前别忘了加点号哦-->
'endTime':
'20000',
'interval':
1000,
'timeRunCls':
'.ks-countdown-run',
'timeUnitCls':
{
'd':
'.ks-d',
'h':
'.ks-h',
'm':
'.ks-m',
's':
'.ks-s',
'i':
'.ks-i'
},
'minDigit':
1,
'timeEndCls':
'.ks-countdown-end'
}">
--倒计
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
-
Widget
规范
冰豆网所有资源均是用户自行上传分享,仅供网友学习交流,未经上传用户书面授权,请勿作他用。